update app structure to Shell

Pixiview.iOS/Pixiview.iOS.csproj

@@ -75,7 +75,6 @@
     <Compile Include="Renderers\CardViewRenderer.cs" />
     <Compile Include="Renderers\RoundImageRenderer.cs" />
     <Compile Include="GlobalSuppressions.cs" />
-    <Compile Include="Renderers\AdaptedNavigationPageRenderer.cs" />
     <Compile Include="Services\FileStore.cs" />
   </ItemGroup>
   <ItemGroup>

Pixiview.iOS/Renderers/AdaptedNavigationPageRenderer.cs

@@ -1,26 +0,0 @@
-using Pixiview.iOS.Renderers;
-using Pixiview.UI;
-using UIKit;
-using Xamarin.Forms;
-using Xamarin.Forms.Platform.iOS;
-
-[assembly: ExportRenderer(typeof(AdaptedNavigationPage), typeof(AdaptedNavigationPageRenderer))]
-namespace Pixiview.iOS.Renderers
-{
-    public class AdaptedNavigationPageRenderer : NavigationRenderer
-    {
-        public override void WillMoveToParentViewController(UIViewController parent)
-        {
-            if (Element is AdaptedNavigationPage navigation)
-            {
-                NavigationBar.Translucent = true;
-
-                var barHeight = NavigationBar.Frame.Height;
-                var statusHeight = UIApplication.SharedApplication.StatusBarFrame.Height;
-                navigation.SetNavigationBarHeight(barHeight, statusHeight);
-            }
-
-            base.WillMoveToParentViewController(parent);
-        }
-    }
-}

Pixiview/App.cs

@@ -67,7 +67,7 @@ namespace Pixiview
         {
             var service = DependencyService.Get<IEnvironmentService>();
             InitLanguage(service);
-            MainPage = UIFactory.CreateNavigationPage(new MainPage());
+            MainPage = new AppShell();
 
             InitResources(service);
         }

Pixiview/AppShell.xaml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Shell xmlns="http://xamarin.com/schemas/2014/forms"
+       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+       xmlns:p="clr-namespace:Pixiview"
+       xmlns:r="clr-namespace:Pixiview.Resources"
+       x:Class="Pixiview.AppShell"
+       ForegroundColor="{DynamicResource MainTextColor}"
+       TitleColor="{DynamicResource MainTextColor}">
+    <TabBar>
+        <Tab Title="{r:Text Follow}"
+             Icon="{DynamicResource FontIconUser}">
+            <ShellContent ContentTemplate="{DataTemplate p:MainPage}"/>
+        </Tab>
+        <Tab Title="{r:Text News}"
+             Icon="{DynamicResource FontIconSparkles}">
+            <ShellContent ContentTemplate="{DataTemplate p:NewsPage}"/>
+        </Tab>
+        <Tab Title="{r:Text Ranking}"
+             Icon="{DynamicResource FontIconOrder}">
+            <ShellContent ContentTemplate="{DataTemplate p:RankingPage}"/>
+        </Tab>
+    </TabBar>
+</Shell>

Pixiview/AppShell.xaml.cs

@@ -0,0 +1,12 @@
+using Xamarin.Forms;
+
+namespace Pixiview
+{
+    public partial class AppShell : Shell
+    {
+        public AppShell()
+        {
+            InitializeComponent();
+        }
+    }
+}

Pixiview/MainPage.xaml

@@ -10,6 +10,7 @@
                mc:Ignorable="d"
                x:Class="Pixiview.MainPage"
                util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
+               Shell.NavBarHasShadow="True"
                BackgroundColor="{DynamicResource WindowColor}"
                Title="{r:Text Follow}"
                OrientationChanged="Page_OrientationChanged">

Pixiview/NewsPage.xaml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Pixiview.NewsPage">
+    <ContentPage.Content>
+        <Label Text="News" HorizontalOptions="Center" VerticalOptions="Center"/>
+    </ContentPage.Content>
+</ContentPage>

