Android仿百度外卖APP首页状态/标题栏效果(沉浸式状态栏)

前言：经常用百度外卖APP订外卖，看到首页导航栏，往下拉就显示背景透明，往上滑就显示红色背景，该觉很有意思，现在很多App使用这样的效果，专业名词叫沉浸式状态栏效果，决定学习一下。说到这里，一下就暴露了宅男的本质了，老是叫外卖，^o^。

概要：本文采用的是在上下滑动过程中，改变状态栏位置布局的背景色，以达到预期的效果，涉及到不同API版本下对状态栏背景设置的问题，对相关知识不了解的请先自行学习下。

正文：

1，首先我们从最基本的开始，做好准备工作，我们这里大概要实现的效果是：

下滑效果如左图，上滑，隐藏头部图片，效果如有图，状态栏颜色透明。

我们先来布局，把基本的UI实现了，然后添加沉浸式效果，这里我们用到的布局，一个标题栏在顶部，一个ListView，标题栏在ListVIew的外面，很简单，直接上布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    tools:context="demo.bys.com.navigatorchangedemo.MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentTop="true"
        android:background="#FF0000">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="#FFFFFF"
            android:text="标题栏"
            android:textSize="25sp"
            />

    </RelativeLayout>



</RelativeLayout>

我们给ListView绑定下数据：

private String [] arr = {"item1","item2","item3","item4","item5","item6","item7",
            "item8","item9","item10","item11",
            "item12","item13","item14","item15",
            "item16","item17","item18","item19"};

    /**
     * 查找组件
     */
    private void findViewById(){
        listView = (ListView) findViewById(R.id.listView);
        rl_title = (RelativeLayout) findViewById(R.id.rl_title);
    }

    /**
     * listView绑定数据
     */
    private void bindListArr(){
        listView.setAdapter(new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,arr));
    }

看下效果：

现在给ListView添加HeaderView：

private ImageView imageView;

        imageView = new ImageView(this);
        imageView.setBackgroundResource(R.drawable.bg);
        ListView.LayoutParams params = new ListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,600);
        imageView.setLayoutParams(params);
        listView.addHeaderView(imageView);

效果如图：

下面我们实现状态栏透明化，系统自带导航栏取消，这里涉及到版本问题，所以我们新建values-19v和values-21v两个values文件夹，并重建下面的styles.xml文件：

values-v19/styles.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

values-v21/styles.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <!--Android 5.x开始需要把颜色设置透明，否则导航栏会呈现系统默认的浅灰色-->
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

效果如下：

最后我们来实现上下滑动的时候，标题栏的变化，展示状态栏沉浸式效果，这里我们实现的原理是，下滑listVIew的时候，标题栏的颜色渐渐变透明，上滑的时候，有透明变不透明。所以这里需要监听LIstVIew的滚动事件，根据滚动的距离和方向，然后对标题栏进行更改：

    /**
     * 获取滚动的高度
     * @return
     */
    private int getScroll(){
        View v = listView.getChildAt(0);//获取listVIew的第一个子View
        if(v instanceof ImageView){//如果是继承自ImageView
            if(v != null){
                int top = v.getTop();//获取图片顶部的坐标
                return -top;//这里作为我们滚动的值返回
            }else{
                return 0;
            }
        }else{//如果不是继承自ImageView，说明已经把headerView完全滚出了屏幕,这里减去了标题栏的高度
            return imageView.getHeight() - (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,70,getResources().getDisplayMetrics());
        }
    }

    /**
     * 根据滚动的高度，改变标题栏透明度
     * @param scroll
     */
    private void changeTitle(int scroll){
        int height = imageView.getHeight() - (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,70,getResources().getDisplayMetrics());
        float alpha = 1f/height;
        float a = alpha*scroll;//这里范围从0~1，0完全透明，1不透明

        //滚动变化限制，超过这个值，滚动不做改变
        if(a >= 1){//不透明
            rl_title.getBackground().setAlpha((int)255);
        }else{
            a = a * 255;//这里转换成背景透明度的值0~255
            rl_title.getBackground().setAlpha((int)a);
        }

    }

listView的滚动事件监听：

         listView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView absListView, int i) {

            }

            @Override
            public void onScroll(AbsListView absListView, int i, int i1, int i2) {
                changeTitle(getScroll());
            }
        });

到这就实现了我们要的效果了：

android4.4

android5.0

明天就要回家了，这是年前的最后一篇博客。祝大家新年快乐！来年升职加薪、当上总经理、出任ceo、迎娶白富美，走向人生巅峰！！！！！

CSDN源码地址：http://download.csdn.net/detail/liujibin1836591303/9743835