UI adjustment

Pixiview.iOS/Pixiview.iOS.csproj

@@ -77,6 +77,7 @@
     <Compile Include="GlobalSuppressions.cs" />
     <Compile Include="Services\FileStore.cs" />
     <Compile Include="Renderers\AppShellRenderer.cs" />
+    <Compile Include="Renderers\AppShellSection\AppShellSectionRootHeader.cs" />
   </ItemGroup>
   <ItemGroup>
     <InterfaceDefinition Include="Resources\LaunchScreen.storyboard" />
@@ -145,6 +146,7 @@
   <ItemGroup>
     <Folder Include="Renderers\" />
     <Folder Include="Services\" />
+    <Folder Include="Renderers\AppShellSection\" />
   </ItemGroup>
   <ItemGroup>
     <BundleResource Include="Resources\fa-light-300.ttf" />

Pixiview.iOS/Renderers/AdaptedPageRenderer.cs

@@ -1,6 +1,6 @@
-using System.Diagnostics.CodeAnalysis;
+using Foundation;
-using Foundation;
 using Pixiview.iOS.Renderers;
+using Pixiview.iOS.Services;
 using Pixiview.UI;
 using Pixiview.Utils;
 using UIKit;
@@ -46,11 +46,8 @@ namespace Pixiview.iOS.Renderers
             var element = Element;
             if (element != null)
             {
-                var style = ConvertStyle(Screen.GetStatusBarStyle(element));
+                var style = EnvironmentService.ConvertStyle(Screen.GetStatusBarStyle(element));
-                if (UIApplication.SharedApplication.StatusBarStyle != style)
+                EnvironmentService.SetStatusBarStyle(style);
-                {
-                    SetStatusBarStyle(style);
-                }
             }
 
             observer = UIDevice.Notifications.ObserveOrientationDidChange(ChangeOrientation);
@@ -68,38 +65,6 @@ namespace Pixiview.iOS.Renderers
             base.ViewWillDisappear(animated);
         }
 
