Android UI设计与开发第15期实现悬浮式顶部和底部标题栏效果.docx
《Android UI设计与开发第15期实现悬浮式顶部和底部标题栏效果.docx》由会员分享，可在线阅读，更多相关《Android UI设计与开发第15期实现悬浮式顶部和底部标题栏效果.docx（23页珍藏版）》请在冰点文库上搜索。
AndroidUI设计与开发第15期实现悬浮式顶部和底部标题栏效果
【AndroidUI设计与开发】第15期：
实现悬浮式顶部和底部标题栏效果
这篇文章是实现了XX贴吧一个老版本的悬浮式顶部和底部的标题栏效果，觉得还挺有意思的就想跟大家一起分享一下，也算是对前面学过的UI设计知识的一个总结吧。
好的，话不多说，请大家先看效果图。
一、实现效果图二、项目结构图三、详细代码编写
1、主布局Tab选项卡页面，maintabs_activity.xml：
<?
xmlversion="1.0"encoding="utf-8"?
>
<TabHostxmlns:
android="
android:
id="@android:
id/tabhost"
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"><LinearLayout
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
background="@color/backgroundcolor"
android:
orientation="vertical"><FrameLayout
android:
id="@android:
id/tabcontent"
android:
layout_width="fill_parent"
android:
layout_height="0.0dip"
android:
layout_weight="1.0"/><TabWidget
android:
id="@android:
id/tabs"
android:
layout_width="fill_parent"
android:
layout_height="wrap_content"
android:
layout_weight="0.0"
android:
visibility="gone"/><FrameLayout
android:
layout_width="fill_parent"
android:
layout_height="wrap_content"
android:
layout_gravity="bottom"
android:
layout_marginTop="-10.0dip"
android:
background="@drawable/maintab_toolbar_bg"
android:
paddingLeft="7.0dip"
android:
paddingRight="7.0dip"><RadioGroup
android:
id="@+id/main_radio"
android:
layout_width="fill_parent"
android:
layout_height="wrap_content"
android:
gravity="center_vertical"
android:
orientation="horizontal"><RadioButton
android:
id="@+id/radio_home"
style="@style/main_tab_bottom"
android:
drawableTop="@drawable/tabs_home"
android:
text="@string/bar"/><RadioButton
android:
id="@+id/radio_mention"
style="@style/main_tab_bottom"
android:
drawableTop="@drawable/tabs_sort"
android:
text="@string/remind"/><RadioButton
android:
id="@+id/radio_person_info"
style="@style/main_tab_bottom"
android:
drawableTop="@drawable/tabs_search"
android:
text="@string/person_info"/><RadioButton
android:
id="@+id/radio_more"
style="@style/main_tab_bottom"
android:
drawableTop="@drawable/tabs_more"
android:
text="@string/more"/>
</RadioGroup><TextView
android:
id="@+id/message_mention"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="top|left|center"
android:
layout_marginLeft="115.0dip"
android:
layout_marginTop="-5.0dip"
android:
background="@drawable/message_tips"
android:
gravity="center"
android:
textColor="#ffffffff"
android:
textSize="10sp"
android:
visibility="visible"/><TextView
android:
id="@+id/message_person"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="top|left|center"
android:
layout_marginLeft="190.0dip"
android:
layout_marginTop="-5.0dip"
android:
background="@drawable/message_tips"
android:
gravity="center"
android:
textColor="#ffffffff"
android:
textSize="13.0sp"
android:
visibility="visible"/>
</FrameLayout>
</LinearLayout></TabHost>复制代码2、贴吧首页布局页面，home_activity.xml：
<?
xmlversion="1.0"encoding="utf-8"?
>
<RelativeLayoutxmlns:
android="
xmlns:
tools="
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
background="@color/backgroundcolor"
tools:
ignore="ContentDescription"><!
--标题栏--><LinearLayout
android:
id="@+id/home_layout_bar"
android:
layout_width="fill_parent"
android:
layout_height="wrap_content"
android:
layout_alignParentTop="true"
android:
layout_gravity="top"
android:
background="@drawable/title_bg"
android:
gravity="center"><LinearLayout
android:
layout_width="fill_parent"
android:
layout_height="wrap_content"
android:
background="@drawable/home_topbar_bg"
android:
gravity="center"
android:
orientation="horizontal"><!
--我的贴吧--><ImageButton
android:
id="@+id/home_bt_like"
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_gravity="center"
android:
layout_margin="0.0dip"
android:
layout_weight="1.0"
android:
background="@null"
android:
padding="0.0dip"
android:
paddingBottom="2.0dip"
android:
scaleType="center"
android:
src="@drawable/home_bt_like_on"/><!
--我的标签--><ImageButton
android:
id="@+id/home_bt_mark"
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_gravity="center"
android:
layout_margin="0.0dip"
android:
layout_weight="1.0"
android:
background="@null"
android:
padding="0.0dip"
android:
paddingBottom="2.0dip"
android:
scaleType="center"
android:
src="@drawable/home_bt_mark"/>
</LinearLayout>
</LinearLayout><FrameLayout
android:
id="@+id/content"
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_below="@id/home_layout_bar"
android:
layout_marginTop="-12.0dip"/></RelativeLayout>复制代码3、首页贴吧布局页面中的其他两个Activity布局页面，“我的贴吧”Activity布局页面，home_my_activity.xml：
<?
xmlversion="1.0"encoding="utf-8"?
>
<FrameLayoutxmlns:
android="
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"><!
--我的贴吧页面--><ImageView
android:
id="@+id/image_xianjian"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
src="@drawable/xianjian1"
android:
visibility="gone"/><ProgressBar
android:
id="@+id/home_progress_like"
style="?
android:
attr/progressBarStyleInverse"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="center"
android:
indeterminateDrawable="@drawable/progressbar"
android:
visibility="visible"/></FrameLayout>复制代码“我的标签”Activity布局页面，home_mark_activity.xml：
<?
xmlversion="1.0"encoding="utf-8"?
>
<FrameLayoutxmlns:
android="
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_weight="1.0"><!
--我的标签页面--><ImageView
android:
id="@+id/imageView1"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
src="@drawable/xianjian2"/></FrameLayout>复制代码4、“提醒”Activity布局页面，mention_activity.xml：
<?
xmlversion="1.0"encoding="utf-8"?
>
<RelativeLayoutxmlns:
android="
android:
id="@+id/mention"
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
background="#fff1f1f1"><!
--标题栏--><LinearLayout
android:
id="@+id/mention_layout_bar"
android:
layout_width="fill_parent"
android:
layout_height="wrap_content"
android:
layout_alignParentTop="true"
android:
layout_margin="0.0dip"
android:
background="@drawable/title_bg"><LinearLayout
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_margin="0.0dip"
android:
background="@drawable/home_topbar_bg"
android:
orientation="horizontal"><Button
android:
id="@+id/mention_bt_replyme"
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_gravity="center"
android:
layout_margin="0.0dip"
android:
layout_weight="1.0"
android:
background="@drawable/home_topbar_bt"
android:
clickable="false"
android:
gravity="center"
android:
padding="0.0dip"
android:
paddingBottom="2.0dip"
android:
text="@string/mention_replyme"
android:
textColor="#ffffffff"
android:
textSize="13.0sp"/><Button
android:
id="@+id/mention_bt_atme"
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_gravity="center"
android:
layout_margin="0.0dip"
android:
layout_weight="1.0"
android:
background="@null"
android:
clickable="true"
android:
gravity="center"
android:
padding="0.0dip"
android:
paddingBottom="2.0dip"
android:
text="@string/mention_atme"
android:
textColor="#ff90afff"
android:
textSize="13.0sp"/>
</LinearLayout>
</LinearLayout></RelativeLayout>复制代码5、“个人资料”布局页面，personalinfo_activity.xml：
<?
xmlversion="1.0"encoding="utf-8"?
>
<LinearLayoutxmlns:
android="
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
background="@color/white"
android:
orientation="vertical"><LinearLayout
android:
id="@+id/title"
android:
layout_width="fill_parent"
android:
layout_height="wrap_content"
android:
layout_alignParentTop="true"
android:
background="@drawable/title_bg"><Button
android:
id="@+id/back"
style="@style/comm_controls"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="center_vertical"
android:
layout_marginLeft="3dp"
android:
background="@drawable/title_back"
android:
text="@string/back"
android:
textColor="#ffffffff"/><TextView
android:
id="@+id/titel_text"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="center_vertical"
android:
layout_weight="1.0"
android:
gravity="center_horizontal"
android:
textColor="@color/white"
android:
visibility="visible"/><Button
android:
id="@+id/home"
style="@style/comm_controls"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="center_vertical"
android:
layout_marginRight="3dp"
android:
background="@drawable/title_home"
android:
textColor="#ffffffff"/><Button
android:
id="@+id/refresh"
style="@style/comm_controls"
android:
layout_width="wrap_content"
android:
layout_height="wrap_content"
android:
layout_gravity="center_vertical"
android:
background="@drawable/person_refresh"
android:
visibility="gone"/>
</LinearLayout><FrameLayout
android:
layout_width="fill_parent"
android:
layout_height="fill_parent"
android:
layout_marginTop="-14.0dip"
升级会员 