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>