-        private void SetStatusBarStyle(UIStatusBarStyle style)
-        {
-            if (style == UIStatusBarStyle.BlackOpaque)
-            {
-                UIApplication.SharedApplication.SetStatusBarHidden(true, true);
-            }
-            else
-            {
-                UIApplication.SharedApplication.SetStatusBarStyle(style, true);
-                UIApplication.SharedApplication.SetStatusBarHidden(false, true);
-            }
-
-            SetNeedsStatusBarAppearanceUpdate();
-        }
-
-        [SuppressMessage("Code Notifications", "XI0002:Notifies you from using newer Apple APIs when targeting an older OS version", Justification = "<Pending>")]
-        private UIStatusBarStyle ConvertStyle(StatusBarStyles style)
-        {
-            switch (style)
-            {
-                case StatusBarStyles.DarkText:
-                    return UIStatusBarStyle.DarkContent;
-                case StatusBarStyles.WhiteText:
-                    return UIStatusBarStyle.LightContent;
-                case StatusBarStyles.Hidden:
-                    return UIStatusBarStyle.BlackOpaque;
-                case StatusBarStyles.Default:
-                default:
-                    return UIStatusBarStyle.Default;
-            }
-        }
-
         void ChangeOrientation(object sender, NSNotificationEventArgs e)
         {
             var current = UIDevice.CurrentDevice.Orientation;
@@ -113,7 +78,7 @@ namespace Pixiview.iOS.Renderers
                 lastOrientation = current;
                 if (current == UIDeviceOrientation.Portrait && UIApplication.SharedApplication.StatusBarHidden)
                 {
-                    var style = ConvertStyle(Screen.GetStatusBarStyle(Element));
+                    var style = EnvironmentService.ConvertStyle(Screen.GetStatusBarStyle(Element));
                     if (style != UIStatusBarStyle.BlackOpaque)
                     {
                         UIApplication.SharedApplication.SetStatusBarHidden(false, true);

Pixiview.iOS/Renderers/AppShellRenderer.cs

@@ -1,5 +1,7 @@
-using System.Threading.Tasks;
+using System.Diagnostics.CodeAnalysis;
+using System.Threading.Tasks;
 using Pixiview.iOS.Renderers;
+using Pixiview.iOS.Renderers.AppShellSection;
 using Pixiview.Utils;
 using UIKit;
 using Xamarin.Forms;
@@ -14,7 +16,7 @@ namespace Pixiview.iOS.Renderers
 
         protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
         {
-            var renderer = base.CreateShellSectionRenderer(shellSection);
+            var renderer = new AppShellSectionRenderer(this);
             if (renderer is ShellSectionRenderer sr && Element is AppShell shell)
             {
                 shell.SetNavigationBarHeight(
@@ -24,15 +26,36 @@ namespace Pixiview.iOS.Renderers
             return renderer;
         }
 
+        [SuppressMessage("Code Notifications", "XI0002:Notifies you from using newer Apple APIs when targeting an older OS version", Justification = "<Pending>")]
+        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)
+        {
+            var renderer = base.CreateShellItemRenderer(item);
+            if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
+            {
+                if (renderer.ViewController is UITabBarController controller)
+                {
+                    var tabBar = controller.TabBar;
+                    tabBar.TintColor = UIColor.SecondaryLabelColor.ColorWithAlpha(1);
+                    tabBar.UnselectedItemTintColor = UIColor.SecondaryLabelColor;
+                }
+            }
+            return renderer;
+        }
+
         protected override IShellItemTransition CreateShellItemTransition()
         {
             return new AppShellItemTransition();
         }
+
+        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
+        {
+            return new AppShellTabBarAppearanceTracker();
+        }
     }
 
     public class AppShellItemTransition : IShellItemTransition
     {
-        [System.Diagnostics.CodeAnalysis.SuppressMessage("Code Notifications", "XI0001:Notifies you with advices on how to use Apple APIs", Justification = "<Pending>")]
+        [SuppressMessage("Code Notifications", "XI0001:Notifies you with advices on how to use Apple APIs", Justification = "<Pending>")]
         public Task Transition(IShellItemRenderer oldRenderer, IShellItemRenderer newRenderer)
         {
             var task = new TaskCompletionSource<bool>();
@@ -47,4 +70,90 @@ namespace Pixiview.iOS.Renderers
             return task.Task;
         }
     }
+
+    public class AppShellTabBarAppearanceTracker : IShellTabBarAppearanceTracker
+    {
+        UIColor _defaultBarTint;
+        UIColor _defaultTint;
+        UIColor _defaultUnselectedTint;
+
+        public void Dispose()
+        {
+        }
+
+        public void ResetAppearance(UITabBarController controller)
+        {
+            if (_defaultTint == null)
+                return;
+
+            var tabBar = controller.TabBar;
+            tabBar.BarTintColor = _defaultBarTint;
+            tabBar.TintColor = _defaultTint;
+            tabBar.UnselectedItemTintColor = _defaultUnselectedTint;
+        }
+
+        public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
+        {
+            IShellAppearanceElement appearanceElement = appearance;
+            //var backgroundColor = appearanceElement.EffectiveTabBarBackgroundColor;
+            var unselectedColor = appearanceElement.EffectiveTabBarUnselectedColor;
+            var titleColor = appearanceElement.EffectiveTabBarTitleColor;
+
+            var tabBar = controller.TabBar;
+            //bool operatingSystemSupportsUnselectedTint = Forms.IsiOS10OrNewer;
+
+            if (_defaultTint == null)
+            {
+                _defaultBarTint = tabBar.BarTintColor;
+                _defaultTint = tabBar.TintColor;
+
+                //if (operatingSystemSupportsUnselectedTint)
+                {
+                    _defaultUnselectedTint = tabBar.UnselectedItemTintColor;
+                }
+            }
+
+            //if (!backgroundColor.IsDefault)
+            //    tabBar.BarTintColor = backgroundColor.ToUIColor();
+            if (!UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
+            {
+                if (!titleColor.IsDefault)
+                    tabBar.TintColor = titleColor.ToUIColor();
+
+                //if (operatingSystemSupportsUnselectedTint)
+                {
+                    if (!unselectedColor.IsDefault)
+                        tabBar.UnselectedItemTintColor = unselectedColor.ToUIColor();
+                }
+            }
+        }
+
+        public void UpdateLayout(UITabBarController controller)
+        {
+        }
+    }
+
+    public class AppShellSectionRenderer : ShellSectionRenderer
+    {
+        public AppShellSectionRenderer(IShellContext context) : base(context)
+        {
+        }
+
+        protected override IShellSectionRootRenderer CreateShellSectionRootRenderer(ShellSection shellSection, IShellContext shellContext)
+        {
+            return new AppShellSectionRootRenderer(shellSection, shellContext);
+        }
+    }
+
+    public class AppShellSectionRootRenderer : ShellSectionRootRenderer
+    {
+        public AppShellSectionRootRenderer(ShellSection shellSection, IShellContext shellContext) : base(shellSection, shellContext)
+        {
+        }
+
+        protected override IShellSectionRootHeader CreateShellSectionRootHeader(IShellContext shellContext)
+        {
+            return new AppShellSectionRootHeader(shellContext);
+        }
+    }
 }

Pixiview.iOS/Renderers/AppShellSection/AppShellSectionRootHeader.cs

@@ -0,0 +1,326 @@
+using System;
+using System.Collections.Specialized;
+using System.ComponentModel;
+using System.Diagnostics.CodeAnalysis;
+using CoreGraphics;
+using Foundation;
+using UIKit;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.iOS;
+
+namespace Pixiview.iOS.Renderers.AppShellSection
+{
+    public class AppShellSectionRootHeader : UICollectionViewController, IAppearanceObserver, IShellSectionRootHeader
+    {
+        #region IAppearanceObserver
+
+        readonly Color _defaultBackgroundColor = new Color(0.964);
+        readonly Color _defaultForegroundColor = Color.Black;
+        readonly Color _defaultUnselectedColor = Color.Black.MultiplyAlpha(0.7);
+
+        void IAppearanceObserver.OnAppearanceChanged(ShellAppearance appearance)
+        {
+            if (appearance == null)
+                ResetAppearance();
+            else
+                SetAppearance(appearance);
+        }
+
+        protected virtual void ResetAppearance()
+        {
+            SetValues(_defaultBackgroundColor, _defaultForegroundColor, _defaultUnselectedColor);
+        }
+
+        protected virtual void SetAppearance(ShellAppearance appearance)
+        {
+            SetValues(appearance.BackgroundColor.IsDefault ? _defaultBackgroundColor : appearance.BackgroundColor,
+                appearance.ForegroundColor.IsDefault ? _defaultForegroundColor : appearance.ForegroundColor,
+                appearance.UnselectedColor.IsDefault ? _defaultUnselectedColor : appearance.UnselectedColor);
+        }
+
+        void SetValues(Color backgroundColor, Color foregroundColor, Color unselectedColor)
+        {
+            CollectionView.BackgroundColor = new Color(backgroundColor.R, backgroundColor.G, backgroundColor.B, .663).ToUIColor();
+            _bar.BackgroundColor = foregroundColor.ToUIColor();
+
+            bool reloadData = _selectedColor != foregroundColor || _unselectedColor != unselectedColor;
+
+            _selectedColor = foregroundColor;
+            _unselectedColor = unselectedColor;
+
+            if (reloadData)
+                CollectionView.ReloadData();
+        }
+
+        #endregion IAppearanceObserver
+
+        static readonly NSString CellId = new NSString("HeaderCell");
+
+        readonly IShellContext _shellContext;
+        UIView _bar;
+        UIView _bottomShadow;
+        Color _selectedColor;
+        Color _unselectedColor;
+        bool _isDisposed;
+
+        public AppShellSectionRootHeader(IShellContext shellContext) : base(new UICollectionViewFlowLayout())
+        {
+            _shellContext = shellContext;
+        }
+
+        public double SelectedIndex { get; set; }
+        public ShellSection ShellSection { get; set; }
+        IShellSectionController ShellSectionController => ShellSection;
+
+        public UIViewController ViewController => this;
+
+        public override bool CanMoveItem(UICollectionView collectionView, NSIndexPath indexPath)
+        {
+            return false;
+        }
+
+        public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
+        {
+            var reusedCell = (UICollectionViewCell)collectionView.DequeueReusableCell(CellId, indexPath);
+
+            if (!(reusedCell is ShellSectionHeaderCell headerCell))
+                return reusedCell;
+
+            var selectedItems = collectionView.GetIndexPathsForSelectedItems();
+
+            var shellContent = ShellSectionController.GetItems()[indexPath.Row];
+            headerCell.Label.Text = shellContent.Title;
+            headerCell.Label.SetNeedsDisplay();
+
+            headerCell.SelectedColor = _selectedColor.ToUIColor();
+            headerCell.UnSelectedColor = _unselectedColor.ToUIColor();
+
+            if (selectedItems.Length > 0 && selectedItems[0].Row == indexPath.Row)
+                headerCell.Selected = true;
+            else
+                headerCell.Selected = false;
+
+            return headerCell;
+        }
+
+        public override nint GetItemsCount(UICollectionView collectionView, nint section)
+        {
+            return ShellSectionController.GetItems().Count;
+        }
+
+        public override void ItemDeselected(UICollectionView collectionView, NSIndexPath indexPath)
+        {
+            if (CollectionView.CellForItem(indexPath) is ShellSectionHeaderCell cell)
+                cell.Label.TextColor = _unselectedColor.ToUIColor();
+        }
+
+        public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)
+        {
+            var row = indexPath.Row;
+
+            var item = ShellSectionController.GetItems()[row];
+
+            if (item != ShellSection.CurrentItem)
+                ShellSection.SetValueFromRenderer(ShellSection.CurrentItemProperty, item);
+
+            if (CollectionView.CellForItem(indexPath) is ShellSectionHeaderCell cell)
+                cell.Label.TextColor = _selectedColor.ToUIColor();
+        }
+
+        public override nint NumberOfSections(UICollectionView collectionView)
+        {
+            return 1;
+        }
+
+        public override bool ShouldSelectItem(UICollectionView collectionView, NSIndexPath indexPath)
+        {
+            var row = indexPath.Row;
+            var item = ShellSectionController.GetItems()[row];
+            IShellController shellController = _shellContext.Shell;
+
+            if (item == ShellSection.CurrentItem)
+                return true;
+            return shellController.ProposeNavigation(ShellNavigationSource.ShellContentChanged, (ShellItem)ShellSection.Parent, ShellSection, item, ShellSection.Stack, true);
+        }
+
+        public override void ViewDidLayoutSubviews()
+        {
+            if (_isDisposed)
+                return;
+
+            base.ViewDidLayoutSubviews();
+
+            LayoutBar();
+
+            _bottomShadow.Frame = new CGRect(0, CollectionView.Frame.Bottom, CollectionView.Frame.Width, 0.5);
+        }
+
+        public override void ViewDidLoad()
+        {
+            if (_isDisposed)
+                return;
+
+            base.ViewDidLoad();
+
+            CollectionView.ScrollsToTop = false;
+            CollectionView.Bounces = false;
+            CollectionView.AlwaysBounceHorizontal = false;
+            CollectionView.ShowsHorizontalScrollIndicator = false;
+            CollectionView.ClipsToBounds = false;
+
+            _bar = new UIView(new CGRect(0, 0, 20, 20));
+            _bar.Layer.ZPosition = 9001; //its over 9000!
+            CollectionView.AddSubview(_bar);
+
+            _bottomShadow = new UIView(new CGRect(0, 0, 10, 1))
+            {
+                BackgroundColor = Color.Black.MultiplyAlpha(0.3).ToUIColor()
+            };
+            _bottomShadow.Layer.ZPosition = 9002;
+            CollectionView.AddSubview(_bottomShadow);
+
+            var flowLayout = Layout as UICollectionViewFlowLayout;
+            flowLayout.ScrollDirection = UICollectionViewScrollDirection.Horizontal;
+            flowLayout.MinimumInteritemSpacing = 0;
+            flowLayout.MinimumLineSpacing = 0;
+            flowLayout.EstimatedItemSize = new CGSize(70, 35);
+
+            CollectionView.RegisterClassForCell(GetCellType(), CellId);
+
+            ((IShellController)_shellContext.Shell).AddAppearanceObserver(this, ShellSection);
+            ShellSectionController.ItemsCollectionChanged += OnShellSectionItemsChanged;
+
+            UpdateSelectedIndex();
+            ShellSection.PropertyChanged += OnShellSectionPropertyChanged;
+        }
+
+        protected virtual Type GetCellType()
+        {
+            return typeof(ShellSectionHeaderCell);
+        }
+
+        protected override void Dispose(bool disposing)
+        {
+            if (_isDisposed)
+                return;
+
+            if (disposing)
+            {
+                ((IShellController)_shellContext.Shell).RemoveAppearanceObserver(this);
+                ShellSectionController.ItemsCollectionChanged -= OnShellSectionItemsChanged;
+                ShellSection.PropertyChanged -= OnShellSectionPropertyChanged;
+
+                ShellSection = null;
+                _bar.RemoveFromSuperview();
+                RemoveFromParentViewController();
+                _bar.Dispose();
+                _bar = null;
+            }
+
+            _isDisposed = true;
+            base.Dispose(disposing);
+        }
+
+        protected void LayoutBar()
+        {
+            if (SelectedIndex < 0)
+                return;
+
+            if (ShellSectionController.GetItems().IndexOf(ShellSection.CurrentItem) != SelectedIndex)
+                return;
+
+            var layout = CollectionView.GetLayoutAttributesForItem(NSIndexPath.FromItemSection((int)SelectedIndex, 0));
+
+            if (layout == null)
+                return;
+
+            var frame = layout.Frame;
+
+            if (_bar.Frame.Height != 2)
+            {
+                _bar.Frame = new CGRect(frame.X, frame.Bottom - 2, frame.Width, 2);
+            }
+            else
+            {
+                UIView.Animate(.25, () => _bar.Frame = new CGRect(frame.X, frame.Bottom - 2, frame.Width, 2));
+            }
+        }
+
+        protected virtual void OnShellSectionPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == ShellSection.CurrentItemProperty.PropertyName)
+            {
+                UpdateSelectedIndex();
+            }
+        }
+
+        protected virtual void UpdateSelectedIndex(bool animated = false)
+        {
+            if (ShellSection.CurrentItem == null)
+                return;
+
+            SelectedIndex = ShellSectionController.GetItems().IndexOf(ShellSection.CurrentItem);
+
+            if (SelectedIndex < 0)
+                return;
+
+            LayoutBar();
+
+            CollectionView.SelectItem(NSIndexPath.FromItemSection((int)SelectedIndex, 0), false, UICollectionViewScrollPosition.CenteredHorizontally);
+        }
+
+        void OnShellSectionItemsChanged(object sender, NotifyCollectionChangedEventArgs e)
+        {
+            if (_isDisposed)
+                return;
+
+            CollectionView.ReloadData();
+        }
+
+        public class ShellSectionHeaderCell : UICollectionViewCell
+        {
+            public UIColor SelectedColor { get; set; }
+            public UIColor UnSelectedColor { get; set; }
+
+            public ShellSectionHeaderCell()
+            {
+
+            }
+
+            [Export("initWithFrame:")]
+            public ShellSectionHeaderCell(CGRect frame) : base(frame)
+            {
+                Label = new UILabel
+                {
+                    TextAlignment = UITextAlignment.Center,
+                    Font = UIFont.BoldSystemFontOfSize(14)
+                };
+                ContentView.AddSubview(Label);
+            }
+
+            public override bool Selected
+            {
+                get => base.Selected;
+                set
+                {
+                    base.Selected = value;
+                    Label.TextColor = value ? SelectedColor : UnSelectedColor;
+                }
+            }
+
+            public UILabel Label { get; }
+
+            public override void LayoutSubviews()
+            {
+                base.LayoutSubviews();
+
+                Label.Frame = Bounds;
+            }
+
+            public override CGSize SizeThatFits(CGSize size)
+            {
+                return new CGSize(Label.SizeThatFits(size).Width + 30, 35);
+            }
+        }
+    }
+}

