安卓沉浸式标题栏

苹果手机里面的APP，标题栏和状态栏的颜色都是统一的，效果挺好的，这一功能在安卓上也能实现，目前很多应用也是这样的，就像下面图片中显示的这样。

安卓沉浸式标题栏

今天我就来实现这种效果，并达到适配4.4以下及4.4以上的系统。其实实现起来很简单，只需简单的修改些代码即可。而且不仅可以设置颜色，设置背景为一张图片也是可以的！

下面先贴布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="@color/colorPrimary"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.zgcw.wangqiang.mytoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        <strong>android:background="@color/colorPrimary"</strong>
        android:minHeight="?attr/actionBarSize">


        <TextView
            android:id="@+id/titleText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text=""
            android:textColor="@color/colorTitle"
            android:textSize="20sp"/>

    </android.support.v7.widget.Toolbar>

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorTitle">

    </ListView>
</LinearLayout>

这段代码只是一个简单的线性布局，然后用了一个Toolbar, Toolbar中是一个TextViw，用来显示Title，最后面是一个listview。重点是在布局代码中加入一行代码

android:fitsSystemWindows="true"

并且把线性布局和Toolbar的背景色统一：

android:background="@color/colorPrimary"

接下来切换工作模式为Packges下，添加两个文件values-v19和values-v21

安卓沉浸式标题栏

然后打开values 下得styles文件，做如下编辑

<resources>

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

    </style>
    
</resources>

只是添加了一个自定义主题，其他都做任何改变。

接着复制这个styles文件分别到v19和v21下面。

values-v19下得styles代码如下：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    
    <style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
    
</resources>

重点在于必须保证 style name="MyTheme" 在三个styles下保持一致。

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

这两行代码就是设置状态栏为透明和标题栏为透明。

values-v21下得styles代码如下：与v19有所不同：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    
   <style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
    
</resources>

v21下(5.0之后)

<item name="android:windowTranslucentStatus">false</item>

设置为false,不是true.并且需要设置状态栏颜色：意思为透明。

<item name="android:statusBarColor">@android:color/transparent</item>

这样的话，三个文件就设置好了。

然后切换成android状态下，修改一下资源文件AndroidManifest.xml 下得activity

 <activity android:name=".MainActivity"
            android:theme="@style/MyTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

添加

android:theme="@style/MyTheme"

OK 然后回到我们的MainActivity中：

package com.zgcw.wangqiang.mytoolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Window;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private TextView mTextView;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       <strong> supportRequestWindowFeature(Window.FEATURE_NO_TITLE);</strong>
        setContentView(R.layout.activity_main);
        
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mTextView = (TextView) findViewById(R.id.titleText);
        mToolbar.setNavigationIcon(R.mipmap.chevron);
        mTextView.setText("中古车网");
    }
}

重点在于加一行代码，去掉原来的actionBar(其实修改资源文件的主题也能实现，懒得改那个了就在代码里实现了)

supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

然后看下运行效果吧

安卓沉浸式标题栏

这个就是现在的最终效果。如何想背景是一张背景图片，只需修改布局文件和Toolbar的background为一张图片就可以了。

这个只是个最简单的实现方法，大家可以在这个基础上做更多的定制与修改，大致思路就是这样。

秒客网

安卓沉浸式标题栏

相关文章