add news/ranking pages

Pixiview.iOS/Renderers/AppShellRenderer.cs

@@ -1,4 +1,5 @@
-using Pixiview.iOS.Renderers;
+using System.Threading.Tasks;
+using Pixiview.iOS.Renderers;
 using Pixiview.Utils;
 using UIKit;
 using Xamarin.Forms;
@@ -22,5 +23,28 @@ namespace Pixiview.iOS.Renderers
             }
             return renderer;
         }
+
+        protected override IShellItemTransition CreateShellItemTransition()
+        {
+            return new AppShellItemTransition();
+        }
+    }
+
+    public class AppShellItemTransition : IShellItemTransition
+    {
+        [System.Diagnostics.CodeAnalysis.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>();
+            var oldView = oldRenderer.ViewController.View;
+            var newView = newRenderer.ViewController.View;
+            newView.Alpha = 0;
+
+            newView.Superview.InsertSubviewAbove(newView, oldView);
+
+            UIView.Animate(0.2, 0, UIViewAnimationOptions.BeginFromCurrentState, () => newView.Alpha = 1, () => task.TrySetResult(true));
+
+            return task.Task;
+        }
     }
 }

Pixiview/AppShell.xaml

@@ -5,6 +5,7 @@
        xmlns:i="clr-namespace:Pixiview.Illust"
        xmlns:r="clr-namespace:Pixiview.Resources"
        xmlns:u="clr-namespace:Pixiview.UI"
+       xmlns:util="clr-namespace:Pixiview.Utils"
        x:Class="Pixiview.AppShell"
        ForegroundColor="{DynamicResource MainTextColor}"
        TitleColor="{DynamicResource MainTextColor}">
@@ -26,18 +27,23 @@
             </Grid>
         </DataTemplate>
     </Shell.FlyoutHeaderTemplate>
-    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
+    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems"
+                Route="{x:Static util:Routes.Illust}">
         <ShellContent Icon="{DynamicResource FontIconUser}"
                       Title="{r:Text Follow}"
-                      ContentTemplate="{DataTemplate i:MainPage}"/>
+                      ContentTemplate="{DataTemplate i:MainPage}"
+                      Route="{x:Static util:Routes.Follow}"/>
         <ShellContent Icon="{DynamicResource FontIconSparkles}"
                       Title="{r:Text News}"
-                      ContentTemplate="{DataTemplate i:NewsPage}"/>
+                      ContentTemplate="{DataTemplate i:NewsPage}"
+                      Route="{x:Static util:Routes.News}"/>
         <ShellContent Icon="{DynamicResource FontIconOrder}"
                       Title="{r:Text Ranking}"
-                      ContentTemplate="{DataTemplate i:RankingPage}"/>
+                      ContentTemplate="{DataTemplate i:RankingPage}"
+                      Route="{x:Static util:Routes.Ranking}"/>
     </FlyoutItem>
     <ShellContent Icon="{DynamicResource FontIconOption}"
                   Title="{r:Text Option}"
-                  ContentTemplate="{DataTemplate p:OptionPage}"/>
+                  ContentTemplate="{DataTemplate p:OptionPage}"
+                  Route="{x:Static util:Routes.Option}"/>
 </Shell>

Pixiview/AppShell.xaml.cs

@@ -1,4 +1,5 @@
 using System;
+using Pixiview.Utils;
 using Xamarin.Forms;
 
 namespace Pixiview
@@ -15,6 +16,8 @@ namespace Pixiview
         public AppShell()
         {
             InitializeComponent();
+
+            App.DebugPrint($"folder: {Stores.PersonalFolder}");
         }
 
         public void SetNavigationBarHeight(double height, double statusHeight)

Pixiview/Illust/IllustCollectionPage.cs

