码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-01-06 09:58:27      阅读:425      评论:0      收藏:0      [点我收藏+]

标签: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>




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

标签:android   标题栏   今日头条   

原文地址:http://blog.csdn.net/hantangsongming/article/details/42424249

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!