Android之仿今日头条标题栏效果

学习Android应用开发已经有一段时间了，对涉及应用开发的主要基础知识已经有了一定的了解，学习过程中写的博客被我整理成立了一个专栏《Android应用开发基础》。但是基本上写的代码都是一些单一知识点的演示Demo，与一个完整的产品相差甚远。要具备开发复杂的产品级应用的能力，在掌握了应用开发的基础知识的前提下，最好的方法莫过于模仿别人开发的优秀应用。在模仿中循序渐进，以程序员角度去看待每一个APP是如何实现的，它有什么优缺点，并从中提升自己。模范别人应用其实就是一种开发的学习手段，因为如果自己去开发，没有UI没有交互流程，那样的话，可能会比较难下手，当有了别人的交互流程和一些资源，你就可以去自己考虑如果实现相关功能，如何达到类似效果。可能你的方法没那么完善，实现效果没原版的那么绚丽，可是这些都带有你的思想，这就足够了。

今日头条新闻客户端是我平时使用比较多的一个Android应用，以它作为模仿目标是一个不错的选择。本系列文章将循序渐进，先实现今日头条的标题栏效果。

今日头条的标题栏没有在Android系统定义的标题栏区域，而是把它附加到Acitivity的contentView下。所以首先要去掉Android系统标题栏，方法如下：

修改\res\values里面的style.xml文件

在AppTheme主题下增加一个条目

<item name="android:windowNoTitle">true</item>

实例：TouTiaoTitleBarDemo

运行效果：

布局视图层次结构：

代码清单：

style资源文件：styles.xml

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="android:windowNoTitle">true</item>
    </style>

    <style name="main_title_bar_style">
        <item name="android:background">@drawable/bg_titlebar_main</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">@dimen/title_bar_height</item>
    </style>
</resources>

布局文件：activity_main.xml

<RelativeLayout android:id="@+id/main_layout"
    android:background="@color/activity_bg_color"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <RelativeLayout android:id="@+id/title_bar" style="@style/main_title_bar_style">
        <FrameLayout android:id="@+id/top_head_container"
            android:paddingLeft="10.0dip"
            android:paddingRight="10.0dip"
            android:layout_width="wrap_content"
             android:layout_height="fill_parent">
            <ImageView android:layout_gravity="center_vertical"
                android:id="@+id/top_head"
                android:contentDescription="@string/app_name"
                android:background="@drawable/bg_head"
                android:src="@drawable/default_round_head"
                android:padding="2.0dip"
                android:layout_width="@dimen/head_size"
                android:layout_height="@dimen/head_size"
                android:scaleType="fitXY" />
        </FrameLayout>
        <ImageView android:gravity="center"
            android:id="@+id/top_more"
            android:contentDescription="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_marginRight="12.0dip"
            android:src="@drawable/right_drawer"
            android:scaleType="centerInside"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />
        <RelativeLayout android:id="@+id/title_click_layout"
            android:paddingLeft="13.0dip"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_centerInParent="true">
            <FrameLayout android:id="@+id/title_parent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true">
                <ImageView android:layout_gravity="center"
                    android:id="@+id/title_recent"
                    android:contentDescription="@string/app_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/title" />
            </FrameLayout>
            <ImageView android:id="@+id/top_refresh"
                android:contentDescription="@string/app_name"
                android:padding="3.0dip"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/refreshicon_titlebar"
                android:layout_toRightOf="@id/title_parent"
                android:layout_centerVertical="true" />
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>