Xamarin.Forms全屏-android篇

 jvxiang   2018-04-19 13:07   1,520 人阅读  0 条评论

引言

我们的小说阅读器写到了阅读的部分,大家应该都用过小说阅读器,首先应该是一个全屏的、没有状态栏跟虚拟导航键(android)的页面。而Xamarin.Forms并没有提供给我们一个这样的页面。所以我们需要通过Renderer使用原生的方式来写这个页面。

由于我现在主要使用android来做测试,并没有IOS的机器与MAC,UWP现在又不存在全屏的问题,所以这篇先总结android下如何全屏。

介绍

我们先贴一段引用的内容,大体介绍下安卓下我们应该怎么处理这种问题:

Android4.4的发布带来了新的特性-沉浸模式(Full-screen Immersive Mode),开启后应用占据全屏,虚拟按钮和系统栏隐藏,提高屏幕的利用率和冲击力。

那么怎样为我们的应用加入这个模式呢?先查看下Google的官方文档,里面有完整的示例代码。

// This snippet hides the system bars.private void hideSystemUI() { // Set the IMMERSIVE flag. // Set the content to appear under the system bars so that the content // doesn't resize when the system bars hide and show. //开启全屏模式 mDecorView.setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar | View.SYSTEM_UI_FLAG_IMMERSIVE);}// This snippet shows the system bars. It does this by removing all the flags// except for the ones that make the content appear under the system bars.//取消全屏模式private void showSystemUI() { mDecorView.setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);}

实现

首先我们在Xamarin.Forms里新建一个FullScreenPage.cs,这个Page继承自ContentPage。并且给这个Page添加一个IsFullSrceenProperty,来表示我们页面是否全屏。

public class FullSrceenPage : ContentPage { /// <summary> /// 当前是否全屏 /// </summary> public static readonly BindableProperty IsFullSrceenProperty = BindableProperty.Create("IsFullSrceen", typeof(bool), typeof(FullSrceenPage), false); public bool IsFullSrceen { get => (bool) GetValue(IsFullSrceenProperty); set => SetValue(IsFullSrceenProperty, value); }}

然后在Android工程中添加一个FullSrceenRenderer,继承自PageRenderer。在OnElementPropertyChanged中进行全屏处理。

处理方式模仿Android本身的写法。

这里注意,Android中的getXXX setXXX在Xamarin中都被翻译成了属性,View里的属性被放在了SystemUiFlags类中。所以,我们的全屏代码应该是

var uiOptions = SystemUiFlags.HideNavigation | SystemUiFlags.ImmersiveSticky | SystemUiFlags.Fullscreen | SystemUiFlags.LayoutFullscreen | SystemUiFlags.LayoutHideNavigation;activity.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)uiOptions;

回到正常状态的代码是:
activity.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)SystemUiFlags.Visible;

在命名空间上使用ExportRenderer将Renderer绑定到FullScreenPage上
[assembly: ExportRenderer(typeof(FullSrceenPage), typeof(FullSrceenRenderer))]

所以,整体代码如下:
[assembly: ExportRenderer(typeof(FullSrceenPage), typeof(FullSrceenRenderer))]namespace BookReader.Droid.Renderer{ public class FullSrceenRenderer : PageRenderer { public FullSrceenRenderer(Context context) : base(context) { } protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) { base.OnElementPropertyChanged(sender, e); if (e.PropertyName == FullSrceenPage.IsFullSrceenProperty.PropertyName) { if (!(Context is Activity activity)) { return; } var isFullSrceen = ((FullSrceenPage) sender).IsFullSrceen; if (isFullSrceen) {// activity.Window.SetFlags(// WindowManagerFlags.Fullscreen, WindowManagerFlags.Fullscreen); var uiOptions = SystemUiFlags.HideNavigation | SystemUiFlags.ImmersiveSticky | SystemUiFlags.Fullscreen | SystemUiFlags.LayoutFullscreen | SystemUiFlags.LayoutHideNavigation; activity.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)uiOptions; } else { //activity.Window.ClearFlags(WindowManagerFlags.Fullscreen); activity.Window.DecorView.SystemUiVisibility = (StatusBarVisibility)SystemUiFlags.Visible; } } } }

本文地址:https://www.jvxiang.com/xamarin-forms全屏-android篇.html
版权声明:本文为原创文章,版权归 jvxiang 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情