@@ -0,0 +1,402 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Pixiview.Resources;
+using Pixiview.UI;
+using Pixiview.UI.Theme;
+using Pixiview.Utils;
+using Xamarin.Essentials;
+using Xamarin.Forms;
+
+namespace Pixiview.Illust
+{
+    public abstract class IllustCollectionPage : AdaptedPage
+    {
+        #region - Properties -
+
+        public static readonly BindableProperty IllustsProperty = BindableProperty.Create(
+            nameof(Illusts), typeof(IllustCollection), typeof(IllustCollectionPage));
+        public static readonly BindableProperty ColumnsProperty = BindableProperty.Create(
+            nameof(Columns), typeof(int), typeof(IllustCollectionPage), 2);
+        public static readonly BindableProperty LoadingProperty = BindableProperty.Create(
+            nameof(Loading), typeof(bool), typeof(IllustCollectionPage), propertyChanged: OnLoadingPropertyChanged);
+
+        private static void OnLoadingPropertyChanged(BindableObject obj, object oldValue, object newValue)
+        {
+            var page = (IllustCollectionPage)obj;
+            var now = (bool)newValue;
+            if (!page.loaded && now && Stores.NetworkAvailable)
+            {
+                page.loaded = true;
+                Task.Run(() => page.DoLoadIllusts());
+            }
+        }
+
+        public IllustCollection Illusts
+        {
+            get => (IllustCollection)GetValue(IllustsProperty);
+            set => SetValue(IllustsProperty, value);
+        }
+        public int Columns
+        {
+            get => (int)GetValue(ColumnsProperty);
+            set => SetValue(ColumnsProperty, value);
+        }
+        public bool Loading
+        {
+            get => (bool)GetValue(LoadingProperty);
+            set => SetValue(LoadingProperty, value);
+        }
+
+        #endregion
+
+        protected bool loaded;
+
+        private IllustData illustData;
+        private readonly ParallelOptions parallelOptions = new ParallelOptions { MaxDegreeOfParallelism = Configs.MaxThreads };
+        private readonly Command<IllustItem> commandIllustImageTapped;
+
+        public IllustCollectionPage()
+        {
+            BindingContext = this;
+            commandIllustImageTapped = new Command<IllustItem>(IllustImageTapped);
+        }
+
+        private void IllustImageTapped(IllustItem illust)
+        {
+            Start(() => OnIllustImageTapped(illust));
+        }
+
+        #region - Overrides -
+
+        protected override void OnAppearing()
+        {
+            base.OnAppearing();
+
+            Connectivity.ConnectivityChanged += Connectivity_ConnectivityChanged;
+        }
+
+        protected override void OnDisappearing()
+        {
+            base.OnDisappearing();
+
+            Connectivity.ConnectivityChanged -= Connectivity_ConnectivityChanged;
+        }
+
+        private void Connectivity_ConnectivityChanged(object sender, ConnectivityChangedEventArgs e)
+        {
+            if (e.NetworkAccess == NetworkAccess.Internet || e.NetworkAccess == NetworkAccess.ConstrainedInternet)
+            {
+                StartLoad();
+            }
+        }
+
+        public override void OnOrientationChanged(Orientation orientation)
+        {
+            int columns;
+            switch (orientation)
+            {
+                case Orientation.Portrait:
+                    columns = 2;
+                    break;
+                case Orientation.PortraitUpsideDown:
+                    if (DeviceInfo.Idiom == DeviceIdiom.Phone)
+                    {
+                        columns = 4;
+                    }
+                    else
+                    {
+                        columns = 2;
+                    }
+                    break;
+                case Orientation.Unknown:
+                case Orientation.LandscapeLeft:
+                case Orientation.LandscapeRight:
+                default:
+                    columns = 4;
+                    break;
+            }
+            if (Columns != columns)
+            {
+                App.DebugPrint($"change columns to {columns}");
+                Columns = columns;
+            }
+            base.OnOrientationChanged(orientation);
+        }
+
+        #endregion
+
+        protected abstract IllustData DoLoadIllustData(bool force);
+        protected abstract IEnumerable<string> DoGetIllustList(IllustData data);
+        protected virtual void OnIllustImageTapped(IllustItem illust)
+        {
+            var page = new ViewIllustPage(illust);
+            Navigation.PushAsync(page);
+        }
+
+        protected void StartLoad(bool force = false)
+        {
+            if (force)
+            {
+                Loading = true;
+                Task.Run(() => DoLoadIllusts(true));
+            }
+            else if (!loaded)
+            {
+                Loading = true;
+            }
+        }
+
+        protected DataTemplate GetCardViewTemplate()
+        {
+            return new DataTemplate(() =>
+            {
+                return new CardView
+                {
+                    Padding = 0,
+                    Margin = 0,
+                    CornerRadius = 10,
+                    ShadowColor = StyleDefinition.ColorLightShadow,
+                    ShadowOffset = new Size(2, 2),
+                    Content = new Grid
+                    {
+                        HorizontalOptions = LayoutOptions.Fill,
+                        RowDefinitions =
+                        {
+                            new RowDefinition().Binding(RowDefinition.HeightProperty, nameof(IllustItem.ImageHeight)),
+                            new RowDefinition { Height = GridLength.Auto },
+                            new RowDefinition { Height = GridLength.Auto }
+                        },
+                        Children =
+                        {
+                            // image
+                            new RoundImage
+                            {
+                                BackgroundColor = Color.LightGray,
+                                CornerRadius = 10,
+                                CornerMasks = CornerMask.Top,
+                                HorizontalOptions = LayoutOptions.Fill,
+                                Aspect = Aspect.AspectFill,
+                                GestureRecognizers =
+                                {
+                                    new TapGestureRecognizer()
+                                        .Binding(TapGestureRecognizer.CommandProperty, nameof(IllustItem.IllustTapped))
+                                        .Binding(TapGestureRecognizer.CommandParameterProperty, ".")
+                                }
+                            }
+                            .Binding(Image.SourceProperty, nameof(IllustItem.Image)),
+
+                            // label: r-18
+                            new RoundLabel
+                            {
+                                Text = ResourceHelper.R18,
+                                BackgroundColor = StyleDefinition.ColorRedBackground,
+                                Margin = new Thickness(6, 6, 0, 0),
+                                Padding = new Thickness(6, 2),
+                                CornerRadius = 4,
+                                HorizontalOptions = LayoutOptions.Start,
+                                VerticalOptions = LayoutOptions.Start,
+                                FontSize = StyleDefinition.FontSizeMicro,
+                                TextColor = Color.White
+                            }
+                            .Binding(IsVisibleProperty, nameof(IllustItem.IsRestrict)),
+
+                            // label: pages
+                            new RoundLabel
+                            {
+                                BackgroundColor = StyleDefinition.ColorDeepShadow,
+                                Margin = new Thickness(0, 6, 6, 0),
+                                Padding = new Thickness(6, 4),
+                                CornerRadius = 6,
+                                HorizontalOptions = LayoutOptions.End,
+                                VerticalOptions = LayoutOptions.Start,
+                                FontSize = StyleDefinition.FontSizeMicro,
+                                TextColor = Color.White
+                            }
+                            .Binding(Label.TextProperty, nameof(IllustItem.PageCountText))
+                            .Binding(IsVisibleProperty, nameof(IllustItem.IsPageVisible))
+                            .DynamicResource(Label.FontFamilyProperty, ThemeBase.IconSolidFontFamily),
+
+                            // label: title
+                            new Label
+                            {
+                                Padding = new Thickness(8, 2),
+                                HorizontalOptions = LayoutOptions.Start,
+                                LineBreakMode = LineBreakMode.TailTruncation,
+                                FontSize = StyleDefinition.FontSizeSmall
+                            }
+                            .Binding(Label.TextProperty, nameof(IllustItem.Title))
+                            .DynamicResource(Label.TextColorProperty, ThemeBase.TextColor)
+                            .GridRow(1),
+
+                            // stacklayout: user
+                            new StackLayout
+                            {
+                                Orientation = StackOrientation.Horizontal,
+                                Padding = new Thickness(8, 0, 8, 8),
+                                Children =
+                                {
+                                    new CircleImage
+                                    {
+                                        WidthRequest = 30,
+                                        HeightRequest = 30,
+                                        Aspect = Aspect.AspectFill
+                                    }
+                                    .Binding(Image.SourceProperty, nameof(IllustItem.ProfileImage)),
+                                    new Label
+                                    {
+                                        VerticalOptions = LayoutOptions.Center,
+                                        LineBreakMode = LineBreakMode.TailTruncation,
+                                        FontSize = StyleDefinition.FontSizeMicro
+                                    }
+                                    .Binding(Label.TextProperty, nameof(IllustItem.UserName))
+                                    .DynamicResource(Label.TextColorProperty, ThemeBase.SubTextColor)
+                                }
+                            }
+                            .GridRow(2)
+                        }
+                    }
+                }
+                .DynamicResource(BackgroundColorProperty, ThemeBase.SubColor);
+            });
+        }
+
+        #region - Illust Tasks -
+
+        void DoLoadIllusts(bool force = false)
+        {
+            illustData = DoLoadIllustData(force);
+            if (illustData == null)
+            {
+                App.DebugError("illusts.load", "failed to load illusts data.");
+                return;
+            }
+
+            var data = DoGetIllustList(illustData).Select(id =>
+            {
+                var illust = illustData.body.thumbnails.illust.FirstOrDefault(l => l.illustId == id);
+                if (illust == null)
+                {
+                    return null;
+                }
+                return new IllustItem
+                {
+                    Id = illust.illustId,
+                    ImageUrl = illust.urls.x360 ?? illust.url,
+                    Title = illust.illustTitle,
+                    IsRestrict = illust.xRestrict == 1,
+                    ProfileUrl = illust.profileImageUrl,
+                    UserId = illust.userId,
+                    UserName = illust.userName,
+                    Width = illust.width,
+                    Height = illust.height,
+                    PageCount = illust.pageCount,
+
+                    IllustTapped = commandIllustImageTapped
+                };
+            }).Where(i => i != null);
+
+            var collection = new IllustCollection(data);
+            Illusts = collection;
+            Loading = false;
+
+            DoLoadImages(collection);
+        }
+
+        void DoLoadImages(IllustCollection collection)
+        {
+            Parallel.ForEach(collection, parallelOptions, illust =>
+            {
+                if (!collection.Running)
+                {
+                    return;
+                }
+                if (illust.ImageUrl != null)
+                {
+                    var url = Configs.GetThumbnailUrl(illust.ImageUrl);
+                    var image = Stores.LoadThumbnailImage(url);
+                    if (image != null)
+                    {
+                        illust.Image = image;
+                    }
+                }
+
+                if (illust.ProfileUrl != null)
+                {
+                    var userImage = Stores.LoadUserProfileImage(illust.ProfileUrl);
+                    if (userImage != null)
+                    {
+                        illust.ProfileImage = userImage;
+                    }
+                }
+            });
+        }
+
+        #endregion
+    }
+
+    public class IllustCollection : ObservableCollection<IllustItem>
+    {
+        private static readonly object sync = new object();
+
+        public IllustCollection(IEnumerable<IllustItem> illusts) : base(illusts)
+        {
+            running = true;
+        }
+
+        private bool running;
+        public bool Running
+        {
+            get => running;
+            set
+            {
+                lock (sync)
+                {
+                    running = value;
+                }
+            }
+        }
+    }
+
+    public class IllustItem : BindableObject
+    {
+        public static readonly BindableProperty ImageProperty = BindableProperty.Create(
+            nameof(Image), typeof(ImageSource), typeof(IllustItem));
+        public static readonly BindableProperty ProfileImageProperty = BindableProperty.Create(
+            nameof(ProfileImage), typeof(ImageSource), typeof(IllustItem));
+        public static readonly BindableProperty ImageHeightProperty = BindableProperty.Create(
+            nameof(ImageHeight), typeof(GridLength), typeof(IllustItem), GridLength.Auto);
+
+        public ImageSource Image
+        {
+            get => (ImageSource)GetValue(ImageProperty);
+            set => SetValue(ImageProperty, value);
+        }
+        public ImageSource ProfileImage
+        {
+            get => (ImageSource)GetValue(ProfileImageProperty);
+            set => SetValue(ProfileImageProperty, value);
+        }
+        public GridLength ImageHeight
+        {
+            get => (GridLength)GetValue(ImageHeightProperty);
+            set => SetValue(ImageHeightProperty, value);
+        }
+        public ICommand IllustTapped { get; set; }
+
+        public string Id { get; set; }
+        public string ImageUrl { get; set; }
+        public string Title { get; set; }
+        public bool IsRestrict { get; set; }
+        public string ProfileUrl { get; set; }
+        public string UserId { get; set; }
+        public string UserName { get; set; }
+        public int Width { get; set; }
+        public int Height { get; set; }
+        public int PageCount { get; set; }
+        public string PageCountText => $"{StyleDefinition.IconLayer} {PageCount}";
+        public bool IsPageVisible => PageCount > 1;
+    }
+}

