【Android UI设计与开发】第15期:顶部标题栏(六)实现悬浮式顶部和底部标题栏效果
2015-07-22 09:46
791 查看
【Android UI设计与开发】第15期:顶部标题栏(六)实现悬浮式顶部和底部标题栏效果
转载请注明出处: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);
}
}
源码下载地址
相关文章推荐
- IOS中UIview需要知道的一些事情:setNeedsDisplay、setNeedsLayout
- queue的用法以及优先级priority的用法
- hdu contest day1 1001 OO’s Sequence
- IOS 开发之UITableview的基本创建
- OO’s Sequence 2015多校联合1001
- iOS总结控件二(UIButton)
- rabbitmq之back queue草稿
- rabbitmq method之queue.declare
- EF6 CodeFirst+Repository+Ninject+MVC4+EasyUI实践(四)
- LeetCode N-Queens
- LeetCode N-Queens
- RequireJS 模块化加载框架使用
- 【思路题】【多校第一场】【1001.OO’s Sequence】
- 【思路题】【多校第一场】【1001.OO’s Sequence】
- hdu 5288 OO’s Sequence
- iOS开发——UI基础-KVO
- Unique Binary Search Trees II
- STL算法之unique和unique_copy
- iOS开发——UI基础-KVC
- [Android]模拟器不能启动,报错:Cannot set up guest memory 'android_arm': Invalid argument