20、Tabs底部导航栏

一、Tabs基本使用

TabHost的实现有两种方式：

第一种继承TabActivity，从TabActivity中用getTabHost()方法获取TabHost。各个Tab中的内容在布局文件中定义就行了。

第二种方式，不继承TabActivity，在布局文件中定义TabHost即可，但是TabWidget的id必须是@android:id/tabs，FrameLayout的id必须是@android:id/tabcontent。

1.1、继承TabActivity的方式

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 定义TabHost组件 -->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><!-- 定义第一个标签页的内容 --><LinearLayoutandroid:id="@+id/tab01"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><!-- 定义两个TextView用于显示标签页中的内容 --><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="孙悟空-2011/07/12" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="猪八戒-2011/07/10" /></LinearLayout><!-- 定义第二个标签页的内容 --><LinearLayoutandroid:id="@+id/tab02"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="萨僧-2011/07/11" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="唐僧-2011/07/10" /></LinearLayout><!-- 定义第三个标签页的内容 --><LinearLayoutandroid:id="@+id/tab03"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="孙悟空-2011/07/12" /><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="萨僧-2011/07/08" /></LinearLayout>
</TabHost>

MainActivity.java

public class HelloTabHost extends TabActivity {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//调用TabActivity的getTabHost()方法获取TabHost对象TabHost tabHost = getTabHost();//设置使用TabHost布局LayoutInflater.from(this).inflate(R.layout.main, tabHost.getTabContentView(),true);//添加第一个标签页tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator("已接电话").setContent(R.id.tab01));//添加第二个标签页,并在其标签上添加一个图片tabHost.addTab(tabHost.newTabSpec("tab02").setIndicator("未接电话",getResources().getDrawable(R.drawable.icon)).setContent(R.id.tab02));//添加第三个标签页tabHost.addTab(tabHost.newTabSpec("tab03").setIndicator("已拨电话").setContent(R.id.tab03));}}

运行效果

1.2、不继承TabActivity的方式

布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent" android:orientation="vertical"tools:context=".MainActivity" ><TabHostandroid:id="@+id/tabhost"android:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><TabWidgetandroid:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content" ></TabWidget><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="match_parent"android:layout_height="match_parent" ><!-- 第一个tab的布局 --><LinearLayoutandroid:id="@+id/tab1"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="tab1" /></LinearLayout><!-- 第二个tab的布局 --><LinearLayoutandroid:id="@+id/tab2"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="tab2" /></LinearLayout><!-- 第三个tab的布局 --><LinearLayoutandroid:id="@+id/tab3"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="tab3" /></LinearLayout></FrameLayout></LinearLayout></TabHost>
</LinearLayout>

MainActivity.java

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);TabHost th=(TabHost)findViewById(R.id.tabhost);th.setup();            //初始化TabHost容器//在TabHost创建标签，然后设置：标题／图标／标签页布局th.addTab(th.newTabSpec("tab1").setIndicator("标签1",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));th.addTab(th.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));th.addTab(th.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));    //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标
    }
}

1.3、Tab的内容分开，不继承TabActivity

1.第一个tab的布局文件:tab1.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/LinearLayout01" android:layout_width="wrap_content"android:layout_height="wrap_content"><TextView android:text="我是标签1的内容喔"android:id="@+id/TextView01" android:layout_width="wrap_content"android:layout_height="wrap_content"></TextView></LinearLayout>

2.第二个tab的布局文件:tab2.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/LinearLayout02"android:layout_width="wrap_content"android:layout_height="wrap_content"><TextView android:text="标签2"android:id="@+id/TextView01" android:layout_width="wrap_content"android:layout_height="wrap_content" />
</LinearLayout>

3.主布局文件,activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" ><TabHostandroid:id="@+id/tabhost"         android:layout_width="match_parent"android:layout_height="match_parent" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><TabWidgetandroid:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content" ></TabWidget><FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="match_parent"android:layout_height="match_parent" > </FrameLayout></LinearLayout></TabHost>
</LinearLayout>

4.MainActivity.java

public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);TabHost m = (TabHost)findViewById(R.id.tabhost);m.setup();LayoutInflater i=LayoutInflater.from(this);i.inflate(R.layout.tab1, m.getTabContentView());i.inflate(R.layout.tab2, m.getTabContentView());//动态载入XML，而不需要Activitym.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.LinearLayout01));  m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02)); }
}