Pixiview/Illust/MainPage.xaml

@@ -1,19 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
-<u:AdaptedPage xmlns="http://xamarin.com/schemas/2014/forms"
+<i:IllustCollectionPage xmlns="http://xamarin.com/schemas/2014/forms"
-               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-               xmlns:d="http://xamarin.com/schemas/2014/forms/design"
+                        xmlns:i="clr-namespace:Pixiview.Illust"
-               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+                        xmlns:u="clr-namespace:Pixiview.UI"
-               xmlns:mdl="clr-namespace:Pixiview.Illust"
+                        xmlns:util="clr-namespace:Pixiview.Utils"
-               xmlns:u="clr-namespace:Pixiview.UI"
+                        xmlns:r="clr-namespace:Pixiview.Resources"
-               xmlns:util="clr-namespace:Pixiview.Utils"
+                        x:Class="Pixiview.Illust.MainPage"
-               xmlns:r="clr-namespace:Pixiview.Resources"
+                        util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
-               mc:Ignorable="d"
+                        Shell.NavBarHasShadow="True"
-               x:Class="Pixiview.Illust.MainPage"
+                        BackgroundColor="{DynamicResource WindowColor}"
-               util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
+                        Title="{r:Text Follow}">
-               Shell.NavBarHasShadow="True"
-               BackgroundColor="{DynamicResource WindowColor}"
-               Title="{r:Text Follow}"
-               OrientationChanged="Page_OrientationChanged">
     <ContentPage.ToolbarItems>
         <ToolbarItem Order="Primary" Clicked="Refresh_Clicked"
                      IconImageSource="{DynamicResource FontIconRefresh}"/>
