android沉浸式状态栏实现

传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别。这样就在一定程度上牺牲了视觉宽度,界面面积变小。
沉浸模式的状态栏和主界面完全融为了一体,在设计上有不同的视觉感受。

我们先上两张图,很容易看出区别:

技术分享      技术分享

Android在4.4的时候增加了透明状态栏与导航栏的功能,依托于这个新特性,我们可以开始跟随潮流,实现Android的沉浸式状态栏
其实上图展示的这个关于界面的代码非常简单
/**
 * 关于界面
 *
 * @author SuS
 * @time 2015.07.29
 */
public class AboutActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.<span id="9_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="9_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=layout&k0=layout&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="9" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">layout</span></a></span>.activity_about);

        setImmerseLayout(findViewById(R.id.common_back));

        initBackButton();
        setTitleBar(R.string.durian_about);
    }

    @Override
    protected void onResume() {
        super.onResume();
    }

    @Override
    protected void onPause() {
        super.onPause();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

}
现在请注意setImmerseLayout()这个方法,这个方法是在BaseActivity中实现的
public class BaseActivity extends FragmentActivity {
    private static final String TAG = "BaseActivity";

  ...............
   
    public void initBackButton() {
        ImageView backButton = (ImageView) this.findViewById(R.id.durian_back_image);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                <span id="7_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="7_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=finish&k0=finish&kdi0=0&luki=2&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="7" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">finish</span></a></span>Activity();
            }
        });
    }
   
    protected void setImmerseLayout(View view) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window window = getWindow();
                /*window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);*/
                window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

            int statusBarHeight = ScreenUtil.getStatusBarHeight(this.getBaseContext());
            view.setPadding(0, statusBarHeight, 0, 0);
        }
    }
   
    public void <span id="8_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="8_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=finish&k0=finish&kdi0=0&luki=2&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="8" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">finish</span></a></span>Activity() {
        finish();
        overridePendingTransition(R.anim.push_right_in, R.anim.push_right_out);
    }
   
    public void setTitleBar(int id) {
        TextView tvName = (TextView) findViewById(R.id.durian_title_text);
        tvName.setText(id);
    }
}
使用
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
或者
 window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
都可以使状态栏透明,但是关键是下面这两行代码,如果没有这两行,会是这样
技术分享
那么这两行神奇的代码的原理是什么?
我们先看一下ScreenUtil中的getStatusBarHeight方法
  /**
     * 用于获取状态栏的高度。 使用Resource对象获取(推荐这种方式)
     *
     * @return 返回状态栏高度的像素值。
     */
    public static int getStatusBarHeight(Context context) {
        int <span id="6_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="6_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=res&k0=res&kdi0=0&luki=3&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="6" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">res</span></a></span>ult = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen",
                "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

这里是获得状态栏的高度,然后我们就可以通过设置common_back的padding属性
即:view.setPadding(0, statusBarHeight, 0, 0)来达到终极效果
但是这里还是需要注意细节的,首先大家应该理解padding的含义:内边距
那么再看一下common_back的布局文件
在activity_about.xml中我们是使用include引用的common_back

 <include
        android:id="@+id/common_back"
        layout="@layout/common_back" />

common_back的布局如下:
<FrameLayout xmlns:android="http://schemas.android.com/apk/<span id="0_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="0_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=res&k0=res&kdi0=0&luki=3&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="0" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">res</span></a></span>/android"
    xmlns:<span id="1_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="1_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=tools&k0=tools&kdi0=0&luki=5&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="1" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">tools</span></a></span>="http://schemas.android.com/tools"
    android:id="@+id/durian_head_<span id="2_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="2_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=layout&k0=layout&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="2" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">layout</span></a></span>"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/common_top_bg" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="51dp" >

        <ImageView
            android:id="@+id/durian_back_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:<span id="3_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="3_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=layout&k0=layout&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="3" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">layout</span></a></span>_centerVertical="true"
            android:layout_marginLeft="18dp"
            android:padding="5dp"
            android:src="@drawable/btn_back_selector" />

        <TextView
            android:id="@+id/durian_title_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="@color/common_text_black"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/durian_titlebar_image1"
            android:<span id="4_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="4_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=layout&k0=layout&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="4" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">layout</span></a></span>_width="51dp"
            android:layout_height="51dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="centerInside"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/durian_titlebar_image2"
            android:layout_width="51dp"
            android:layout_height="51dp"
            android:<span id="5_nwp" style="padding: 0px; width: auto; height: auto; float: none;"><a target=_blank id="5_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=18&is_app=0&jk=23d2359219f3fd51&k=layout&k0=layout&kdi0=0&luki=6&n=10&p=baidu&q=65035100_cpr&rb=0&rs=1&seller_id=1&sid=51fdf3199235d223&ssp2=1&stid=0&t=tpclicked3_hc&td=1836545&tu=u1836545&u=http%3A%2F%2Fwww%2Ebubuko%2Ecom%2Finfodetail%2D1004629%2Ehtml&urlid=0" target="_blank" mpid="5" style="padding: 0px; color: rgb(51, 51, 51); text-decoration: none;"><span style="padding: 0px; color: rgb(0, 0, 255); width: auto; height: auto;">layout</span></a></span>_centerVertical="true"
            android:layout_toLeftOf="@id/durian_titlebar_image1"
            android:scaleType="centerInside"
            android:visibility="gone" />
    </RelativeLayout>

</FrameLayout>

这里我们使用了一层FrameLayout包裹住RelativeLayout,这里有什么玄机那,其实这里就是为了
方便上面那两行神奇的代码起作用,这样我们就能设置RelativeLayout相对于FrameLayout的内边距为状态栏的高度了
也就完美的达到了沉浸式状态栏的目的,而且保证导航栏的相对位置不变。

这里存在一个common_back作为一个基准来控制高度达到状态栏的高度,如果一个activity只有一个背景图片或者不以类似导航栏的空间作为基准的话,怎么实现沉浸式状态栏,例如达到这种状态
我们只需要在代码这样设置
   protected void setImmerseLayout(View view) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window window = getWindow();
                /*window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);*/
                window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

           /* int statusBarHeight = ScreenUtil.getStatusBarHeight(this.getBaseContext());
            view.setPadding(0, statusBarHeight, 0, 0);*/
        }
    }

然后在当前activity的布局文件中加入这两句话
 android:fitsSystemWindows="true"  
 android:clipToPadding="true"

这时候状态栏的背景与Activity的整个大背景融合在一起了
技术分享

总结:

基于以上的方法介绍,我们可以实现状态栏与导航栏以及状态栏与页面大背景的沉浸式体验。

其实上面也可以看出代码封装的一些技巧:如让我们所有的activity继承BaseActivity,这样像

 setImmerseLayout(findViewById(R.id.common_back));
        initBackButton();
        setTitleBar(R.string.durian_about);
诸如此类的操作实现起来省时省力了!

欢迎拍砖 、评论!

今天的博客就写到这里了,抓紧回家了,要不外面又要下大雨了!


版权声明:本文为博主原创文章,未经博主允许不得转载。

android沉浸式状态栏实现

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值