Pixiview.iOS/Services/EnvironmentService.cs

@@ -54,6 +54,11 @@ namespace Pixiview.iOS.Services
             }
         }
 
+        public void SetStatusBarStyle(StatusBarStyles style)
+        {
+            SetStatusBarStyle(ConvertStyle(style));
+        }
+
         public void SetStatusBarColor(Color color)
         {
             // nothing need to do
@@ -61,6 +66,40 @@ namespace Pixiview.iOS.Services
 
         #endregion
 
+        public static void SetStatusBarStyle(UIStatusBarStyle style)
+        {
+            if (UIApplication.SharedApplication.StatusBarStyle == style)
+            {
+                return;
+            }
+            if (style == UIStatusBarStyle.BlackOpaque)
+            {
+                UIApplication.SharedApplication.SetStatusBarHidden(true, true);
+            }
+            else
+            {
+                UIApplication.SharedApplication.SetStatusBarStyle(style, true);
+                UIApplication.SharedApplication.SetStatusBarHidden(false, true);
+            }
+        }
+
+        [SuppressMessage("Code Notifications", "XI0002:Notifies you from using newer Apple APIs when targeting an older OS version", Justification = "<Pending>")]
+        public static UIStatusBarStyle ConvertStyle(StatusBarStyles style)
+        {
+            switch (style)
+            {
+                case StatusBarStyles.DarkText:
+                    return UIStatusBarStyle.DarkContent;
+                case StatusBarStyles.WhiteText:
+                    return UIStatusBarStyle.LightContent;
+                case StatusBarStyles.Hidden:
+                    return UIStatusBarStyle.BlackOpaque;
+                case StatusBarStyles.Default:
+                default:
+                    return UIStatusBarStyle.Default;
+            }
+        }
+
         #region - Culture Info -
 
         public CultureInfo GetCurrentCultureInfo()

Pixiview/App.cs

@@ -60,6 +60,8 @@ namespace Pixiview
                 themeInstance = LightTheme.Instance;
             }
             //DependencyService.Get<IEnvironmentService>().SetStatusBarColor
