android底部标签页的tab实现
本次项目中要求实现底部标签的tabActivity，
方法一：因为发现利用tabhost自身的tabwidget很难实现要求，
因此在布局文件中将tabwidget属性设置为不可见，自己进行布局。
<?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="#000000" android:orientation="vertical" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1"> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:visibility="gone" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/homepage_tab_bg" android:paddingTop="5px" android:orientation="horizontal" > <LinearLayout android:id="@+id/home_jingling" style="@style/home_tab_list" > <ImageView android:id="@+id/home_jingling_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/homepage_icon_jingling_s" /> <TextView android:id="@+id/home_jingling_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="精灵" /> </LinearLayout> <LinearLayout android:id="@+id/home_friend" style="@style/home_tab_list"> <ImageView android:id="@+id/home_friend_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/homepage_icon_friend_uns" /> <TextView android:id="@+id/home_friend_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="朋友"/> </LinearLayout> <LinearLayout android:id="@+id/home_setting" style="@style/home_tab_list"> <ImageView android:id="@+id/home_setting_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:src="@drawable/homepage_icon_setting_uns" /> <TextView android:id="@+id/home_setting_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="设置"/> </LinearLayout> </LinearLayout> </LinearLayout> </TabHost>
在上述代码中，注意tabhost，tabwidget，framelayout的id不能随意指定，这样才能够在继承了tabactivity的java文件中通过getTabhost,getTabwidet来得到对应的控件。
为了同样达到点击自制的标签实现页面的跳转功能，需要在activity文件中,建立一个类实现view.onclicklistener()；
package com.magic.activity;
import com.magic.entity.LoginInfo;
import com.magic.R;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TextView;
//这个类相对够复杂的
public class HomeActivity extends TabActivity {
// 使用类本身作为监听器？
Resources res;
TabHost tabHost;
private ImageView jinglingImage;
private ImageView friendImage;
private ImageView settingImage;
private TextView jinglingText;
private TextView friendText;
private TextView settingText;
//动画元素
private Animation left_in;
private Animation left_out;
private Animation right_in;
private Animation right_out;
// 当前选中的tabId
int curTabId=R.id.home_jingling;
//下面这些变量在根据tabtag找到对应的tab时候会用到
private final static String JINGLINGTAG ="tag1";
private final static String FRIENDTAG="tab2";
private final static String SETTINGTAG="tab3";
LoginInfo loginInfo;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
loginInfo=(LoginInfo)this.getIntent().getSerializableExtra("loginInfo");
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.setContentView(R.layout.homelayout);
res = this.getResources();
//初始化并且加载动画
loadAnim();
loadIntent();
// 更具资源文件找到各个组件,并为对应的组件设置监听事件
initView();
tabHost.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View arg0, int arg1, KeyEvent arg2) {
switch(arg2.getAction()){
case KeyEvent.ACTION_DOWN:
if(arg2.getKeyCode()==KeyEvent.KEYCODE_BACK&&arg2.getRepeatCount()==0)
jinglingImage.performClick();
}
return false;
}
});
// tabHost.getCurrentTabView().setOnKeyListener(new)
}
private void loadAnim() {
left_in= AnimationUtils.loadAnimation(this, R.anim.left_in);
left_out=AnimationUtils.loadAnimation(this, R.anim.left_out);
right_in=AnimationUtils.loadAnimation(this, R.anim.right_in);
right_out=AnimationUtils.loadAnimation(this, R.anim.right_out);
}
private void initView() {
jinglingImage = (ImageView) this.findViewById(R.id.home_jingling_image);
jinglingText = (TextView) this.findViewById(R.id.home_jingling_text);
friendImage = (ImageView) this.findViewById(R.id.home_friend_image);
friendText = (TextView) this.findViewById(R.id.home_friend_text);
settingImage = (ImageView) this.findViewById(R.id.home_setting_image);
settingText = (TextView) this.findViewById(R.id.home_setting_text);
// 给初始的图像设置高亮,这里借助颜色资源文件
jinglingText.setTextColor(res.getColor(R.color.color2));
// 三个控件共用一个对象应该可以把
View.OnClickListener listener = new Listener();
LinearLayout jingling = (LinearLayout) this
.findViewById(R.id.home_jingling);
jingling.setOnClickListener(listener);
LinearLayout setting = (LinearLayout) this
.findViewById(R.id.home_setting);
setting.setOnClickListener(listener);
LinearLayout friend = (LinearLayout) this
.findViewById(R.id.home_friend);
friend.setOnClickListener(listener);
}
private void loadIntent() {
Intent jinglingIntent = new Intent(this, JinglingActivity.class);
tabHost = this.getTabHost();
Intent intent=new Intent();
intent.putExtra("loginInfo", loginInfo);
intent.setClass(this, JinglingActivity.class);
tabHost.addTab(tabHost
.newTabSpec(JINGLINGTAG)
.setIndicator(res.getString(R.string.jingling),
res.getDrawable(R.drawable.homepage_icon_jingling_uns))
.setContent(intent));
tabHost.addTab(tabHost
.newTabSpec(FRIENDTAG)
.setIndicator(res.getString(R.string.friend),
res.getDrawable(R.drawable.homepage_icon_friend_uns))
.setContent(new Intent(this, FriendActivity.class)));
tabHost.addTab(tabHost
.newTabSpec(SETTINGTAG)
.setIndicator("tab3")
.setIndicator(res.getString(R.string.setting),
res.getDrawable(R.drawable.homepage_icon_setting_uns))
.setContent(new Intent(this, SettingActivity.class)));
}
private class Listener implements View.OnClickListener {
@Override
public void onClick(View v) {
if (curTabId == v.getId()) {
return;
}
jinglingImage
.setImageResource(R.drawable.homepage_icon_jingling_uns);
friendImage.setImageResource(R.drawable.homepage_icon_friend_uns);
settingImage.setImageResource(R.drawable.homepage_icon_setting_uns);
int color1 = res.getColor(R.color.color1);
int color2 = res.getColor(R.color.color2);
jinglingText.setTextColor(res.getColor(R.color.color1));
friendText.setTextColor(color1);
settingText.setTextColor(color1);
int selectedId = v.getId();
final boolean flag;
//吐过选中的是左侧的tab，那么向左边退出，否则，如果选中的是右侧的tab，就向着右边退出
if (curTabId < selectedId) {
flag = true;
} else {
flag = false;
}
if (flag) {
//如果选中的是当前选项卡左边的选项卡，那么当前的选项卡从左侧退出
tabHost.getCurrentView().startAnimation(left_out);
}else {
tabHost.getCurrentView().startAnimation(right_out);
}
switch(selectedId){
case R.id.home_jingling :
tabHost.setCurrentTabByTag(JINGLINGTAG);
jinglingImage.setImageResource(R.drawable.homepage_icon_jingling_s);
jinglingText.setTextColor(color2);
break;
case R.id.home_friend:
tabHost.setCurrentTabByTag(FRIENDTAG);
friendImage.setImageResource(R.drawable.homepage_icon_friend_s);
friendText.setTextColor(color2);
break;
case R.id.home_setting:
tabHost.setCurrentTabByTag(SETTINGTAG);
settingImage.setImageResource(R.drawable.homepage_icon_setting_s);
settingText.setTextColor(color2);
break;
}
if(flag){
//没有弄清楚getcurrenttabview与getcurrentview的区别
//tabHost.getCurrentTabView().startAnimation(left_in);
tabHost.getCurrentView().startAnimation(left_in);
}else{
tabHost.getCurrentView().startAnimation(right_in);
}
curTabId=selectedId;
}
}
}
这样这个问题得到了圆满的解决。
方法2：
之前自己尝试过使用另外一种方法，但是发现其tab标签不能由用户自己灵活定制
对应的布局文件是
<?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:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!-- 实现Tab标签的居底主要是通过设置属性 android:layout_weight="1" --> <!-- 还要注意FrameLayout标签的位置，要写在TabWidget标签的前面 --> <FrameLayout android:id="@android:id/tabcontent" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="fill_parent" /> <TabWidget android:id="@android:id/tabs" android:layout_alignParentBottom="true" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> </TabHost>
对应的前台java文件是
package com.android.tabhost; import android.app.TabActivity; import android.content.Intent; import android.content.res.Resources; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.widget.TabHost; import android.widget.TabWidget; import android.widget.TextView; import android.widget.TabHost.OnTabChangeListener; /** * <一句话功能简述>定制居底的TabHost<BR> * <功能详细描述> * * @author chenli * @version [版本号, 2011-1-27] * @see [相关类/方法] * @since [产品/模块版本] */ public class MyTabHostFive extends TabActivity { /** * TabHost控件 */ private TabHost mTabHost; /** * TabWidget控件 */ private TabWidget mTabWidget; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); mTabHost = this.getTabHost(); /* 去除标签下方的白线 */ mTabHost.setPadding(mTabHost.getPaddingLeft(), mTabHost.getPaddingTop(), mTabHost.getPaddingRight(), mTabHost.getPaddingBottom() - 5); Resources rs = getResources(); Intent layout1intent = new Intent(); layout1intent.setClass(this, Layout1.class); TabHost.TabSpec layout1spec = mTabHost.newTabSpec("layout1"); layout1spec.setIndicator("layou1", rs.getDrawable(android.R.drawable.stat_sys_phone_call)); layout1spec.setContent(layout1intent); mTabHost.addTab(layout1spec); Intent layout2intent = new Intent(); layout2intent.setClass(this, Layout2.class); TabHost.TabSpec layout2spec = mTabHost.newTabSpec("layout2"); layout2spec.setIndicator("layout2", rs.getDrawable(android.R.drawable.stat_sys_phone_call_forward)); layout2spec.setContent(layout2intent); mTabHost.addTab(layout2spec); Intent layout3intent = new Intent(); layout3intent.setClass(this, Layout3.class); TabHost.TabSpec layout3spec = mTabHost.newTabSpec("layout3"); layout3spec.setIndicator("layout3", rs.getDrawable(android.R.drawable.stat_sys_phone_call_on_hold)); layout3spec.setContent(layout3intent); mTabHost.addTab(layout3spec); /* 对Tab标签的定制 */ mTabWidget = mTabHost.getTabWidget(); for (int i = 0; i < mTabWidget.getChildCount(); i++) { /* 得到每个标签的视图 */ View view = mTabWidget.getChildAt(i); /* 设置每个标签的背景 */ if (mTabHost.getCurrentTab() == i) { view.setBackgroundDrawable(getResources().getDrawable( R.drawable.number_bg_pressed)); } else { view.setBackgroundDrawable(getResources().getDrawable( R.drawable.number_bg)); } /* 设置Tab间分割竖线的颜色 */ // tabWidget.setBackgroundColor(Color.WHITE); /* 设置Tab间分割竖线的背景图片 */ // tabWidget.setBackgroundResource(R.drawable.icon); /* 设置tab的高度 */ mTabWidget.getChildAt(i).getLayoutParams().height = 50; TextView tv = (TextView) mTabWidget.getChildAt(i).findViewById( android.R.id.title); /* 设置tab内字体的颜色 */ tv.setTextColor(Color.rgb(49, 116, 171)); } /* 当点击Tab选项卡的时候，更改当前Tab标签的背景 */ mTabHost.setOnTabChangedListener(new OnTabChangeListener() { @Override public void onTabChanged(String tabId) { for (int i = 0; i < mTabWidget.getChildCount(); i++) { View view = mTabWidget.getChildAt(i); if (mTabHost.getCurrentTab() == i) { view.setBackgroundDrawable(getResources().getDrawable( R.drawable.number_bg_pressed)); } else { view.setBackgroundDrawable(getResources().getDrawable( R.drawable.number_bg)); } } } }); } }
相比较而言，第一种方法的灵活性更大，推荐使用
