【Android UI设计与开发】第15期：顶部标题栏（六）实现悬浮式顶部和底部标题栏效果
转载请注明出处：http://blog.csdn.net/yangyu20121224/article/details/9122517
这篇文章是实现了百度贴吧一个老版本的悬浮式顶部和底部的标题栏效果，觉得还挺有意思的就想跟大家一起分
享一下，也算是对前面学过的UI设计知识的一个总结吧。好的，话不多说，请大家先看效果图。
一、实现效果图
二 、项目结构图
三 、详细代码编写
1、主布局Tab选项卡页面，maintabs_activity.xml：
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/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：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/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：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/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：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/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：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/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：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <RelativeLayout android:id="@+id/info" android:layout_width="fill_parent" android:layout_height="90.0dip" > <ImageView android:id="@+id/photo" android:layout_width="50.0dip" android:layout_height="50.0dip" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="10.0dip" android:background="@drawable/person_photo_bg" android:clickable="true" android:padding="5.0dip" android:src="@drawable/person_photo" /> <LinearLayout android:id="@+id/buttons" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginRight="13.0dip" > <Button android:id="@+id/change" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_change" /> <LinearLayout android:id="@+id/attention" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:gravity="center" android:minHeight="20.0dip" android:minWidth="75.0dip" android:visibility="gone" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:id="@+id/attention_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:textColor="@color/white" android:textSize="15.0sp" /> <ProgressBar android:id="@+id/attention_progress" style="?android:attr/progressBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="3.0dip" android:layout_toRightOf="@id/attention_text" android:indeterminateDrawable="@drawable/progressbar" android:visibility="gone" /> </LinearLayout> </LinearLayout> </LinearLayout> <LinearLayout android:id="@+id/line1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/photo" android:layout_marginLeft="10.0dip" android:layout_marginRight="10.0dip" android:layout_marginTop="5.0dip" android:layout_toLeftOf="@id/buttons" android:layout_toRightOf="@id/photo" android:orientation="horizontal" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1.0" android:singleLine="true" android:textColor="@color/black" android:textSize="15.0sp" /> <ImageView android:id="@+id/sex" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5.0dip" android:layout_marginTop="2.0dip" android:layout_weight="0.0" /> </LinearLayout> </LinearLayout> <TextView android:id="@+id/intro" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@id/line1" android:layout_below="@id/line1" android:layout_marginBottom="10.0dip" android:layout_marginRight="10.0dip" android:layout_marginTop="4.0dip" android:layout_toLeftOf="@id/buttons" android:singleLine="true" android:textColor="#ff484848" android:textSize="13.0dip" /> </RelativeLayout> <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitCenter" android:src="@drawable/list_divider" /> </LinearLayout> </FrameLayout> </LinearLayout>
6、“更多”布局页面，more_activity.xml：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/backgroundcolor" > <!-- 标题栏 --> <LinearLayout android:id="@+id/title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_gravity="top" android:background="@drawable/title_bg" > <TextView android:id="@+id/titel_text" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="10.0dip" android:layout_marginRight="10.0dip" android:layout_weight="1.0" android:gravity="center_horizontal" android:singleLine="true" android:text="@string/more" android:textColor="#ffffffff" android:textSize="15.0sp" /> </LinearLayout> </RelativeLayout>
7、布局页面就写完了，还有一些自定义按钮的资源文件我就不贴了，有需要的同学可以直接下载源码，下面是Java代码部分，主布局Tab选项卡Activity页面，MainActivity.java：
package com.yangyu.mytitlebar02; import android.app.TabActivity; import android.content.Intent; import android.os.Bundle; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.RadioButton; import android.widget.TabHost; import android.widget.TextView; import com.yangyu.mytitlebar02.home.HomeActivity; /** * @author yangyu * 功能描述：主Activity程序入口类 */ public class MainActivity extends TabActivity implements OnCheckedChangeListener { //定义Tab选项卡标示符 private static final String HOME_TAB = "home_tab"; private static final String MENTION_TAB = "mention_tab"; private static final String PERSON_TAB = "person_tab"; private static final String MORE_TAB = "more_tab"; //定义Intent对象 private Intent mHomeIntent,mMentionIntent,mPersonIntent,mMoreIntent; //定义TabHost对象 private TabHost mTabHost; //定义单选按钮对象 private RadioButton homeRb,mentionRb,personRb,moreRb; //定义消息提示文本对象 private TextView mMessageTipsMention,mMessageTipsPerson; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.maintabs_activity); initView(); initData(); } /** * 初始化组件 */ private void initView(){ //得到TabHost mTabHost = getTabHost(); //得到Intent对象 mHomeIntent = new Intent(this, HomeActivity.class); mMentionIntent = new Intent(this, MentionActivity.class); mPersonIntent = new Intent(this, PersonInfoActivity.class); mMoreIntent = new Intent(this, MoreActivity.class); //得到消息提示文本对象 mMessageTipsMention = (TextView) findViewById(R.id.message_mention); mMessageTipsPerson = (TextView) findViewById(R.id.message_person); //得到单选按钮对象 homeRb = ((RadioButton) findViewById(R.id.radio_home)); mentionRb = ((RadioButton) findViewById(R.id.radio_mention)); personRb = ((RadioButton) findViewById(R.id.radio_person_info)); moreRb = ((RadioButton) findViewById(R.id.radio_more)); } /** * 初始化数据 */ private void initData(){ //给单选按钮设置监听 homeRb.setOnCheckedChangeListener(this); mentionRb.setOnCheckedChangeListener(this); personRb.setOnCheckedChangeListener(this); moreRb.setOnCheckedChangeListener(this); //给消息提示文本设置文字 mMessageTipsMention.setText("2"); mMessageTipsPerson.setText("4"); //添加进Tab选项卡 mTabHost.addTab(buildTabSpec(HOME_TAB, mHomeIntent)); mTabHost.addTab(buildTabSpec(MENTION_TAB, mMentionIntent)); mTabHost.addTab(buildTabSpec(PERSON_TAB, mPersonIntent)); mTabHost.addTab(buildTabSpec(MORE_TAB, mMoreIntent)); //设置当前默认的Tab选项卡页面 homeRb.setChecked(true); mTabHost.setCurrentTabByTag(HOME_TAB); } private TabHost.TabSpec buildTabSpec(String tag, Intent intent) { TabHost.TabSpec tabSpec = mTabHost.newTabSpec(tag); tabSpec.setContent(intent).setIndicator(""); return tabSpec; } /** * Tab按钮选中监听事件 */ public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { switch (buttonView.getId()) { case R.id.radio_home: mTabHost.setCurrentTabByTag(HOME_TAB); break; case R.id.radio_mention: mTabHost.setCurrentTabByTag(MENTION_TAB); //VISIBLE:0 意思是可见的;INVISIBILITY:4 意思是不可见的，但还占着原来的空间;GONE:8 意思是不可见的，不占用原来的布局空间 mMessageTipsMention.setVisibility(8); break; case R.id.radio_person_info: mTabHost.setCurrentTabByTag(PERSON_TAB); mMessageTipsPerson.setVisibility(8); break; case R.id.radio_more: mTabHost.setCurrentTabByTag(MORE_TAB); break; default: break; } } } }
8、贴吧首页Activity页面，HomeActivity.java：
package com.yangyu.mytitlebar02.home; import android.app.ActivityGroup; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.FrameLayout; import android.widget.ImageButton; import com.yangyu.mytitlebar02.R; /** * @author yangyu * 功能描述：贴吧首页Activity页面 */ public class HomeActivity extends ActivityGroup implements OnClickListener{ //定义帧布局对象 private FrameLayout mContent; //定义图片按钮对象 private ImageButton myButton,markButton; //定义标示符 private static final String HOME_LIKE_ID = "like"; private static final String HOME_MARK_ID = "mark"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.home_activity); mContent = (FrameLayout) findViewById(R.id.content); //得到按钮对象 myButton = (ImageButton) findViewById(R.id.home_bt_like); markButton = (ImageButton) findViewById(R.id.home_bt_mark); //按钮设置监听 myButton.setOnClickListener(this); markButton.setOnClickListener(this); //初始化默认显示的页面 showMyView(); } /** * 添加视图 */ public void addView(String id, Class<?> clazz) { Intent intent = new Intent(this, clazz); //移除这个布局中所有的组件 mContent.removeAllViews(); mContent.addView(getLocalActivityManager().startActivity(id, intent).getDecorView()); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.home_bt_like: showMyView(); break; case R.id.home_bt_mark: showMarkView(); break; default: break; } } /** * 显示我的贴吧页面 */ private void showMyView(){ addView(HOME_LIKE_ID, MyActivity.class); myButton.setBackgroundResource(R.drawable.home_topbar_bt); myButton.setImageResource(R.drawable.home_bt_like_on); markButton.setBackgroundDrawable(null); markButton.setImageResource(R.drawable.home_bt_mark); } /** * 显示我的标签页面 */ private void showMarkView(){ addView(HOME_MARK_ID, MarkActivity.class); markButton.setBackgroundResource(R.drawable.home_topbar_bt); markButton.setImageResource(R.drawable.home_bt_mark_on); myButton.setBackgroundDrawable(null); myButton.setImageResource(R.drawable.home_bt_like); } }
9、其他的Activity代码我就不贴了，都只是加载了一个布局，例如“提醒”Activity页面，MentionActivity.java：
package com.yangyu.mytitlebar02; import android.app.Activity; import android.os.Bundle; /** * @author yangyu * 功能描述：提醒Activity页面 */ public class MentionActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.mention_activity); } }