+            var style = (StatusBarStyles)themeInstance[ThemeBase.StatusBarStyle];
+            DependencyService.Get<IEnvironmentService>().SetStatusBarStyle(style);
             Resources = themeInstance;
         }
 

Pixiview/AppShell.xaml

@@ -7,8 +7,10 @@
        xmlns:u="clr-namespace:Pixiview.UI"
        xmlns:util="clr-namespace:Pixiview.Utils"
        x:Class="Pixiview.AppShell"
+       BackgroundColor="{DynamicResource NavColor}"
        ForegroundColor="{DynamicResource MainTextColor}"
-       TitleColor="{DynamicResource MainTextColor}">
+       TitleColor="{DynamicResource MainTextColor}"
+       UnselectedColor="{DynamicResource SubTextColor}">
     <Shell.FlyoutHeaderTemplate>
         <DataTemplate>
             <Grid RowSpacing="0" BackgroundColor="{DynamicResource WindowColor}" Padding="20, 0, 0, 20">
@@ -27,23 +29,68 @@
             </Grid>
         </DataTemplate>
     </Shell.FlyoutHeaderTemplate>
+    <Shell.ItemTemplate>
+        <DataTemplate x:DataType="BaseShellItem">
+            <Grid>
+                <VisualStateManager.VisualStateGroups>
+                    <VisualStateGroupList>
+                        <VisualStateGroup x:Name="CommonStates">
+                            <VisualState x:Name="Normal"/>
+                            <VisualState x:Name="Selected">
+                                <VisualState.Setters>
+                                    <Setter Property="BackgroundColor"
+                                            Value="{DynamicResource NavSelectedColor}"/>
+                                </VisualState.Setters>
+                            </VisualState>
+                        </VisualStateGroup>
+                    </VisualStateGroupList>
+                </VisualStateManager.VisualStateGroups>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="50"/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <Image Source="{Binding FlyoutIcon}"
+                       HorizontalOptions="Center" VerticalOptions="Center"
+                       HeightRequest="22"/>
+                <Label Grid.Column="1"
+                       Text="{Binding Title}"
+                       FontSize="{x:OnPlatform Android=14, iOS=Small}"
+                       VerticalTextAlignment="Center"/>
+            </Grid>
+        </DataTemplate>
+    </Shell.ItemTemplate>
     <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"
                 Route="{x:Static util:Routes.Illust}">
