------------------------------------------------------------------------------------------------------------------------------
注:第三种方法已过时
setIndicator(label, drawable)这个方法始终不能将标题文字与图标一起显示出来,只有文字标题。
其实就是SDK 4.03(冰激凌)下:只有文字标题显示,图标是不显示的。如果将文字标题设置为空字符串,则此时图标可显示。
对于冰激凌下两全其美的方法,只能是自定义标签卡布局,创建一个包含ImageView和TextView组件的界面布局文件 tab_indicator.xml(layout/tab_indicator.xml),
然后用setIndicator(View view)方法来设置TabSpec的界面布局。
具体方法:http://www.cnblogs.com/lovecode/articles/2652510.html
------------------------------------------------------------------------------------------------------------------------------
前言:今天仔细研究了下TabHost,主要是为了实现微信底部导航栏的功能,最后也给出一个链接,这位老兄用TabHost基本做出来了微信导航栏。
正文
TabHost的实现分为两种,一个是不继承TabActivity,一个是继承自TabActivity;当然了选用继承自TabActivity的话就相对容易一些,下面来看看分别是怎样来实现的吧。
方法一、定义tabhost:不用继承TabActivity
1、布局文件:activity_main.xml
- <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" >
- <Button
- android:id="@+id/button1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="Button" />
- <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" //此id一定要为@android:id/tabs
- android:layout_width="match_parent"
- android:layout_height="wrap_content" >
- </TabWidget>
-
- <FrameLayout
- //此id一定要为@android:id/tabcontent
- android:id="@android:id/tabcontent"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
-
-
- <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="林炳东" />
-
- </LinearLayout>
-
-
- <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="张小媛" />
-
- </LinearLayout>
-
-
- <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="马贝贝" />
-
- </LinearLayout>
- </FrameLayout>
- </LinearLayout>
- </TabHost>
-
- </LinearLayout>
2、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();
-
-
- th.addTab(th.newTabSpec("tab1").setIndicator("标签1",
ResourcesCompat.getDrawable(getResources(),R.drawable.ic_menu_call,null)
).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));
-
-
-
- }
- }
效果图:
![](http://img.blog.csdn.net/20131204182947343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFydmljODgwOTI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
此例源码地址:http://download.csdn.net/detail/harvic880925/6657611 (不要分,欢迎下载)
方法二:Tab的内容分开:不用继承TabActivity
1、第一个tab的XML布局文件,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的XML布局文件,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" //此id一定要为@android:id/tabs
- android:layout_width="match_parent"
- android:layout_height="wrap_content" >
- </TabWidget>
-
- <FrameLayout
- //此id一定要为@android:id/tabcontent
- android:id="@android:id/tabcontent"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
-
- </FrameLayout>
- </LinearLayout>
- </TabHost>
-
- </LinearLayout>
4、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()); 也就是把R.layout.tab1装载一个用于tabHost显示的父布局
-
- m.addTab(m.newTabSpec("tab1").setIndicator("标签1",
ResourcesCompat.getDrawable(getResources(),R.drawable.ic_menu_call,null))
.setContent(R.id.LinearLayout01));
- m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02));
-
- }
- }
效果图:
![](http://img.blog.csdn.net/20131204184737828?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFydmljODgwOTI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
此例源码地址:http://download.csdn.net/detail/harvic880925/6657679 (不要分,欢迎下载)
方法三:继承自TabActivity
1、主布局文件,activity_main.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
-
-
- <LinearLayout
- android:id="@+id/view1"
- 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="张小媛" />
- </LinearLayout>
-
-
- <LinearLayout
- android:id="@+id/view2"
- 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="马贝贝" />
- </LinearLayout>
-
-
- <TextView android:id="@+id/view3"
- android:background="#00ff00"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:text="Tab3"/>
-
- </FrameLayout>
2、JAVA代码:
先将派生自Activity改为TabActivity,然后代码如下:
- public class MainActivity extends TabActivity {
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setTitle("TabDemoActivity");
- TabHost tabHost = getTabHost();
- LayoutInflater.from(this).inflate(R.layout.activity_main,
- tabHost.getTabContentView(), true);
- tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1", getResources().getDrawable(R.drawable.ic_launcher))
- .setContent(R.id.view1));
- tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
- .setContent(R.id.view2));
- tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
- .setContent(R.id.view3));
-
-
-
- tabHost.setOnTabChangedListener(new OnTabChangeListener(){
- @Override
- public void onTabChanged(String tabId) {
- if (tabId.equals("tab1")) {
- }
- if (tabId.equals("tab2")) {
- }
- if (tabId.equals("tab3")) {
- }
- }
- });
-
-
- }
-
- }
效果如下:
![](http://img.blog.csdn.net/20131204185643625?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFydmljODgwOTI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
此例源码地址:http://download.csdn.net/detail/harvic880925/6657791 (不要分,仅供分享)
四:实现微信底部导航栏
效果:
![](http://img.blog.csdn.net/20131204190835000)
参看博客:http://blog.csdn.net/wangkuifeng0118/article/details/7745109
源码地址:http://download.csdn.net/detail/harvic880925/6657767 (不要分,仅供分享)
前言:今天仔细研究了下TabHost,主要是为了实现微信底部导航栏的功能,最后也给出一个链接,这位老兄用TabHost基本做出来了微信导航栏。
正文
TabHost的实现分为两种,一个是不继承TabActivity,一个是继承自TabActivity;当然了选用继承自TabActivity的话就相对容易一些,下面来看看分别是怎样来实现的吧。
方法一、定义tabhost:不用继承TabActivity
1、布局文件:activity_main.xml
- <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" >
- <Button
- android:id="@+id/button1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="Button" />
- <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" >
-
-
- <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="林炳东" />
-
- </LinearLayout>
-
-
- <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="张小媛" />
-
- </LinearLayout>
-
-
- <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="马贝贝" />
-
- </LinearLayout>
- </FrameLayout>
- </LinearLayout>
- </TabHost>
-
- </LinearLayout>
2、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();
-
-
- 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));
-
-
-
- }
- }
效果图:
![](http://img.blog.csdn.net/20131204182947343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFydmljODgwOTI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
此例源码地址:http://download.csdn.net/detail/harvic880925/6657611 (不要分,欢迎下载)
方法二:Tab的内容分开:不用继承TabActivity
1、第一个tab的XML布局文件,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的XML布局文件,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、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());
-
- m.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.LinearLayout01));
- m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02));
-
- }
- }
效果图:
![](http://img.blog.csdn.net/20131204184737828?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFydmljODgwOTI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
此例源码地址:http://download.csdn.net/detail/harvic880925/6657679 (不要分,欢迎下载)
方法三:继承自TabActivity
1、主布局文件,activity_main.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
-
-
- <LinearLayout
- android:id="@+id/view1"
- 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="张小媛" />
- </LinearLayout>
-
-
- <LinearLayout
- android:id="@+id/view2"
- 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="马贝贝" />
- </LinearLayout>
-
-
- <TextView android:id="@+id/view3"
- android:background="#00ff00"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:text="Tab3"/>
-
- </FrameLayout>
2、JAVA代码:
先将派生自Activity改为TabActivity,然后代码如下:
- public class MainActivity extends TabActivity {
-
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setTitle("TabDemoActivity");
- TabHost tabHost = getTabHost();
- LayoutInflater.from(this).inflate(R.layout.activity_main,
- tabHost.getTabContentView(), true);
- tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1", getResources().getDrawable(R.drawable.ic_launcher))
- .setContent(R.id.view1));
- tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")
- .setContent(R.id.view2));
- tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")
- .setContent(R.id.view3));
-
-
-
- tabHost.setOnTabChangedListener(new OnTabChangeListener(){
- @Override
- public void onTabChanged(String tabId) {
- if (tabId.equals("tab1")) {
- }
- if (tabId.equals("tab2")) {
- }
- if (tabId.equals("tab3")) {
- }
- }
- });
-
-
- }
-
- }
效果如下:
![](http://img.blog.csdn.net/20131204185643625?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGFydmljODgwOTI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
此例源码地址:http://download.csdn.net/detail/harvic880925/6657791 (不要分,仅供分享)
四:实现微信底部导航栏
效果:
![](http://img.blog.csdn.net/20131204190835000)
参看博客:http://blog.csdn.net/wangkuifeng0118/article/details/7745109
源码地址:http://download.csdn.net/detail/harvic880925/6657767 (不要分,仅供分享)