Xamarin android沉浸式状态栏-阿里云开发者社区

开发者社区> 操张林> 正文

Xamarin android沉浸式状态栏

简介: 虽然关于android ”沉浸式“状态栏有很多博客介绍过,从小菜到大神无一例外。我第一次看到这种”沉浸“式的效果我也以为真的是这么叫,然而根本不是这么回事,完全是人云亦云。它真正的学名应该叫“透明状态栏”。
+关注继续查看
虽然关于android ”沉浸式“状态栏有很多博客介绍过,从小菜到大神无一例外。我第一次看到这种”沉浸“式的效果我也以为真的是这么叫,然而根本不是这么回事,完全是人云亦云。它真正的学名应该叫“透明状态栏”。不过lz管他怎么叫,但是必须得知道透明状态栏和沉浸式状态栏的区别。此文仅作用于小白理解android 透明状态栏,请android 大牛忽略此文,见笑了。
作为一名小白,android界面的还是应该要认识的

那么这篇文章的目的就是兼容android4.4和android5.0用两种方法来实现沉浸式状态栏(小白耐心看完,代码不多主要是图多)

第一种方法:设置状态栏透明化

我在qq空间随便get了一张手机截图,不知道是什么app的天气预报。这种方式利用的是将状态栏透明化(另一种方式状态栏设置颜色待会再说)



Google从Android kitkat(Android 4.4)开始(模仿IOS),给开发者提供了一套能透明的系统ui样式给状态栏和导航栏,所以要是实现这种浸入式导航栏,必须得android 4.4 以上的系统,而且android 4.4的系统和android 5.0的系统透明状态栏所实现的效果是不一样,什么区别?国际惯例上图吧(左4.4,右5.*)

虽然我们看到4.4 和5.* 的区别,这种效果的区别不是因为做法不同引起的,这里就介绍一下透明化式状态栏的效果

Activity.cs 直接用代码的方式,就这几行行代码,并没有去判断是否是5.*系统,仅仅只是设置状态栏为透明的。继承的主题是android自带的主题Theme.Light.NotitleBar。虽然你也可以写xml文件里面,但是在xamarin android 里面我发现设置状态栏透明属性无效,这的确是一个尴尬的地方,如果你知道怎么在xml文件里面设置状态栏的透明属性,欢迎评论。

    [Activity(Label = "FirstActivity",MainLauncher =true,Theme = "@android:style/Theme.Light.NoTitleBar")]
    public class FirstActivity : Activity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.First);
            if (Build.VERSION.SdkInt >= Build.VERSION_CODES.Kitkat)
            {
                //透明状态栏
                Window.AddFlags(WindowManagerFlags.TranslucentStatus);
                //透明导航栏
                Window.AddFlags(WindowManagerFlags.TranslucentNavigation);
            }
        }
    }
布局文件是这样的:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="140dp"
        android:textSize="24dp"
        android:background="@color/colorPrimary"
        android:text="你好,沉浸式状态栏"
        android:textColor="@color/white" />
</LinearLayout>
这个布局文件要注意的是:fitsSystemWIndows属性,他是干嘛的呢?如果不设置为true的,可以看到效果是这样的
   

fitsSystemWindows属性的作用

官方描述
 Boolean internal attribute to adjust view layout based on system windows such as the status bar. If true, adjusts the padding of this view to leave space for the system windows. Will only take effect if this view is in a non-embedded activity

简单的说就是:设置起bool值为true时就会自动调整view的padding属性,给system windows留出空间,实际效果: 当status bar为透明或半透明时(4.4以上),系统会设置view的paddingTop值为一个适合的值(status bar的高度)让view的内容不被上拉到状态栏,当在不占据status bar的情况下(4.4以下)会设置paddingTop值为0(因为没有占据status bar所以不用留出空间)。

第二种方法:设置状态栏的颜色

从这个标题上看,似乎没什么区别,第一种是设置状态颜色为透明感觉和第二种方法没什么区别。做法相对来说复杂点,我们来看看QQ音乐吧,我这个手机是android5.0的。
很明显将Activity 的Tab栏和状态栏设置成统一颜色,这样就不是方法1那种透明化状态栏所展现的系统自带半透明修饰的效果。

这里我使用Toolbar来展示这个效果,当然你也可以自定义标题栏来做出这个效果来。先上图


效果还行,实现了兼容android4.4和android5.*。首先我们来看看这个布局的关键外面一个layout主体颜色设置成toolbar一样的背景颜色。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:toolbar="http://schemas.android.com/apk/res-auto"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@color/colorPrimary"
     android:fitsSystemWindows="true">
  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="@color/colorPrimary"
      toolbar:logo="@drawable/menu"
      android:subtitle="子标题"
      toolbar:title="toolbar的标题"
     android:textColor="@color/white">
    <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="toolbar的使用"
         android:textColor="@color/white"/>
  </android.support.v7.widget.Toolbar>
  <!--内容布局-->
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@android:color/white"
      
      android:orientation="vertical">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="显示信息" />
</LinearLayout>
</LinearLayout>
Activity.cs如下。还有android4.4是不能设置状态栏颜色的,要判断android4.4和android5.*。值得注意的是添加的Flag不是方法一的那种Translucent,而是DrawsSystemBarBackgrounds 它才能修改状态栏的颜色(android5.*)
    [Activity(Label = "FirstActivity123",MainLauncher =true,Theme = "@style/TranslucentTheme")]
    public class FirstActivity : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.First);
           var toolBar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
            SetSupportActionBar(toolBar);
            SupportActionBar.SetDisplayShowTitleEnabled(false);//去掉标题
            if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
             {  //清除透明状态栏,使内容不再覆盖状态栏
                Window.ClearFlags(WindowManagerFlags.TranslucentStatus);
                Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
                var Color = Resources.GetColor(Resource.Color.colorPrimary);
                Window.SetStatusBarColor(Color);
                //透明导航栏 部分手机导航栏不是虚拟的,比如小米的
                Window.AddFlags(WindowManagerFlags.TranslucentNavigation);
                Window.SetNavigationBarColor(Color);
            }
            if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat&&Build.VERSION.SdkInt <= BuildVersionCodes.Lollipop)
            {
                //状态栏透明
                 Window.AddFlags(WindowManagerFlags.TranslucentStatus); 
                //透明导航栏
                Window.AddFlags(WindowManagerFlags.TranslucentNavigation);
            }
        }
        public override bool OnCreateOptionsMenu(IMenu menu)
        {
            MenuInflater.Inflate(Resource.Drawable.base_toolbar_menu,menu);
            return true;
        }
    }

Theme translucent  继承的v7兼容包主题Theme.AppCompat.Light

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="TranslucentTheme" parent="AppTheme.Base">
  </style>
  <style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
  </style>
</resources>

菜单文件就没必要贴出来了,主要是感受一下标题栏的颜色和状态栏设置成一样的。

小结:对于每个Activity都要去这样设置,既不简洁又麻烦,所以可以写个父类或者写个工具Class。

作者:张林

标题:Xamarin android沉浸式状态栏 原文地址:http://blog.csdn.net/kebi007/article/details/70215993

转载随意注明出处



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
25920 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8947 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11029 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11676 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10541 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4448 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
6023 0
+关注
63
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载