-        <ShellContent Icon="{DynamicResource FontIconUser}"
+        <Tab Icon="{DynamicResource FontIconUser}"
-                      Title="{r:Text Follow}"
+             Title="{r:Text Follow}"
-                      ContentTemplate="{DataTemplate i:MainPage}"
+             Route="{x:Static util:Routes.Follow}">
-                      Route="{x:Static util:Routes.Follow}"/>
+            <ShellContent ContentTemplate="{DataTemplate i:MainPage}"/>
-        <ShellContent Icon="{DynamicResource FontIconSparkles}"
+        </Tab>
-                      Title="{r:Text News}"
+        <Tab Icon="{DynamicResource FontIconSparkles}"
-                      ContentTemplate="{DataTemplate i:NewsPage}"
+             Title="{r:Text Recommends}">
-                      Route="{x:Static util:Routes.News}"/>
+            <ShellContent Title="{r:Text Recommends}"
-        <ShellContent Icon="{DynamicResource FontIconOrder}"
+                          ContentTemplate="{DataTemplate i:RecommendsPage}"
-                      Title="{r:Text Ranking}"
+                          Route="{x:Static util:Routes.Recommends}"/>
-                      ContentTemplate="{DataTemplate i:RankingPage}"
+            <ShellContent Title="{r:Text ByUser}"
-                      Route="{x:Static util:Routes.Ranking}"/>
+                          Route="{x:Static util:Routes.ByUser}">
+                <ShellContent.ContentTemplate>
+                    <DataTemplate>
+                        <i:RecommendsPage ByUser="True"/>
+                    </DataTemplate>
+                </ShellContent.ContentTemplate>
+            </ShellContent>
+        </Tab>
+        <Tab Icon="{DynamicResource FontIconOrder}"
+             Title="{r:Text Ranking}"
+             Route="{x:Static util:Routes.Ranking}">
+            <ShellContent ContentTemplate="{DataTemplate i:RankingPage}"/>
+        </Tab>
+    </FlyoutItem>
+    <FlyoutItem Icon="{DynamicResource FontIconOption}"
+                Title="{r:Text Option}"
+                Route="{x:Static util:Routes.Option}">
+        <Tab>
+            <ShellContent ContentTemplate="{DataTemplate p:OptionPage}"/>
+        </Tab>
     </FlyoutItem>
