自定义标题栏之ActionBar与“沉浸式”标题栏

标题栏对于用户导航能起到很重要的作用，也能提高用户体验，所以很多情况下，我们应用都会标题栏，但系统默认的标题栏很丑，我们应用开发一般都不会用系统默认的标题栏，都会自定义自己风格的标题栏。自定义标题栏一般有两种实现形式：一是利用actionbar，一种是直接利用布局来实现（当然利用布局来实现需要用到辅助手段）。

一、自定义actionbar实现标题栏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#87CEFF"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/backword"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:orientation="horizontal"
            android:padding="5dp" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/back" />

            <TextView
                android:id="@+id/tabName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/contacts"
                android:textColor="@android:color/black"
                android:textSize="16dp" />
        </LinearLayout>

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerInParent="true"
            android:background="@drawable/photo" />

        <TextView
            android:id="@+id/contact_edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:padding="10dp"
            android:text="@string/edit"
            android:textColor="@android:color/black"
            android:textSize="16dp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/contactname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:paddingBottom="10dp"
            android:textColor="@android:color/black" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/message" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="5dp"
                android:text="@string/Message"
                android:textColor="@android:color/black" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="28dp"
                android:layout_height="28dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="2dp"
                android:background="@drawable/phone" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="5dp"
                android:text="@string/app_name"
                android:textColor="@android:color/black" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="28dp"
                android:layout_height="28dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="2dp"
                android:background="@drawable/email" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="5dp"
                android:text="@string/Email"
                android:textColor="@android:color/black" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/videophone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/facetime" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="5dp"
                android:text="@string/video"
                android:textColor="@android:color/black" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

以上是actionbar的布局，上面布局的高度 很明显超出了系统默认标题栏的高度，需重新定义actionbar的高度：

    <style name="mActionBarStyle" parent="AppBaseTheme">
        <item name="android:actionBarSize">123dp</item>
    </style>

然后再加载自定义actionbar代码：

		actionbar=getActionBar();
		actionbar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
		actionbar.setCustomView(R.layout.contactinformation_bar);

运行效果如下：

但这种利用自定义actionbar来实现标题栏一般是在拥有单独activity情况下，如果我们是在一个activity中有几个fragment的情况下，这种方式就不合适了（之前逛贴吧的时候也碰到有朋友提过类似的需求），因为不同fragment的标题可能不同（这种利用actionbar还可以解决），甚至有的fragment没有标题栏。这种情况，个人觉得直接利用布局来实现会更好。

二、直接利用布局实现标题栏（“沉浸式”标题栏，实则使状态栏透明）

沉浸式标题栏的实现分为以下几步：1.使状态栏透明；2.使状态栏的颜色与布局一致。我们看一下这样是不是就能实现我们想要的效果了。这里我们的布局与上面actionbar的布局一样，不过需在相应activity的onCreat()函数中加入如下代码：

		getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//使状态栏透明

然后运行程序，效果如下：

可是我们发现布局往上跑了，并没有达到预期效果。我的理解是使状态栏透明的那行代码相当于使状态栏悬浮，要想达到预期效果还需在根布局加上如下代码：

    android:clipToPadding="true" //使布局与状态栏分离
    android:fitsSystemWindows="true"

实现效果如下：

效果是不是还不错呢。如有不对之处欢迎指正！！