本次项目中要求实现底部标签的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)); } } } }); } }
相比较而言,第一种方法的灵活性更大,推荐使用