-    <ShellContent Icon="{DynamicResource FontIconOption}"
-                  Title="{r:Text Option}"
-                  ContentTemplate="{DataTemplate p:OptionPage}"
-                  Route="{x:Static util:Routes.Option}"/>
 </Shell>

Pixiview/Illust/MainPage.xaml

@@ -7,7 +7,6 @@
                         xmlns:r="clr-namespace:Pixiview.Resources"
                         x:Class="Pixiview.Illust.MainPage"
                         util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
-                        Shell.NavBarHasShadow="True"
                         BackgroundColor="{DynamicResource WindowColor}"
                         Title="{r:Text Follow}">
     <ContentPage.ToolbarItems>

Pixiview/Illust/RankingPage.xaml

@@ -6,7 +6,6 @@
                         xmlns:util="clr-namespace:Pixiview.Utils"
                         x:Class="Pixiview.Illust.RankingPage"
                         util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
-                        Shell.NavBarHasShadow="True"
                         BackgroundColor="{DynamicResource WindowColor}">
     <Grid>
         <ScrollView HorizontalOptions="Fill">

Pixiview/Illust/RecommendsPage.xaml

@@ -5,11 +5,10 @@
                         xmlns:u="clr-namespace:Pixiview.UI"
                         xmlns:util="clr-namespace:Pixiview.Utils"
                         xmlns:r="clr-namespace:Pixiview.Resources"