@@ -22,61 +18,8 @@
         <ScrollView HorizontalOptions="Fill">
             <u:FlowLayout ItemsSource="{Binding Illusts}"
                           HorizontalOptions="Fill" Column="{Binding Columns}"
-                          Margin="16" RowSpacing="16" ColumnSpacing="16">
+                          Margin="16" RowSpacing="16" ColumnSpacing="16"
-                <u:FlowLayout.ItemTemplate>
+                          ItemTemplate="{StaticResource cardView}"/>
-                    <DataTemplate x:DataType="mdl:IllustItem">
-                        <u:CardView Padding="0" Margin="0" CornerRadius="10"
-                                    ShadowColor="#20000000"
-                                    ShadowOffset="2, 2"
-                                    BackgroundColor="{DynamicResource SubColor}">
-                            <Grid HorizontalOptions="Fill">
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="{Binding ImageHeight}"/>
-                                    <RowDefinition Height="Auto"/>
-                                    <RowDefinition Height="Auto"/>
-                                </Grid.RowDefinitions>
-                                <u:RoundImage BackgroundColor="LightGray"
-                                              CornerRadius="10"
-                                              CornerMasks="Top"
-                                              Source="{Binding Image}"
-                                              HorizontalOptions="Fill"
-                                              Aspect="AspectFill">
-                                    <u:RoundImage.GestureRecognizers>
-                                        <TapGestureRecognizer Command="{Binding IllustTapped}" CommandParameter="{Binding .}"/>
-                                    </u:RoundImage.GestureRecognizers>
-                                </u:RoundImage>
-                                <u:RoundLabel Text="R-18" BackgroundColor="#fd4363" Margin="6, 6, 0, 0"
-                                              Padding="6, 2" CornerRadius="4"
-                                              HorizontalOptions="Start" VerticalOptions="Start"
-                                              FontSize="Micro" TextColor="White"
-                                              IsVisible="{Binding IsRestrict}"/>
-                                <u:RoundLabel Text="{Binding PageCountText}"
-                                              FontFamily="{DynamicResource IconSolidFontFamily}"
-                                              BackgroundColor="#50000000" Margin="0, 6, 6, 0"
-                                              Padding="6, 4" CornerRadius="6"
-                                              HorizontalOptions="End" VerticalOptions="Start"
-                                              FontSize="Micro" TextColor="White"
-                                              IsVisible="{Binding IsPageVisible}"/>
-                                <Label Grid.Row="1" Text="{Binding Title}"
-                                       Padding="8, 2"
-                                       TextColor="{DynamicResource TextColor}"
-                                       HorizontalOptions="Start"
-                                       LineBreakMode="TailTruncation"
-                                       FontSize="Small"/>
-                                <StackLayout Grid.Row="2" Orientation="Horizontal" Padding="8, 0, 8, 8">
-                                    <u:CircleImage WidthRequest="30" HeightRequest="30" Aspect="AspectFill"
-                                                   Source="{Binding ProfileImage}"/>
-                                    <Label Text="{Binding UserName}"
-                                           VerticalOptions="Center"
-                                           TextColor="{DynamicResource SubTextColor}"
-                                           LineBreakMode="TailTruncation"
-                                           FontSize="Micro"/>
-                                </StackLayout>
-                            </Grid>
-                        </u:CardView>
-                    </DataTemplate>
-                </u:FlowLayout.ItemTemplate>
-            </u:FlowLayout>
         </ScrollView>
         <Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
                IsVisible="{Binding Loading}"
