1. 话不多说，先上图，有需要再往下看

• 对于沉浸式的说法是不准确，具体可以去百度

1. 状态栏颜色与标题栏颜色一致

Title.gif

2. 滑动渐变标题栏

scrolltitle.gif

2. 说说大概写法

1. Demo 整体是基于 github 上的开源框架

1. compile 'com.roughike:bottom-bar:2.3.1'

   • 地址：https://github.com/roughike/BottomBar

2. compile 'com.youth.banner:banner:1.4.10'

   • 地址：https://github.com/youth5201314/banner

3. 用法什么的，网站上面写的很清楚了，有不懂的可以共同探讨

2. 具体实现：标题栏

1. 标题栏使用的是 Material Design 风格的 ToolBar

2. 使用 ToolBar，我们需要隐藏原来的 ActionBar

3. AndroidManifest.xml 中修改：

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
   

4. 项目中标题栏样式大部分是可以使用公共的布局

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#3f51b4"
        >
    
        <RelativeLayout
            android:id="@+id/mLeftAction"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerVertical="true"
            android:background="?attr/selectableItemBackground"
            android:visibility="visible"
            >
    
            <ImageView
                android:id="@+id/mLeftImg"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerInParent="true"
                android:src="@drawable/back"
                android:visibility="gone"
                />
    
            <TextView
                android:id="@+id/mLeftLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="关闭"
                android:textColor="#ffffff"
                android:visibility="gone"
                />
    
        </RelativeLayout>
    
        <TextView
            android:id="@+id/mMiddleLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="12dp"
            android:gravity="center"
            android:singleLine="true"
            android:text="@string/app_name"
            android:textColor="#ffffff"
            android:textSize="18sp"
            />
    
        <RelativeLayout
            android:id="@+id/mRightAction"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="?attr/selectableItemBackground"
            android:paddingLeft="15dp"
            android:paddingRight="15dp"
            android:visibility="visible"
            >
    
            <ImageView
                android:id="@+id/mRightImg"
                android:layout_width="28dp"
                android:layout_height="28dp"
                android:layout_centerInParent="true"
                android:layout_centerVertical="true"
                android:scaleType="centerCrop"
                android:src="@drawable/setting"
                android:visibility="gone"
                />
    
            <TextView
                android:id="@+id/mRightLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="余额说明"
                android:textColor="#ffffff"
                android:textSize="16sp"
                android:visibility="gone"
                />
    
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
   

5. 有特殊样式的标题栏，使用 ToolBar 自己定制，比如搜索首页

3. 具体实现：透明状态栏

1. 最开始的做法就是去掉状态栏，然后給状态栏的添加一个 View,View 的背景色设置和 TitleBar 的颜色一致，可以达到要求的效果

2. 但是，以上做法并不适用于 状态栏+标题栏 滑动渐变的效果

3. so so 在网上搜了 N 多资料，整合后达到了这一效果(站在巨人的肩膀上)

4. 具体资料出自哪里，已经记不起来了，如果有侵权的话，@我 删除

5. 具体用法很简单，只用传入一个当前页面的 ToolBar 对象即可：

   
   w.png

6. StatusBarUtil 关键代码：

    /** 增加View的paddingTop,增加的值为状态栏高度 (智能判断，并设置高度)*/
    public static void setPaddingSmart(Context context, View view) {
        if (Build.VERSION.SDK_INT >= 16) {
            ViewGroup.LayoutParams lp = view.getLayoutParams();
            if (lp != null && lp.height > 0) {
                lp.height += getStatusBarHeight(context);//增高
            }
            view.setPadding(view.getPaddingLeft(), view.getPaddingTop() + getStatusBarHeight(context),
                    view.getPaddingRight(), view.getPaddingBottom());
        }
    }
   

4. 具体实现：滑动渐变

1. 实现思路：滑动监听 banner 的高度，设置背景色

2. 控件的高度需要通过 LayoutParams 去获取

    ViewGroup.LayoutParams bannerParams = mBanner.getLayoutParams();
        ViewGroup.LayoutParams titleBarParams = mToolbar.getLayoutParams();
        h = bannerParams.height - titleBarParams.height;
   
        mScrollView.setScrollViewListener(new MyScrollView.ScrollViewListener() {
            private int lastScrollY = 0;
   
            private int color = ContextCompat.getColor(mContext, R.color.colorAccent) & 0x00ffffff;
   
            @Override
            public void onScrollChanged(MyScrollView scrollView, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
   
                if (lastScrollY < h && scrollY >= 0) {
                    scrollY = Math.min(h, scrollY);
                    mScrollY = scrollY > h ? h : scrollY;
                    mToolbar.setBackgroundColor(((255 * mScrollY / h) << 24) | color);
                }
                lastScrollY = scrollY;
            }
        });
   
    mToolbar.setBackgroundColor(0);
   

3. 测试结果：

   1. 模拟器： 4.4 到 7.1 可以达到预期
   2. 真机： 小米note 6.0,三星 7.1 可以达到预期
   3. Github - https://github.com/bbccoolly/TransTitleBar