【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);
    }
    
}