@@ -86,4 +29,4 @@
                                Color="{DynamicResource WindowColor}"/>
         </Frame>
     </Grid>
-</u:AdaptedPage>
+</i:IllustCollectionPage>

Pixiview/Illust/MainPage.xaml.cs

@@ -1,215 +1,31 @@
 using System;
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.ComponentModel;
 using System.Linq;
-using System.Threading.Tasks;
-using System.Windows.Input;
-using Pixiview.UI;
 using Pixiview.Utils;
-using Xamarin.Essentials;
-using Xamarin.Forms;
 
 namespace Pixiview.Illust
 {
     // Learn more about making custom code visible in the Xamarin.Forms previewer
     // by visiting https://aka.ms/xamarinforms-previewer
-    [DesignTimeVisible(false)]
+    //[DesignTimeVisible(false)]
-    public partial class MainPage : AdaptedPage
+    public partial class MainPage : IllustCollectionPage
     {
-        #region - Properties -
-
-        public static readonly BindableProperty IllustsProperty = BindableProperty.Create(
-            nameof(Illusts), typeof(IllustCollection), typeof(MainPage));
-        public static readonly BindableProperty ColumnsProperty = BindableProperty.Create(
-            nameof(Columns), typeof(int), typeof(MainPage), 2);
-        public static readonly BindableProperty LoadingProperty = BindableProperty.Create(
-            nameof(Loading), typeof(bool), typeof(MainPage), propertyChanged: OnLoadingPropertyChanged);
-
-        private static void OnLoadingPropertyChanged(BindableObject obj, object oldValue, object newValue)
-        {
-            var page = (MainPage)obj;
-            var now = (bool)newValue;
-            if (!page.loaded && now && Stores.NetworkAvailable)
-            {
-                page.loaded = true;
-                Task.Run(() => page.DoLoadIllusts());
-            }
-        }
-
-        public IllustCollection Illusts
-        {
-            get => (IllustCollection)GetValue(IllustsProperty);
-            set => SetValue(IllustsProperty, value);
-        }
-        public int Columns
-        {
-            get => (int)GetValue(ColumnsProperty);
-            set => SetValue(ColumnsProperty, value);
-        }
-        public bool Loading
-        {
-            get => (bool)GetValue(LoadingProperty);
-            set => SetValue(LoadingProperty, value);
-        }
-
-        #endregion
-
-        private readonly ParallelOptions parallelOptions = new ParallelOptions { MaxDegreeOfParallelism = Configs.MaxThreads };
-        private readonly Command<IllustItem> commandIllustImageTapped;
-
-        private IllustData illustData;
-        private bool loaded;
-
         public MainPage()
         {
-            BindingContext = this;
+            Resources.Add("cardView", GetCardViewTemplate());
             InitializeComponent();
 
-            commandIllustImageTapped = new Command<IllustItem>(OnIllustImageTapped);
+            StartLoad();
         }
 
-        #region - Overrides -
+        protected override IEnumerable<string> DoGetIllustList(IllustData data)
-
-        public override void OnLoad()
         {
-            App.DebugPrint($"folder: {Stores.PersonalFolder}");
+            return data.body.page.follow.Select(i => i.ToString());
-            Loading = true;
         }
 
-        protected override void OnAppearing()
+        protected override IllustData DoLoadIllustData(bool force)
         {
-            base.OnAppearing();
+            return Stores.LoadIllustData(force);
-
-            Connectivity.ConnectivityChanged += Connectivity_ConnectivityChanged;
-        }
-
-        protected override void OnDisappearing()
-        {
-            base.OnDisappearing();
-
-            Connectivity.ConnectivityChanged -= Connectivity_ConnectivityChanged;
-        }
-
-        #endregion
-
-        private void Connectivity_ConnectivityChanged(object sender, ConnectivityChangedEventArgs e)
-        {
-            if (e.NetworkAccess == NetworkAccess.Internet || e.NetworkAccess == NetworkAccess.ConstrainedInternet)
-            {
-                if (!loaded)
-                {
-                    Loading = true;
-                }
-            }
-        }
-
-        #region - Illust Tasks -
-
-        void DoLoadIllusts(bool force = false)
-        {
-            illustData = Stores.LoadIllustData(force);
-            if (illustData == null)
-            {
-                App.DebugError("illusts.load", "failed to load illusts data.");
-                return;
-            }
-
-            var data = illustData.body.page.follow.Select(i =>
-            {
-                var illust = illustData.body.thumbnails.illust.FirstOrDefault(l => l.illustId == i.ToString());
-                if (illust == null)
-                {
-                    return null;
-                }
-                return new IllustItem
-                {
-                    Id = illust.illustId,
-                    ImageUrl = illust.urls.x360 ?? illust.url,
-                    Title = illust.illustTitle,
-                    IsRestrict = illust.xRestrict == 1,
-                    ProfileUrl = illust.profileImageUrl,
-                    UserId = illust.userId,
-                    UserName = illust.userName,
-                    Width = illust.width,
-                    Height = illust.height,
-                    PageCount = illust.pageCount,
-
-                    IllustTapped = commandIllustImageTapped
-                };
-            }).Where(i => i != null);
-
-            var collection = new IllustCollection(data);
-            Illusts = collection;
-            Loading = false;
-
-            DoLoadImages(collection);
-        }
-
-        void DoLoadImages(IllustCollection collection)
-        {
-            Parallel.ForEach(collection, parallelOptions, illust =>
-            {
-                if (!collection.Running)
-                {
-                    return;
-                }
-                if (illust.ImageUrl != null)
-                {
-                    var url = Configs.GetThumbnailUrl(illust.ImageUrl);
-                    var image = Stores.LoadThumbnailImage(url);
-                    if (image != null)
-                    {
-                        illust.Image = image;
-                    }
-                }
-
-                if (illust.ProfileUrl != null)
-                {
-                    var userImage = Stores.LoadUserProfileImage(illust.ProfileUrl);
-                    if (userImage != null)
-                    {
-                        illust.ProfileImage = userImage;
-                    }
-                }
-            });
-        }
-
-        #endregion
-
-        private void OnIllustImageTapped(IllustItem illust)
-        {
-            Start(() =>
-            {
-                var page = new ViewIllustPage(illust);
-                Navigation.PushAsync(page);
-            });
-        }
-
-        private void Page_OrientationChanged(object sender, OrientationEventArgs e)
-        {
-            switch (e.CurrentOrientation)
-            {
-                case Orientation.Portrait:
-                    Columns = 2;
-                    break;
-                case Orientation.PortraitUpsideDown:
-                    if (DeviceInfo.Idiom == DeviceIdiom.Phone)
-                    {
-                        Columns = 4;
-                    }
-                    else
-                    {
-                        Columns = 2;
-                    }
-                    break;
-                case Orientation.Unknown:
-                case Orientation.LandscapeLeft:
-                case Orientation.LandscapeRight:
-                default:
-                    Columns = 4;
-                    break;
-            }
         }
 
         private void Refresh_Clicked(object sender, EventArgs e)
@@ -218,71 +34,7 @@ namespace Pixiview.Illust
             {
                 return;
             }
-            Loading = true;
+            StartLoad(true);
-            Task.Run(() => DoLoadIllusts(true));
         }
     }