二、Tabs底部导航

a）activity_main布局文件

布局文件请参看附件demo1

b)MainActivity实现

public class MainActivity extends TabActivity {private TabHost mTabHost;private ImageView mImgA;private ImageView mImgB;private ImageView mImgC;private ImageView mImgD;   @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {mTabHost = getTabHost();mTabHost.addTab(mTabHost.newTabSpec("a").setIndicator("A").setContent(new Intent(this, ActivityA.class)));mTabHost.addTab(mTabHost.newTabSpec("b").setIndicator("B").setContent(new Intent(this, ActivityB.class)));mTabHost.addTab(mTabHost.newTabSpec("c").setIndicator("C").setContent(new Intent(this, ActivityC.class)));mTabHost.addTab(mTabHost.newTabSpec("d").setIndicator("D").setContent(new Intent(this, ActivityD.class)));mImgA = (ImageView) findViewById(R.id.img_a);mImgB = (ImageView) findViewById(R.id.img_b);mImgC = (ImageView) findViewById(R.id.img_c);mImgD = (ImageView) findViewById(R.id.img_d);}public void onTabClicked(View view){switch (view.getId()) {case R.id.rl_a:mImgA.setImageResource(R.drawable.img_a_press);mImgB.setImageResource(R.drawable.img_b);mImgC.setImageResource(R.drawable.img_c);mImgD.setImageResource(R.drawable.img_b);mTabHost.setCurrentTabByTag("a");break;case R.id.rl_b:mImgB.setImageResource(R.drawable.img_b_press);mImgA.setImageResource(R.drawable.img_a);mImgC.setImageResource(R.drawable.img_c);mImgD.setImageResource(R.drawable.img_b);mTabHost.setCurrentTabByTag("b");break;case R.id.rl_c:mImgC.setImageResource(R.drawable.img_c_press);mImgA.setImageResource(R.drawable.img_a);mImgB.setImageResource(R.drawable.img_b);mImgD.setImageResource(R.drawable.img_b);mTabHost.setCurrentTabByTag("c");break;case R.id.rl_d:mImgD.setImageResource(R.drawable.img_b_press);mImgA.setImageResource(R.drawable.img_a);mImgB.setImageResource(R.drawable.img_b);mImgC.setImageResource(R.drawable.img_c);mTabHost.setCurrentTabByTag("d");break;}}
}

1.1、Fragment实现底部导航

a) activity_main

布局文件请参看demo2。

b) 布局中用到的状态选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/img_a_press" android:state_selected="true"/><item android:drawable="@drawable/img_a"/>
</selector>

c) fragment示例

public class FragmentA extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_a, container,false);return view;}
}

d) MainActivity的实现

public class MainActivity extends FragmentActivity {private Fragment[] mFragments;private ImageView[] mImgeViews;private TextView[] mTextViews;private int mIndex;private int mCurrentTabIndex;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {FragmentA fragmentA = new FragmentA();FragmentB fragmentB = new FragmentB();FragmentC fragmentC = new FragmentC();FragmentD fragmentD = new FragmentD();mFragments = new Fragment[] { fragmentA, fragmentB,fragmentC, fragmentD };mImgeViews = new ImageView[4];mImgeViews[0] = (ImageView) findViewById(R.id.iv_a);mImgeViews[1] = (ImageView) findViewById(R.id.iv_b);mImgeViews[2] = (ImageView) findViewById(R.id.iv_c);mImgeViews[3] = (ImageView) findViewById(R.id.iv_d);mImgeViews[0].setSelected(true);mTextViews = new TextView[4];mTextViews[0] = (TextView) findViewById(R.id.tv_a);mTextViews[1] = (TextView) findViewById(R.id.tv_b);mTextViews[2] = (TextView) findViewById(R.id.tv_c);mTextViews[3] = (TextView) findViewById(R.id.tv_d);mTextViews[0].setTextColor(0xFF45C01A);FragmentTransaction beginTransaction = getSupportFragmentManager().beginTransaction();beginTransaction.replace(R.id.container, mFragments[0]).addToBackStack(null);beginTransaction.commit();}public void onTabClicked(View view) {switch (view.getId()) {case R.id.rl_a:    mIndex = 0;break;case R.id.rl_b:    mIndex = 1;break;case R.id.rl_c:        mIndex = 2;break;case R.id.rl_d:    mIndex = 3;break;}FragmentTransaction trx = getSupportFragmentManager().beginTransaction();trx.replace(R.id.container, mFragments[mIndex]).addToBackStack(null);trx.commit();mImgeViews[mCurrentTabIndex].setSelected(false);mImgeViews[mIndex].setSelected(true);mTextViews[mCurrentTabIndex].setTextColor(0xFF999999);mTextViews[mIndex].setTextColor(0xFF45C01A);mCurrentTabIndex = mIndex;}
}