Pixiview/NewsPage.xaml.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+
+using Xamarin.Forms;
+
+namespace Pixiview
+{
+    public partial class NewsPage : ContentPage
+    {
+        public NewsPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

Pixiview/RankingPage.xaml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Pixiview.RankingPage">
+    <ContentPage.Content>
+        <Label Text="Ranking #100" HorizontalOptions="Center" VerticalOptions="Center"/>
+    </ContentPage.Content>
+</ContentPage>

Pixiview/RankingPage.xaml.cs

@@ -0,0 +1,15 @@
+using System;
+using System.Collections.Generic;
+
+using Xamarin.Forms;
+
+namespace Pixiview
+{
+    public partial class RankingPage : ContentPage
+    {
+        public RankingPage()
+        {
+            InitializeComponent();
+        }
+    }
+}

Pixiview/Resources/Languages/zh-CN.xml

@@ -3,6 +3,8 @@
     <Title>Pixiview</Title>
     <Ok>OK</Ok>
     <Follow>已关注</Follow>
+    <News>最新</News>
+    <Ranking>排行榜</Ranking>
     <Preview>预览</Preview>
     <SaveSuccess>成功保存图片到照片库。</SaveSuccess>
 </root>

Pixiview/UI/AdaptedNavigationPage.cs

@@ -1,16 +0,0 @@
-using Xamarin.Forms;
-
-namespace Pixiview.UI
-{
-    public class AdaptedNavigationPage : NavigationPage
-    {
-        public AdaptedNavigationPage(Page page) : base(page)
-        {
-        }
-
-        public void SetNavigationBarHeight(double barHeight, double statusHeight)
-        {
-            StyleDefinition.SetNavigationBarHeight(barHeight, statusHeight);
-        }
-    }
-}

Pixiview/UI/StyleDefinition.cs

@@ -15,10 +15,9 @@ namespace Pixiview.UI
         public static readonly Thickness LeftBottom10 = new Thickness(10, 0, 0, 10);
         public static readonly GridLength TitleIconWidth = 40;
 
-        public static Thickness NavigationBarOffset;
-        public static Thickness StatusBarOffset;
-        public static Thickness TotalBarOffset;
-
+        public const string IconUser = "\uf007";
+        public const string IconSparkles = "\uf890";
+        public const string IconOrder = "\uf88f";
         public const string IconLayer = "\uf302";
         public const string IconRefresh = "\uf2f1";
         public const string IconOption = "\uf013";
@@ -39,13 +38,6 @@ namespace Pixiview.UI
             }
         }
 
-        public static void SetNavigationBarHeight(double barHeight, double statusHeight)
-        {
-            NavigationBarOffset = new Thickness(0, barHeight, 0, 0);
-            StatusBarOffset = new Thickness(0, statusHeight, 0, 0);
-            TotalBarOffset = new Thickness(0, barHeight + statusHeight, 0, 0);
-        }
-
         private static bool? _isFullscreenDevice;
         public static bool IsFullscreenDevice
         {

Pixiview/UI/Theme/ThemeBase.cs

@@ -6,6 +6,9 @@ namespace Pixiview.UI.Theme
     {
         public const string TitleButton = nameof(TitleButton);
         public const string TitleLabel = nameof(TitleLabel);
+        public const string FontIconUser = nameof(FontIconUser);
+        public const string FontIconSparkles = nameof(FontIconSparkles);
+        public const string FontIconOrder = nameof(FontIconOrder);
         public const string FontIconRefresh = nameof(FontIconRefresh);
         public const string FontIconOption = nameof(FontIconOption);
         public const string FontIconDownload = nameof(FontIconDownload);
@@ -51,7 +54,6 @@ namespace Pixiview.UI.Theme
             }
 
             var mainColor = this[MainTextColor];
-            var iconSolidFontFamily = (string)this[IconSolidFontFamily];
 
             Add(TitleLabel, new Style(typeof(Label))
             {
@@ -71,30 +73,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 = iconSolidFontFamily },
+                    new Setter { Property = Button.FontFamilyProperty, Value = (string)this[IconSolidFontFamily] },
                     new Setter { Property = Button.FontSizeProperty, Value = StyleDefinition.FontSizeTitleIcon },
                     new Setter { Property = Button.TextColorProperty, Value = mainColor }
                 }
             });
 
-            Add(FontIconRefresh, new FontImageSource
+
+            Add(FontIconUser, GetSolidIcon(StyleDefinition.IconUser));
+            Add(FontIconSparkles, GetSolidIcon(StyleDefinition.IconSparkles));
+            Add(FontIconOrder, GetSolidIcon(StyleDefinition.IconOrder));
+            Add(FontIconRefresh, GetSolidIcon(StyleDefinition.IconRefresh));
+            Add(FontIconOption, GetSolidIcon(StyleDefinition.IconOption));
+            Add(FontIconDownload, GetSolidIcon(StyleDefinition.IconDownload));
+        }
+
+        private FontImageSource GetSolidIcon(string icon)
+        {
+            return new FontImageSource
             {
-                FontFamily = iconSolidFontFamily,
-                Glyph = StyleDefinition.IconRefresh,
+                FontFamily = (string)this[IconSolidFontFamily],
+                Glyph = icon,
                 Size = StyleDefinition.FontSizeTitle
-            });
-            Add(FontIconOption, new FontImageSource
-            {
-                FontFamily = iconSolidFontFamily,
-                Glyph = StyleDefinition.IconOption,
-                Size = StyleDefinition.FontSizeTitle
-            });
-            Add(FontIconDownload, new FontImageSource
-            {
-                FontFamily = iconSolidFontFamily,
-                Glyph = StyleDefinition.IconDownload,
-                Size = StyleDefinition.FontSizeTitle
-            });
+            };
         }
     }
 }

Pixiview/Utils/UIFactory.cs

