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"> <!-- 定义第一个标签页的内容 --> <LinearLayout android:id="@+id/tab01" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <!-- 定义两个TextView用于显示标签页中的内容 --> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="孙悟空-2011/07/12" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="猪八戒-2011/07/10" /> </LinearLayout> <!-- 定义第二个标签页的内容 --> <LinearLayout android:id="@+id/tab02" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="萨僧-2011/07/11" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="唐僧-2011/07/10" /> </LinearLayout> <!-- 定义第三个标签页的内容 --> <LinearLayout android:id="@+id/tab03" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="孙悟空-2011/07/12" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="萨僧-2011/07/08" /> </LinearLayout> </TabHost>
MainActivity.java
public class HelloTabHost extends TabActivity { @Override public 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" > <TabHost android:id="@+id/tabhost" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" > </TabWidget> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 第一个tab的布局 --> <LinearLayout android:id="@+id/tab1" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="tab1" /> </LinearLayout> <!-- 第二个tab的布局 --> <LinearLayout android:id="@+id/tab2" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="tab2" /> </LinearLayout> <!-- 第三个tab的布局 --> <LinearLayout android:id="@+id/tab3" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android: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 { @Override protected 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" > <TabHost android:id="@+id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" > </TabWidget> <FrameLayout android: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 { @Override protected 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,而不需要Activity m.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; @Override protected 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 { @Override public 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; @Override protected 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 { @Override public 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; @Override protected 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监听的方法*/ @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public 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(); } @Override public int getCount() { return 4; } @Override public 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