-
-    public class IllustCollection : ObservableCollection<IllustItem>
-    {
-        private static readonly object sync = new object();
-
-        public IllustCollection(IEnumerable<IllustItem> illusts) : base(illusts)
-        {
-            running = true;
-        }
-
-        private bool running;
-        public bool Running
-        {
-            get => running;
-            set
-            {
-                lock (sync)
-                {
-                    running = value;
-                }
-            }
-        }
-    }
-
-    public class IllustItem : BindableObject
-    {
-        public static readonly BindableProperty ImageProperty = BindableProperty.Create(
-            nameof(Image), typeof(ImageSource), typeof(IllustItem));
-        public static readonly BindableProperty ProfileImageProperty = BindableProperty.Create(
-            nameof(ProfileImage), typeof(ImageSource), typeof(IllustItem));
-        public static readonly BindableProperty ImageHeightProperty = BindableProperty.Create(
-            nameof(ImageHeight), typeof(GridLength), typeof(IllustItem), GridLength.Auto);
-
-        public ImageSource Image
-        {
-            get => (ImageSource)GetValue(ImageProperty);
-            set => SetValue(ImageProperty, value);
-        }
-        public ImageSource ProfileImage
-        {
-            get => (ImageSource)GetValue(ProfileImageProperty);
-            set => SetValue(ProfileImageProperty, value);
-        }
-        public GridLength ImageHeight
-        {
-            get => (GridLength)GetValue(ImageHeightProperty);
-            set => SetValue(ImageHeightProperty, value);
-        }
-        public ICommand IllustTapped { get; set; }
-
-        public string Id { get; set; }
-        public string ImageUrl { get; set; }
-        public string Title { get; set; }
-        public bool IsRestrict { get; set; }
-        public string ProfileUrl { get; set; }
-        public string UserId { get; set; }
-        public string UserName { get; set; }
-        public int Width { get; set; }
-        public int Height { get; set; }
-        public int PageCount { get; set; }
-        public string PageCountText => $"{StyleDefinition.IconLayer} {PageCount}";
-        public bool IsPageVisible => PageCount > 1;
-    }
 }

