update folder structure

Pixiview.iOS/Pixiview.iOS.csproj

@@ -76,6 +76,7 @@
     <Compile Include="Renderers\RoundImageRenderer.cs" />
     <Compile Include="GlobalSuppressions.cs" />
     <Compile Include="Services\FileStore.cs" />
+    <Compile Include="Renderers\AppShellRenderer.cs" />
   </ItemGroup>
   <ItemGroup>
     <InterfaceDefinition Include="Resources\LaunchScreen.storyboard" />
@@ -149,5 +150,6 @@
     <BundleResource Include="Resources\fa-light-300.ttf" />
     <BundleResource Include="Resources\fa-regular-400.ttf" />
     <BundleResource Include="Resources\fa-solid-900.ttf" />
+    <BundleResource Include="Resources\userprofile.jpg" />
   </ItemGroup>
 </Project>

Pixiview.iOS/Renderers/AdaptedPageRenderer.cs

@@ -39,8 +39,6 @@ namespace Pixiview.iOS.Renderers
             base.Dispose(disposing);
         }
 
-        public override bool PrefersHomeIndicatorAutoHidden => Screen.GetHomeIndicatorAutoHidden(Element);
-
         public override void ViewDidAppear(bool animated)
         {
             base.ViewDidAppear(animated);

Pixiview.iOS/Renderers/AppShellRenderer.cs

@@ -0,0 +1,26 @@
+using Pixiview.iOS.Renderers;
+using Pixiview.Utils;
+using UIKit;
+using Xamarin.Forms;
+using Xamarin.Forms.Platform.iOS;
+
+[assembly: ExportRenderer(typeof(Shell), typeof(AppShellRenderer))]
+namespace Pixiview.iOS.Renderers
+{
+    public class AppShellRenderer : ShellRenderer
+    {
+        public override bool PrefersHomeIndicatorAutoHidden => Screen.GetHomeIndicatorAutoHidden(Element);
+
+        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
+        {
+            var renderer = base.CreateShellSectionRenderer(shellSection);
+            if (renderer is ShellSectionRenderer sr && Element is AppShell shell)
+            {
+                shell.SetNavigationBarHeight(
+                    sr.NavigationBar.Frame.Height,
+                    UIApplication.SharedApplication.StatusBarFrame.Height);
+            }
+            return renderer;
+        }
+    }
+}

Pixiview/AppShell.xaml

@@ -2,22 +2,42 @@
 <Shell xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:p="clr-namespace:Pixiview"
+       xmlns:i="clr-namespace:Pixiview.Illust"
        xmlns:r="clr-namespace:Pixiview.Resources"
+       xmlns:u="clr-namespace:Pixiview.UI"
        x:Class="Pixiview.AppShell"
        ForegroundColor="{DynamicResource MainTextColor}"
        TitleColor="{DynamicResource MainTextColor}">
-    <TabBar>
+    <Shell.FlyoutHeaderTemplate>
-        <Tab Title="{r:Text Follow}"
+        <DataTemplate>
-             Icon="{DynamicResource FontIconUser}">
+            <Grid RowSpacing="0" BackgroundColor="{DynamicResource WindowColor}" Padding="20, 0, 0, 20">
-            <ShellContent ContentTemplate="{DataTemplate p:MainPage}"/>
+                <Grid.RowDefinitions>
-        </Tab>
+                    <RowDefinition Height="80"/>
-        <Tab Title="{r:Text News}"
+                    <RowDefinition Height="25"/>
-             Icon="{DynamicResource FontIconSparkles}">
+                    <RowDefinition Height="20"/>
-            <ShellContent ContentTemplate="{DataTemplate p:NewsPage}"/>
+                </Grid.RowDefinitions>
-        </Tab>
+                <u:CircleImage Aspect="AspectFill" Source="userprofile.jpg"
-        <Tab Title="{r:Text Ranking}"
+                               HeightRequest="60" WidthRequest="60"
-             Icon="{DynamicResource FontIconOrder}">
+                               VerticalOptions="End" HorizontalOptions="Start"/>
-            <ShellContent ContentTemplate="{DataTemplate p:RankingPage}"/>
+                <Label Grid.Row="1" VerticalOptions="End" FontAttributes="Bold"
-        </Tab>
+                       Text="Tsanie" TextColor="{DynamicResource TextColor}"/>
-    </TabBar>
+                <Label Grid.Row="2" VerticalOptions="Center" FontSize="Small"
+                       Text="@tsanie" TextColor="{DynamicResource SubTextColor}"/>
+            </Grid>
+        </DataTemplate>
+    </Shell.FlyoutHeaderTemplate>
+    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
+        <ShellContent Icon="{DynamicResource FontIconUser}"
+                      Title="{r:Text Follow}"
+                      ContentTemplate="{DataTemplate i:MainPage}"/>
+        <ShellContent Icon="{DynamicResource FontIconSparkles}"
+                      Title="{r:Text News}"
+                      ContentTemplate="{DataTemplate i:NewsPage}"/>
+        <ShellContent Icon="{DynamicResource FontIconOrder}"
+                      Title="{r:Text Ranking}"
+                      ContentTemplate="{DataTemplate i:RankingPage}"/>
+    </FlyoutItem>
+    <ShellContent Icon="{DynamicResource FontIconOption}"
+                  Title="{r:Text Option}"
+                  ContentTemplate="{DataTemplate p:OptionPage}"/>
 </Shell>

Pixiview/AppShell.xaml.cs

@@ -1,12 +1,38 @@
-using Xamarin.Forms;
+using System;
+using Xamarin.Forms;
 
 namespace Pixiview
 {
     public partial class AppShell : Shell
     {
+        public static new AppShell Current => Shell.Current as AppShell;
+
+        public static Thickness NavigationBarOffset { get; private set; }
+        public static Thickness TotalBarOffset { get; private set; }
+
+        public event EventHandler<BarHeightEventArgs> NavigationBarHeightChanged;
+
         public AppShell()
         {
             InitializeComponent();
         }
+
+        public void SetNavigationBarHeight(double height, double statusHeight)
+        {
+            NavigationBarOffset = new Thickness(0, height, 0, 0);
+            TotalBarOffset = new Thickness(0, height + statusHeight, 0, 0);
+
+            NavigationBarHeightChanged?.Invoke(this, new BarHeightEventArgs
+            {
+                NavigationBarHeight = height,
+                StatusBarHeight = statusHeight
+            });
+        }
+    }
+
+    public class BarHeightEventArgs : EventArgs
+    {
+        public double NavigationBarHeight { get; set; }
+        public double StatusBarHeight { get; set; }
     }
 }

Pixiview/Illust/MainPage.xaml

@@ -3,12 +3,12 @@
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-               xmlns:p="clr-namespace:Pixiview"
+               xmlns:mdl="clr-namespace:Pixiview.Illust"
                xmlns:u="clr-namespace:Pixiview.UI"
                xmlns:util="clr-namespace:Pixiview.Utils"
                xmlns:r="clr-namespace:Pixiview.Resources"
                mc:Ignorable="d"
-               x:Class="Pixiview.MainPage"
+               x:Class="Pixiview.Illust.MainPage"
                util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
                Shell.NavBarHasShadow="True"
                BackgroundColor="{DynamicResource WindowColor}"
@@ -19,12 +19,12 @@
                      IconImageSource="{DynamicResource FontIconRefresh}"/>
     </ContentPage.ToolbarItems>
     <Grid>
-        <ScrollView HorizontalOptions="Fill" Padding="{Binding StatusBarPadding}">
+        <ScrollView HorizontalOptions="Fill">
             <u:FlowLayout ItemsSource="{Binding Illusts}"
                           HorizontalOptions="Fill" Column="{Binding Columns}"
                           Margin="16" RowSpacing="16" ColumnSpacing="16">
                 <u:FlowLayout.ItemTemplate>
-                    <DataTemplate x:DataType="p:IllustItem">
+                    <DataTemplate x:DataType="mdl:IllustItem">
                         <u:CardView Padding="0" Margin="0" CornerRadius="10"
                                     ShadowColor="#20000000"
                                     ShadowOffset="2, 2"
@@ -78,8 +78,12 @@
                 </u:FlowLayout.ItemTemplate>
             </u:FlowLayout>
         </ScrollView>
-        <ActivityIndicator IsRunning="True" IsEnabled="True" IsVisible="{Binding Loading}"
+        <Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
-                           Margin="120" Color="{DynamicResource TextColor}"
+               IsVisible="{Binding Loading}"
-                           HorizontalOptions="Center" VerticalOptions="Start"/>
+               HorizontalOptions="Center" VerticalOptions="Center"
+               BackgroundColor="{DynamicResource MaskColor}">
+            <ActivityIndicator IsRunning="True" IsVisible="True"
+                               Color="{DynamicResource WindowColor}"/>
+        </Frame>
     </Grid>
 </u:AdaptedPage>

Pixiview/Illust/MainPage.xaml.cs

@@ -10,7 +10,7 @@ using Pixiview.Utils;
 using Xamarin.Essentials;
 using Xamarin.Forms;
 
-namespace Pixiview
+namespace Pixiview.Illust
 {
     // Learn more about making custom code visible in the Xamarin.Forms previewer
     // by visiting https://aka.ms/xamarinforms-previewer

Pixiview/Illust/NewsPage.xaml

@@ -1,5 +1,5 @@
 <?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 xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Pixiview.Illust.NewsPage">
     <ContentPage.Content>
         <Label Text="News" HorizontalOptions="Center" VerticalOptions="Center"/>
     </ContentPage.Content>

Pixiview/Illust/NewsPage.xaml.cs

@@ -3,7 +3,7 @@ using System.Collections.Generic;
 
 using Xamarin.Forms;
 
-namespace Pixiview
+namespace Pixiview.Illust
 {
     public partial class NewsPage : ContentPage
     {

Pixiview/Illust/RankingPage.xaml

@@ -1,5 +1,5 @@
 <?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 xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Pixiview.Illust.RankingPage">
     <ContentPage.Content>
         <Label Text="Ranking #100" HorizontalOptions="Center" VerticalOptions="Center"/>
     </ContentPage.Content>

Pixiview/Illust/RankingPage.xaml.cs

@@ -3,7 +3,7 @@ using System.Collections.Generic;
 
 using Xamarin.Forms;
 
-namespace Pixiview
+namespace Pixiview.Illust
 {
     public partial class RankingPage : ContentPage
     {

Pixiview/Illust/ViewIllustPage.xaml

@@ -1,26 +1,29 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <u:AdaptedPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-               xmlns:p="clr-namespace:Pixiview"
+               xmlns:mdl="clr-namespace:Pixiview.Illust"
                xmlns:u="clr-namespace:Pixiview.UI"
                xmlns:util="clr-namespace:Pixiview.Utils"
-               x:Class="Pixiview.ViewIllustPage"
+               xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
+               x:Class="Pixiview.Illust.ViewIllustPage"
                util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
-               util:Screen.HomeIndicatorAutoHidden="True"
+               ios:Page.UseSafeArea="False"
+               Shell.TabBarIsVisible="False"
+               Shell.NavBarHasShadow="True"
                BackgroundColor="{DynamicResource WindowColor}"
                Title="{Binding IllustItem.Title}">
     <ContentPage.ToolbarItems>
         <ToolbarItem Order="Primary" Clicked="Download_Clicked"
                      IconImageSource="{DynamicResource FontIconDownload}"/>
     </ContentPage.ToolbarItems>
-    <Grid>
+    <Grid Padding="{Binding PageTopMargin}">
         <CarouselView ItemsSource="{Binding Illusts}" HorizontalScrollBarVisibility="Never"
                       PositionChanged="CarouselView_PositionChanged">
             <CarouselView.ItemsLayout>
                 <LinearItemsLayout Orientation="Horizontal" ItemSpacing="20"/>
             </CarouselView.ItemsLayout>
             <CarouselView.ItemTemplate>
-                <DataTemplate x:DataType="p:IllustDetailItem">
+                <DataTemplate x:DataType="mdl:IllustDetailItem">
                     <Grid>
                         <Image Source="{Binding Image}"
                                HorizontalOptions="Fill" VerticalOptions="Fill"
@@ -28,11 +31,11 @@
                         <Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
                                IsVisible="{Binding Loading}"
                                HorizontalOptions="Center" VerticalOptions="Center"
-                               BackgroundColor="#50000000">
+                               BackgroundColor="{DynamicResource MaskColor}">
-                            <ActivityIndicator IsRunning="True" IsEnabled="True" IsVisible="True"
+                            <ActivityIndicator IsRunning="True" IsVisible="True"
-                                               Color="White"/>
+                                               Color="{DynamicResource WindowColor}"/>
                         </Frame>
-                        <ActivityIndicator IsRunning="True" IsEnabled="True" IsVisible="{Binding Downloading}"
+                        <ActivityIndicator IsRunning="True" IsVisible="{Binding Downloading}"
                                            Margin="10"
                                            HorizontalOptions="Start" VerticalOptions="Start"
                                            Color="{DynamicResource TextColor}"/>

Pixiview/Illust/ViewIllustPage.xaml.cs

@@ -6,7 +6,7 @@ using Pixiview.Utils;
 using Xamarin.Essentials;
 using Xamarin.Forms;
 
-namespace Pixiview
+namespace Pixiview.Illust
 {
     public partial class ViewIllustPage : AdaptedPage
     {
@@ -18,6 +18,8 @@ namespace Pixiview
             nameof(IsPageVisible), typeof(bool), typeof(ViewIllustPage));
         public static readonly BindableProperty IllustItemProperty = BindableProperty.Create(
             nameof(IllustItem), typeof(IllustItem), typeof(ViewIllustPage));
+        public static readonly BindableProperty PageTopMarginProperty = BindableProperty.Create(
+            nameof(PageTopMargin), typeof(Thickness), typeof(ViewIllustPage));
 
         public IllustDetailItem[] Illusts
         {
@@ -39,6 +41,11 @@ namespace Pixiview
             get => (IllustItem)GetValue(IllustItemProperty);
             private set => SetValue(IllustItemProperty, value);
         }
+        public Thickness PageTopMargin
+        {
+            get => (Thickness)GetValue(PageTopMarginProperty);
+            private set => SetValue(PageTopMarginProperty, value);
+        }
 
         public int CurrentPage { get; private set; }
 
@@ -79,9 +86,48 @@ namespace Pixiview
             }
 
             Illusts = items;
+            OnOrientationChanged(CurrentOrientation);
             Task.Run(DoLoadImages);
         }
 
+        public override void OnOrientationChanged(Orientation orientation)
+        {
+            switch (orientation)
+            {
+                case Orientation.Portrait:
+                    PageTopMargin = AppShell.TotalBarOffset;
+                    break;
+                case Orientation.PortraitUpsideDown:
+                    if (DeviceInfo.Idiom == DeviceIdiom.Phone)
+                    {
+                        PageTopMargin = AppShell.NavigationBarOffset;
+                    }
+                    else
+                    {
+                        PageTopMargin = AppShell.TotalBarOffset;
+                    }
+                    break;
+                case Orientation.Unknown:
+                case Orientation.LandscapeLeft:
+                case Orientation.LandscapeRight:
+                default:
+                    PageTopMargin = AppShell.NavigationBarOffset;
+                    break;
+            }
+        }
+
+        protected override void OnAppearing()
+        {
+            base.OnAppearing();
+            Screen.SetHomeIndicatorAutoHidden(Shell.Current, true);
+        }
+
+        protected override void OnDisappearing()
+        {
+            base.OnDisappearing();
+            Screen.SetHomeIndicatorAutoHidden(Shell.Current, false);
+        }
+
         private void CarouselView_PositionChanged(object sender, PositionChangedEventArgs e)
         {
             var index = e.CurrentPosition;

Pixiview/OptionPage.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.OptionPage">
+    <ContentPage.Content>
+        <Label Text="Option"/>
+    </ContentPage.Content>
+</ContentPage>

Pixiview/OptionPage.xaml.cs

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

Pixiview/Pixiview.csproj

@@ -21,6 +21,7 @@
     <Folder Include="UI\Theme\" />
     <Folder Include="Resources\" />
     <Folder Include="Resources\Languages\" />
+    <Folder Include="Illust\" />
   </ItemGroup>
   <ItemGroup>
     <None Remove="Resources\Languages\zh-CN.xml" />

Pixiview/UI/AdaptedPage.cs

@@ -5,18 +5,6 @@ namespace Pixiview.UI
 {
     public class AdaptedPage : ContentPage
     {
-        static readonly Thickness LandscapeLeftPadding = new Thickness(34, 0, 0, 0);
-        static readonly Thickness LandscapeRightPadding = new Thickness(0, 0, 34, 0);
-
-        public static readonly BindableProperty StatusBarPaddingProperty = BindableProperty.Create(
-            nameof(StatusBarPadding), typeof(Thickness), typeof(AdaptedPage), default(Thickness));
-
-        public Thickness StatusBarPadding
-        {
-            get => (Thickness)GetValue(StatusBarPaddingProperty);
-            set => SetValue(StatusBarPaddingProperty, value);
-        }
-
         public Orientation CurrentOrientation { get; private set; }
 
         public event EventHandler Load;
@@ -35,19 +23,6 @@ namespace Pixiview.UI
 
         public virtual void OnOrientationChanged(Orientation orientation)
         {
-            if (orientation == Orientation.LandscapeLeft || orientation == Orientation.PortraitUpsideDown)
-            {
-                StatusBarPadding = StyleDefinition.IsFullscreenDevice ? LandscapeLeftPadding : default;
-            }
-            else if (orientation == Orientation.LandscapeRight)
-            {
-                StatusBarPadding = StyleDefinition.IsFullscreenDevice ? LandscapeRightPadding : default;
-            }
-            else
-            {
-                StatusBarPadding = default;
-            }
-
             OrientationChanged?.Invoke(this, new OrientationEventArgs { CurrentOrientation = orientation });
         }
 

Pixiview/UI/CardView.cs

@@ -1,4 +1,5 @@
-using Xamarin.Forms;
+using Pixiview.Illust;
+using Xamarin.Forms;
 
 namespace Pixiview.UI
 {

Pixiview/UI/Theme/DarkTheme.cs

@@ -35,6 +35,8 @@ namespace Pixiview.UI.Theme
             Add(MainTextColor, Color.White);
             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));
         }
     }
 }

Pixiview/UI/Theme/LightTheme.cs

@@ -35,6 +35,8 @@ namespace Pixiview.UI.Theme
             Add(MainTextColor, Color.Black);
             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);
         }
     }
 }

