UI adjustment

This commit is contained in:
2020-05-07 12:46:31 +08:00
parent a0607993e9
commit 84aecdf39b
21 changed files with 593 additions and 86 deletions

View File

@@ -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;
}

View File

@@ -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}"
Title="{r:Text Follow}"
ContentTemplate="{DataTemplate i:MainPage}"
Route="{x:Static util:Routes.Follow}"/>
<ShellContent Icon="{DynamicResource FontIconSparkles}"
Title="{r:Text News}"
ContentTemplate="{DataTemplate i:NewsPage}"
Route="{x:Static util:Routes.News}"/>
<ShellContent Icon="{DynamicResource FontIconOrder}"
Title="{r:Text Ranking}"
ContentTemplate="{DataTemplate i:RankingPage}"
Route="{x:Static util:Routes.Ranking}"/>
<Tab Icon="{DynamicResource FontIconUser}"
Title="{r:Text Follow}"
Route="{x:Static util:Routes.Follow}">
<ShellContent ContentTemplate="{DataTemplate i:MainPage}"/>
</Tab>
<Tab Icon="{DynamicResource FontIconSparkles}"
Title="{r:Text Recommends}">
<ShellContent Title="{r:Text Recommends}"
ContentTemplate="{DataTemplate i:RecommendsPage}"
Route="{x:Static util:Routes.Recommends}"/>
<ShellContent Title="{r:Text ByUser}"
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>

View File

@@ -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>

View File

@@ -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">

View File

@@ -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}"

View File

@@ -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)

View File

@@ -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>

View File

@@ -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"/>

View File

@@ -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>

View File

@@ -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);

View File

@@ -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));
}
}
}

View File

@@ -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);
}
}
}

View File

@@ -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(FontIconSparkles, GetSolidIcon(StyleDefinition.IconSparkles));
Add(FontIconOrder, GetSolidIcon(StyleDefinition.IconOrder));
Add(FontIconRefresh, GetSolidIcon(StyleDefinition.IconRefresh));
Add(FontIconOption, GetSolidIcon(StyleDefinition.IconOption));
Add(FontIconDownload, GetSolidIcon(StyleDefinition.IconDownload));
Add(FontIconUser, GetSolidIcon(StyleDefinition.IconUser, solidFontFamily, mainColor));
Add(FontIconSparkles, GetSolidIcon(StyleDefinition.IconSparkles, solidFontFamily, mainColor));
Add(FontIconOrder, GetSolidIcon(StyleDefinition.IconOrder, solidFontFamily, mainColor));
Add(FontIconRefresh, GetSolidIcon(StyleDefinition.IconRefresh, solidFontFamily, mainColor));
Add(FontIconOption, GetSolidIcon(StyleDefinition.IconOption, solidFontFamily, mainColor));
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
};
}
}

View File

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

View File

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

View File

@@ -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";
}