-                        x:Class="Pixiview.Illust.NewsPage"
+                        x:Class="Pixiview.Illust.RecommendsPage"
                         util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
-                        Shell.NavBarHasShadow="True"
                         BackgroundColor="{DynamicResource WindowColor}"
-                        Title="{r:Text News}">
+                        Title="{r:Text Recommends}">
     <Grid>
         <ScrollView HorizontalOptions="Fill">
             <u:FlowLayout ItemsSource="{Binding Illusts}"

Pixiview/Illust/RecommendsPage.xaml.cs

@@ -1,11 +1,14 @@
 using System.Collections.Generic;
+using System.Linq;
 using Pixiview.Utils;
 
 namespace Pixiview.Illust
 {
-    public partial class NewsPage : IllustCollectionPage
+    public partial class RecommendsPage : IllustCollectionPage
     {
-        public NewsPage()
+        public bool ByUser { get; set; }
+
+        public RecommendsPage()
         {
             Resources.Add("cardView", GetCardViewTemplate());
             InitializeComponent();
@@ -15,7 +18,14 @@ namespace Pixiview.Illust
 
         protected override IEnumerable<string> DoGetIllustList(IllustData data)
         {
-            return data.body.page.newPost;
+            if (ByUser)
+            {
+                return data.body.page.recommendUser.SelectMany(i => i.illustIds);
+            }
+            else
+            {
+                return data.body.page.recommend;
+            }
         }
 
         protected override IllustData DoLoadIllustData(bool force)

Pixiview/Illust/ViewIllustPage.xaml

@@ -9,7 +9,6 @@
                util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
                ios:Page.UseSafeArea="False"
                Shell.TabBarIsVisible="False"
-               Shell.NavBarHasShadow="True"
                BackgroundColor="{DynamicResource WindowColor}"
                Title="{Binding IllustItem.Title}">
     <ContentPage.ToolbarItems>

Pixiview/OptionPage.xaml

@@ -5,7 +5,6 @@
                xmlns:util="clr-namespace:Pixiview.Utils"
                x:Class="Pixiview.OptionPage"
                util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
-               Shell.NavBarHasShadow="True"
                BackgroundColor="{DynamicResource WindowColor}">
     <ContentPage.Content>
         <Label Text="Option" Margin="20"/>

Pixiview/Resources/Languages/zh-CN.xml

@@ -4,8 +4,10 @@
     <Ok>OK</Ok>
     <R18>R-18</R18>
     <Follow>已关注</Follow>
-    <News>最新</News>
+    <Recommends>推荐</Recommends>
+    <ByUser>按用户</ByUser>
     <Ranking>排行榜</Ranking>
+    <Option>选项</Option>
     <Preview>预览</Preview>
     <SaveSuccess>成功保存图片到照片库。</SaveSuccess>
 </root>

Pixiview/UI/AdaptedPage.cs

@@ -11,6 +11,11 @@ namespace Pixiview.UI
         public event EventHandler Unload;
         public event EventHandler<OrientationEventArgs> OrientationChanged;
 
+        public AdaptedPage()
+        {
+            Shell.SetNavBarHasShadow(this, true);
+        }
+
         public virtual void OnLoad()
         {
             Load?.Invoke(this, EventArgs.Empty);

Pixiview/UI/Theme/DarkTheme.cs

@@ -36,7 +36,7 @@ namespace Pixiview.UI.Theme
             Add(SubColor, Color.FromRgb(0x33, 0x33, 0x33));
             Add(MaskColor, Color.FromRgba(0xff, 0xff, 0xff, 0x50));
             Add(NavColor, Color.Black);
-            Add(SubNavColor, Color.FromRgb(0x22, 0x22, 0x22));
+            Add(NavSelectedColor, Color.FromRgb(0x22, 0x22, 0x22));
         }
     }
 }

Pixiview/UI/Theme/LightTheme.cs

@@ -36,7 +36,7 @@ namespace Pixiview.UI.Theme
             Add(SubColor, Color.FromRgb(0xf0, 0xf0, 0xf0));     // Color.FromRgb(0xfa, 0xfa, 0xf0)
             Add(MaskColor, Color.FromRgba(0, 0, 0, 0x50));
             Add(NavColor, Color.FromRgb(0xee, 0xee, 0xee));
-            Add(SubNavColor, Color.White);
+            Add(NavSelectedColor, Color.LightGray);
         }
     }
 }