@@ -1,18 +0,0 @@
-using Pixiview.UI;
-using Pixiview.UI.Theme;
-using Xamarin.Forms;
-
-namespace Pixiview.Utils
-{
-    public static class UIFactory
-    {
-        public static AdaptedNavigationPage CreateNavigationPage(Page root)
-        {
-            var navigation = new AdaptedNavigationPage(root);
-            //navigation.SetDynamicResource(NavigationPage.BarBackgroundColorProperty, ThemeBase.MainColor);
-            navigation.SetDynamicResource(NavigationPage.BarTextColorProperty, ThemeBase.MainTextColor);
-            navigation.SetDynamicResource(VisualElement.BackgroundColorProperty, ThemeBase.WindowColor);
-            return navigation;
-        }
-    }
-}

Pixiview/ViewIllustPage.xaml

@@ -4,18 +4,16 @@
                xmlns:p="clr-namespace:Pixiview"
                xmlns:u="clr-namespace:Pixiview.UI"
                xmlns:util="clr-namespace:Pixiview.Utils"
-               xmlns:r="clr-namespace:Pixiview.Resources"
                x:Class="Pixiview.ViewIllustPage"
                util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
                util:Screen.HomeIndicatorAutoHidden="True"
                BackgroundColor="{DynamicResource WindowColor}"
-               Title="{r:Text Preview}"
-               OrientationChanged="Page_OrientationChanged">
+               Title="{Binding IllustItem.Title}">
     <ContentPage.ToolbarItems>
         <ToolbarItem Order="Primary" Clicked="Download_Clicked"
                      IconImageSource="{DynamicResource FontIconDownload}"/>
     </ContentPage.ToolbarItems>
-    <Grid Margin="{Binding PageTopMargin}">
+    <Grid>
         <CarouselView ItemsSource="{Binding Illusts}" HorizontalScrollBarVisibility="Never"
                       PositionChanged="CarouselView_PositionChanged">
             <CarouselView.ItemsLayout>
@@ -27,8 +25,13 @@
                         <Image Source="{Binding Image}"
                                HorizontalOptions="Fill" VerticalOptions="Fill"
                                Aspect="AspectFit"/>
-                        <ActivityIndicator IsRunning="True" IsEnabled="True" IsVisible="{Binding Loading}"
-                                           Color="{DynamicResource TextColor}"/>
+                        <Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
+                               IsVisible="{Binding Loading}"
+                               HorizontalOptions="Center" VerticalOptions="Center"
+                               BackgroundColor="#50000000">
+                            <ActivityIndicator IsRunning="True" IsEnabled="True" IsVisible="True"
+                                               Color="White"/>
+                        </Frame>
                         <ActivityIndicator IsRunning="True" IsEnabled="True" IsVisible="{Binding Downloading}"
                                            Margin="10"
                                            HorizontalOptions="Start" VerticalOptions="Start"

Pixiview/ViewIllustPage.xaml.cs

@@ -16,8 +16,6 @@ namespace Pixiview
             nameof(PagePositionText), typeof(string), typeof(ViewIllustPage));
         public static readonly BindableProperty IsPageVisibleProperty = BindableProperty.Create(
             nameof(IsPageVisible), typeof(bool), typeof(ViewIllustPage));
-        public static readonly BindableProperty PageTopMarginProperty = BindableProperty.Create(
-            nameof(PageTopMargin), typeof(Thickness), typeof(ViewIllustPage));
         public static readonly BindableProperty IllustItemProperty = BindableProperty.Create(
             nameof(IllustItem), typeof(IllustItem), typeof(ViewIllustPage));
 
@@ -36,11 +34,6 @@ namespace Pixiview
             get => (bool)GetValue(IsPageVisibleProperty);
             set => SetValue(IsPageVisibleProperty, value);
         }
-        public Thickness PageTopMargin
-        {
-            get => (Thickness)GetValue(PageTopMarginProperty);
-            set => SetValue(PageTopMarginProperty, value);
-        }
         public IllustItem IllustItem
         {
             get => (IllustItem)GetValue(IllustItemProperty);
@@ -86,7 +79,6 @@ namespace Pixiview
             }
 
             Illusts = items;
-            UpdatePageTopMargin(CurrentOrientation);
             Task.Run(DoLoadImages);
         }
 
@@ -113,37 +105,6 @@ namespace Pixiview
             }
         }
 
-        private void Page_OrientationChanged(object sender, OrientationEventArgs e)
-        {
-            UpdatePageTopMargin(e.CurrentOrientation);
-        }
-
-        private void UpdatePageTopMargin(Orientation orientation)
-        {
-            switch (orientation)
-            {
-                case Orientation.Portrait:
-                    PageTopMargin = StyleDefinition.TotalBarOffset;
-                    break;
-                case Orientation.PortraitUpsideDown:
-                    if (DeviceInfo.Idiom == DeviceIdiom.Phone)
-                    {
-                        PageTopMargin = StyleDefinition.NavigationBarOffset;
-                    }
-                    else
-                    {
-                        PageTopMargin = StyleDefinition.TotalBarOffset;
-                    }
-                    break;
-                case Orientation.Unknown:
-                case Orientation.LandscapeLeft:
-                case Orientation.LandscapeRight:
-                default:
-                    PageTopMargin = StyleDefinition.NavigationBarOffset;
-                    break;
-            }
-        }
-
         private void DoLoadImages()
         {
             var pages = Stores.LoadIllustPageData(IllustItem.Id);