Pixiview/Illust/NewsPage.xaml

@@ -1,6 +1,28 @@
 <?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.Illust.NewsPage">
+<i:IllustCollectionPage xmlns="http://xamarin.com/schemas/2014/forms"
-    <ContentPage.Content>
+                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-        <Label Text="News" HorizontalOptions="Center" VerticalOptions="Center"/>
+                        xmlns:i="clr-namespace:Pixiview.Illust"
-    </ContentPage.Content>
+                        xmlns:u="clr-namespace:Pixiview.UI"
-</ContentPage>
+                        xmlns:util="clr-namespace:Pixiview.Utils"
+                        xmlns:r="clr-namespace:Pixiview.Resources"
+                        x:Class="Pixiview.Illust.NewsPage"
+                        util:Screen.StatusBarStyle="{DynamicResource StatusBarStyle}"
+                        Shell.NavBarHasShadow="True"
+                        BackgroundColor="{DynamicResource WindowColor}"
+                        Title="{r:Text News}">
+    <Grid>
+        <ScrollView HorizontalOptions="Fill">
+            <u:FlowLayout ItemsSource="{Binding Illusts}"
+                          HorizontalOptions="Fill" Column="{Binding Columns}"
+                          Margin="16" RowSpacing="16" ColumnSpacing="16"
+                          ItemTemplate="{StaticResource cardView}"/>
+        </ScrollView>
+        <Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
+               IsVisible="{Binding Loading}"
+               HorizontalOptions="Center" VerticalOptions="Center"
+               BackgroundColor="{DynamicResource MaskColor}">
+            <ActivityIndicator IsRunning="True" IsVisible="True"
+                               Color="{DynamicResource WindowColor}"/>
+        </Frame>
+    </Grid>
+</i:IllustCollectionPage>

Pixiview/Illust/NewsPage.xaml.cs

@@ -1,15 +1,26 @@
-using System;
+using System.Collections.Generic;
-using System.Collections.Generic;
+using Pixiview.Utils;
-
-using Xamarin.Forms;
 
 namespace Pixiview.Illust
 {
-    public partial class NewsPage : ContentPage
+    public partial class NewsPage : IllustCollectionPage
     {
         public NewsPage()
         {
+            Resources.Add("cardView", GetCardViewTemplate());
             InitializeComponent();
+
+            StartLoad();
+        }
+
+        protected override IEnumerable<string> DoGetIllustList(IllustData data)
+        {
+            return data.body.page.newPost;
+        }
+
+        protected override IllustData DoLoadIllustData(bool force)
+        {
+            return Stores.LoadIllustData(force);
         }
     }
 }

Pixiview/Illust/RankingPage.xaml

@@ -1,6 +1,26 @@
 <?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.Illust.RankingPage">
+<i:IllustCollectionPage xmlns="http://xamarin.com/schemas/2014/forms"
-    <ContentPage.Content>
+                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-        <Label Text="Ranking #100" HorizontalOptions="Center" VerticalOptions="Center"/>
+                        xmlns:i="clr-namespace:Pixiview.Illust"
-    </ContentPage.Content>
+                        xmlns:u="clr-namespace:Pixiview.UI"
-</ContentPage>
+                        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">
+            <u:FlowLayout ItemsSource="{Binding Illusts}"
+                          HorizontalOptions="Fill" Column="{Binding Columns}"
+                          Margin="16" RowSpacing="16" ColumnSpacing="16"
+                          ItemTemplate="{StaticResource cardView}"/>
+        </ScrollView>
+        <Frame HasShadow="False" Margin="0" Padding="20" CornerRadius="8"
+               IsVisible="{Binding Loading}"
+               HorizontalOptions="Center" VerticalOptions="Center"
+               BackgroundColor="{DynamicResource MaskColor}">
+            <ActivityIndicator IsRunning="True" IsVisible="True"
+                               Color="{DynamicResource WindowColor}"/>
+        </Frame>
+    </Grid>
+</i:IllustCollectionPage>

Pixiview/Illust/RankingPage.xaml.cs

@@ -1,15 +1,38 @@
-using System;
+using System.Collections.Generic;
-using System.Collections.Generic;
+using System.Linq;
-
+using Pixiview.Utils;
 using Xamarin.Forms;
 
 namespace Pixiview.Illust
 {
-    public partial class RankingPage : ContentPage
+    public partial class RankingPage : IllustCollectionPage
     {
         public RankingPage()
         {
+            Resources.Add("cardView", GetCardViewTemplate());
             InitializeComponent();
+
+            StartLoad();
+        }
+
+        protected override IEnumerable<string> DoGetIllustList(IllustData data)
+        {
+            return data.body.page.ranking.items.Select(i => i.id);
+        }
+
+        protected override IllustData DoLoadIllustData(bool force)
+        {
+            var data = Stores.LoadIllustData(force);
+            if (data != null)
+            {
+                var date = data.body.page.ranking.date;
+                if (date.Length == 8)
+                {
+                    date = date.Substring(0, 4) + "-" + date.Substring(4, 2) + "-" + date.Substring(6, 2);
+                }
+                Device.BeginInvokeOnMainThread(() => Title = date);
+            }
+            return data;
         }
     }
 }