Pixiview/UI/Theme/ThemeBase.cs

@@ -22,7 +22,7 @@ namespace Pixiview.UI.Theme
         public const string SubColor = nameof(SubColor);
         public const string MaskColor = nameof(MaskColor);
         public const string NavColor = nameof(NavColor);
-        public const string SubNavColor = nameof(SubNavColor);
+        public const string NavSelectedColor = nameof(NavSelectedColor);
 
         public const string IconLightFontFamily = nameof(IconLightFontFamily);
         public const string IconRegularFontFamily = nameof(IconRegularFontFamily);
@@ -55,7 +55,8 @@ namespace Pixiview.UI.Theme
                 }
             }
 
-            var mainColor = this[MainTextColor];
+            var mainColor = (Color)this[MainTextColor];
+            var solidFontFamily = (string)this[IconSolidFontFamily];
 
             Add(TitleLabel, new Style(typeof(Label))
             {
@@ -75,28 +76,29 @@ namespace Pixiview.UI.Theme
                 {
                     new Setter { Property = Button.BorderWidthProperty, Value = 0.0 },
                     new Setter { Property = VisualElement.BackgroundColorProperty, Value = Color.Transparent },
-                    new Setter { Property = Button.FontFamilyProperty, Value = (string)this[IconSolidFontFamily] },
+                    new Setter { Property = Button.FontFamilyProperty, Value = solidFontFamily },
                     new Setter { Property = Button.FontSizeProperty, Value = StyleDefinition.FontSizeTitleIcon },
                     new Setter { Property = Button.TextColorProperty, Value = mainColor }
                 }
             });
 
 
-            Add(FontIconUser, GetSolidIcon(StyleDefinition.IconUser));
+            Add(FontIconUser, GetSolidIcon(StyleDefinition.IconUser, solidFontFamily, mainColor));
-            Add(FontIconSparkles, GetSolidIcon(StyleDefinition.IconSparkles));
+            Add(FontIconSparkles, GetSolidIcon(StyleDefinition.IconSparkles, solidFontFamily, mainColor));
-            Add(FontIconOrder, GetSolidIcon(StyleDefinition.IconOrder));
+            Add(FontIconOrder, GetSolidIcon(StyleDefinition.IconOrder, solidFontFamily, mainColor));
-            Add(FontIconRefresh, GetSolidIcon(StyleDefinition.IconRefresh));
+            Add(FontIconRefresh, GetSolidIcon(StyleDefinition.IconRefresh, solidFontFamily, mainColor));
-            Add(FontIconOption, GetSolidIcon(StyleDefinition.IconOption));
+            Add(FontIconOption, GetSolidIcon(StyleDefinition.IconOption, solidFontFamily, mainColor));
-            Add(FontIconDownload, GetSolidIcon(StyleDefinition.IconDownload));
+            Add(FontIconDownload, GetSolidIcon(StyleDefinition.IconDownload, solidFontFamily, mainColor));
         }
 
-        private FontImageSource GetSolidIcon(string icon)
+        private FontImageSource GetSolidIcon(string icon, string family, Color color)
         {
             return new FontImageSource
             {
-                FontFamily = (string)this[IconSolidFontFamily],
+                FontFamily = family,
                 Glyph = icon,
-                Size = StyleDefinition.FontSizeTitle
+                Size = StyleDefinition.FontSizeTitle,
+                Color = color
             };
         }
     }

Pixiview/Utils/Converters.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Globalization;
 using Pixiview.UI;
+using Pixiview.UI.Theme;
 using Xamarin.Forms;
 
 namespace Pixiview.Utils

Pixiview/Utils/IEnvironmentService.cs

@@ -8,6 +8,7 @@ namespace Pixiview.Utils
         EnvironmentParameter GetEnvironment();
 
         Theme GetApplicationTheme();
+        void SetStatusBarStyle(StatusBarStyles style);
         void SetStatusBarColor(Color color);
 
         CultureInfo GetCurrentCultureInfo();

Pixiview/Utils/Stores.cs

@@ -303,7 +303,8 @@ namespace Pixiview.Utils
         public const string Illust = "illust";
         public const string Detail = "detail";
         public const string Follow = "follow";
-        public const string News = "news";
+        public const string Recommends = "recommends";
+        public const string ByUser = "byuser";
         public const string Ranking = "ranking";
         public const string Option = "option";
     }