您的位置：首页 > 产品设计 > UI/UE

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

2013-09-29 13:46 996 查看

转载请注明出处：http://blog.csdn.net/yangyu20121224/article/details/9122517

这篇文章是实现了百度贴吧一个老版本的悬浮式顶部和底部的标题栏效果，觉得还挺有意思的就想跟大家一起分

享一下，也算是对前面学过的UI设计知识的一个总结吧。好的，话不多说，请大家先看效果图。

一、实现效果图

二、项目结构图

三、详细代码编写

1、主布局Tab选项卡页面，maintabs_activity.xml：

[html] view
plaincopy

<?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：

[html] view
plaincopy

<?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：

[html] view
plaincopy

<?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：

[html] view
plaincopy

<?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：

[html] view
plaincopy

<?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：

[html] view
plaincopy

<?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：

[html] view
plaincopy

<?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：

[java] view
plaincopy

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：

[java] view
plaincopy

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：

[java] view
plaincopy

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

}

}

源码下载地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航