1.2、Fragment + ViewPager

a) activity_main

布局文件请参看demo3。

b)布局文件中的状态选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/img_a_press" android:state_selected="true"/><item android:drawable="@drawable/img_a"/>
</selector>

c) 使用到的fragment类

public class FragmentA extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_a, container,false);return view;}
}

d) MainActivity中的实现

public class MainActivity extends ActionBarActivity implements OnPageChangeListener {private int mIndex;private ViewPager mViewPager;private MyFragmentPagerAdapter mAdapter;private ImageView mImgeA;private ImageView mImgeB;private ImageView mImgeC;private ImageView mImgeD;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());initView();}private void initView() {mImgeA = (ImageView) findViewById(R.id.iv_a);mImgeB = (ImageView) findViewById(R.id.iv_b);mImgeC = (ImageView) findViewById(R.id.iv_c);mImgeD = (ImageView) findViewById(R.id.iv_d);TextView mTvA = (TextView) findViewById(R.id.tv_a);TextView mTvB = (TextView) findViewById(R.id.tv_b);TextView mTvC = (TextView) findViewById(R.id.tv_c);TextView mTvD = (TextView) findViewById(R.id.tv_d);mViewPager = (ViewPager) findViewById(R.id.vpager);mViewPager.setAdapter(mAdapter);mViewPager.setCurrentItem(0);mImgeA.setSelected(true);mViewPager.setOnPageChangeListener(this);}public void onTabClicked(View view) {switch (view.getId()) {case R.id.rl_a:    mIndex = 0;mImgeA.setSelected(true);break;case R.id.rl_b:    mIndex = 1;mImgeB.setSelected(true);break;case R.id.rl_c:        mIndex = 2;mImgeC.setSelected(true);break;case R.id.rl_d:    mIndex = 3;mImgeD.setSelected(true);break;}updateSelect(mIndex);mViewPager.setCurrentItem(mIndex);}public void updateSelect(int index){if(index == 0){mImgeA.setSelected(true);mImgeB.setSelected(false);mImgeC.setSelected(false);mImgeD.setSelected(false);}else if (index == 1) {mImgeA.setSelected(false);mImgeB.setSelected(true);mImgeC.setSelected(false);mImgeD.setSelected(false);}else if (index == 2) {mImgeA.setSelected(false);mImgeB.setSelected(false);mImgeC.setSelected(true);mImgeD.setSelected(false);}else if (index == 3) {mImgeA.setSelected(false);mImgeB.setSelected(false);mImgeC.setSelected(false);mImgeD.setSelected(true);}}/**ViewPager监听的方法*/@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int index) {updateSelect(index);}
}

e) 使用到的FragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {private FragmentA fragmentA;private FragmentB fragmentB;private FragmentC fragmentC;private FragmentD fragmentD;public MyFragmentPagerAdapter(FragmentManager fm) {super(fm);fragmentA = new FragmentA();fragmentB = new FragmentB();fragmentC = new FragmentC();fragmentD = new FragmentD();}@Overridepublic int getCount() {return 4;}@Overridepublic Fragment getItem(int position) {Fragment fragment = null;switch (position) {case 0:fragment = fragmentA;break;case 1:fragment = fragmentB;break;case 2:fragment = fragmentC;break;case 3:fragment = fragmentD;break;}return fragment;}
}

源码地址：

链接：http://pan.baidu.com/s/1slCEUG9 密码：nitz

转载于:https://www.cnblogs.com/pengjingya/p/5509137.html