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;// 当前选中的tabIdint 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;@Overrideprotected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stubsuper.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() {@Overridepublic 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 {@Overridepublic 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));                    }                }            }        });    }}

相比较而言，第一种方法的灵活性更大，推荐使用

更多相关文章

随机推荐