Pixiview/UI/Theme/ThemeBase.cs

@@ -21,6 +21,8 @@ namespace Pixiview.UI.Theme
         public const string MainTextColor = nameof(MainTextColor);
         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 IconLightFontFamily = nameof(IconLightFontFamily);
         public const string IconRegularFontFamily = nameof(IconRegularFontFamily);

Pixiview/Utils/Extensions.cs

@@ -12,16 +12,14 @@ namespace Pixiview.Utils
             typeof(StatusBarStyles),
             typeof(Page),
             StatusBarStyles.WhiteText);
+        public static StatusBarStyles GetStatusBarStyle(VisualElement page) => (StatusBarStyles)page.GetValue(StatusBarStyleProperty);
+        public static void SetStatusBarStyle(VisualElement page, StatusBarStyles value) => page.SetValue(StatusBarStyleProperty, value);
 
         public static readonly BindableProperty HomeIndicatorAutoHiddenProperty = BindableProperty.CreateAttached(
             HomeIndicatorAutoHidden,
             typeof(bool),
-            typeof(Page),
+            typeof(Shell),
             false);
-
-        public static StatusBarStyles GetStatusBarStyle(VisualElement page) => (StatusBarStyles)page.GetValue(StatusBarStyleProperty);
-        public static void SetStatusBarStyle(VisualElement page, StatusBarStyles value) => page.SetValue(StatusBarStyleProperty, value);
-
         public static bool GetHomeIndicatorAutoHidden(VisualElement page) => (bool)page.GetValue(HomeIndicatorAutoHiddenProperty);
         public static void SetHomeIndicatorAutoHidden(VisualElement page, bool value) => page.SetValue(HomeIndicatorAutoHiddenProperty, value);
     }