Pixiview/Illust/ViewIllustPage.xaml.cs

@@ -8,6 +8,7 @@ using Xamarin.Forms;
 
 namespace Pixiview.Illust
 {
+    [QueryProperty("IllustId", "id")]
     public partial class ViewIllustPage : AdaptedPage
     {
         public static readonly BindableProperty IllustsProperty = BindableProperty.Create(
@@ -39,7 +40,7 @@ namespace Pixiview.Illust
         public IllustItem IllustItem
         {
             get => (IllustItem)GetValue(IllustItemProperty);
-            private set => SetValue(IllustItemProperty, value);
+            set => SetValue(IllustItemProperty, value);
         }
         public Thickness PageTopMargin
         {
@@ -60,6 +61,14 @@ namespace Pixiview.Illust
         public override void OnLoad()
         {
             var illust = IllustItem;
+            if (illust != null)
+            {
+                LoadIllust(illust);
+            }
+        }
+
+        private void LoadIllust(IllustItem illust)
+        {
             if (illust == null)
             {
                 return;

Pixiview/OptionPage.xaml

@@ -1,6 +1,13 @@
 <?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">
+<u:AdaptedPage xmlns="http://xamarin.com/schemas/2014/forms"
+               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+               xmlns:u="clr-namespace:Pixiview.UI"
+               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"/>
+        <Label Text="Option" Margin="20"/>
     </ContentPage.Content>
-</ContentPage>
+</u:AdaptedPage>

Pixiview/OptionPage.xaml.cs

@@ -1,11 +1,8 @@
-using System;
+using Pixiview.UI;
-using System.Collections.Generic;
-
-using Xamarin.Forms;
 
 namespace Pixiview
 {
-    public partial class OptionPage : ContentPage
+    public partial class OptionPage : AdaptedPage
     {
         public OptionPage()
         {

Pixiview/Resources/Languages/zh-CN.xml

@@ -2,6 +2,7 @@
 <root>
     <Title>Pixiview</Title>
     <Ok>OK</Ok>
+    <R18>R-18</R18>
     <Follow>已关注</Follow>
     <News>最新</News>
     <Ranking>排行榜</Ranking>

Pixiview/Resources/ResourceHelper.cs

@@ -12,6 +12,7 @@ namespace Pixiview.Resources
     {
         public static string Title => GetResource(nameof(Title));
         public static string Ok => GetResource(nameof(Ok));
+        public static string R18 => GetResource(nameof(R18));
         public static string SaveSuccess => GetResource(nameof(SaveSuccess));
 
         static readonly Dictionary<string, LanguageResource> dict = new Dictionary<string, LanguageResource>();

Pixiview/UI/StyleDefinition.cs

@@ -14,6 +14,11 @@ namespace Pixiview.UI
         public static readonly Thickness HorizonRight10 = new Thickness(0, 0, 10, 0);
         public static readonly Thickness LeftBottom10 = new Thickness(10, 0, 0, 10);
         public static readonly GridLength TitleIconWidth = 40;
+        public static readonly Color ColorLightShadow = Color.FromRgba(0, 0, 0, 0x20);
+        public static readonly Color ColorDeepShadow = Color.FromRgba(0, 0, 0, 0x50);
+        public static readonly Color ColorRedBackground = Color.FromRgb(0xfd, 0x43, 0x63);
+        public static readonly double FontSizeMicro = Device.GetNamedSize(NamedSize.Micro, typeof(Label));
+        public static readonly double FontSizeSmall = Device.GetNamedSize(NamedSize.Small, typeof(Label));
 
         public const string IconUser = "\uf007";
         public const string IconSparkles = "\uf890";

Pixiview/Utils/Extensions.cs

@@ -2,6 +2,27 @@
 
 namespace Pixiview.Utils
 {
+    public static class Extensions
+    {
+        public static T Binding<T>(this T view, BindableProperty property, string name) where T : BindableObject
+        {
+            view.SetBinding(property, name);
+            return view;
+        }
+
+        public static T DynamicResource<T>(this T view, BindableProperty property, string key) where T : Element
+        {
+            view.SetDynamicResource(property, key);
+            return view;
+        }
+
+        public static T GridRow<T>(this T view, int row) where T : BindableObject
+        {
+            Grid.SetRow(view, row);
+            return view;
+        }
+    }
+
     public static class Screen
     {
         private const string StatusBarStyle = nameof(StatusBarStyle);

Pixiview/Utils/Stores.cs

@@ -297,4 +297,14 @@ namespace Pixiview.Utils
             return url;
         }
     }
+
+    public static class Routes
+    {
+        public const string Illust = "illust";
+        public const string Detail = "detail";
+        public const string Follow = "follow";
+        public const string News = "news";
+        public const string Ranking = "ranking";
+        public const string Option = "option";
+    }
 }