【Android UI设计与开发】第15期：顶部标题栏（六）实现悬浮式顶部和底部标题栏效果

【Android UI设计与开发】第15期：顶部标题栏（六）实现悬浮式顶部和底部标题栏效果

分类： Android UI设计与开发 2013-06-18 22:15  19731人阅读  评论(39)  收藏  举报

悬浮式标题栏 Android TitleBar 顶部标题栏 底部标题栏

转载请注明出处：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);
     }

 }

 

源码下载地址