TabHost的使用

最新推荐文章于 2024-04-27 11:23:57 发布

_Jason-

最新推荐文章于 2024-04-27 11:23:57 发布

阅读量364

点赞数

分类专栏： Android 文章标签： android tabhost 源码

本文链接：https://blog.csdn.net/jiayouhahao/article/details/51417130

版权

Android 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近刚好用到TabHost，所以把TabHost整理了一下。TabHost现在在很多应用中都能见到，而且TabHost给用户的体验很好，所以还是很有必要学一下，或者在以后开发的过程中都有可能会经常使用到。

TabHost可以在界面中显示多个选项卡，其常用的组件有：TabWidget----TabHost标签页中的按钮，通过点击该按钮来切换选项卡；TabSpec----可以在TabHost中添加多个TabSpec（选项卡对应的界面），在TabHost中创建选项卡（new TabSpec(String tag)），并将该选项卡添加到TabHost中（addTab(tabSpec)），即可实现点击按钮来切换到不同的选项卡中。

主界面java源码：

<span style="font-size:12px;">public class MainActivity extends TabActivity implements OnClickListener{
	public static String TAB_TAG_MESSAGE= "message";
	public static String TAB_TAG_GROUP = "group";
	public static String TAB_TAG_ME = "me";
	public static TabHost mTabHost;
	static final int COLOR1 = Color.parseColor("#838992");
	static final int COLOR2 = Color.parseColor("#b87721");
	</span><span style="font-size:10px;">
	int mCurrentTabId = R.id.channel1;

	
	ImageView mImageBtn1, mImageBtn2, mImageBtn3;
	TextView mCategoryText1, mCategoryText2, mCategoryText3;
	private Intent mMessageIntent, mGroupIntent, mMeIntent;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		prepareIntent();
		setUpIntent();
		prepareView();
	}
	
	private void prepareView() {
		//图片按钮
		mImageBtn1 = (ImageView) findViewById(R.id.imageView1);
		mImageBtn2 = (ImageView) findViewById(R.id.imageView2);
		mImageBtn3 = (ImageView) findViewById(R.id.imageView3);
		//对包含图片和文本的线性布局设置点击事件
		findViewById(R.id.channel1).setOnClickListener(this);
		findViewById(R.id.channel2).setOnClickListener(this);
		findViewById(R.id.channel3).setOnClickListener(this);
		//获取各个线性布局中的文本
		mCategoryText1 = (TextView) findViewById(R.id.textView1);
		mCategoryText2 = (TextView) findViewById(R.id.textView2);
		mCategoryText3 = (TextView) findViewById(R.id.textView3);
	}

	private void setUpIntent() {
		//mTabHost = (TabHost) findViewById(R.id.tabhost);
		//mTabHost.setup();
		mTabHost = getTabHost();
		
		//在TabHost创建标签，然后设置：标题/图标/标签页布局
		mTabHost.addTab(buildTabSpec(TAB_TAG_MESSAGE, "消息", R.drawable.message1, mMessageIntent));
		mTabHost.addTab(buildTabSpec(TAB_TAG_GROUP, "群组", R.drawable.group1, mGroupIntent));      
		mTabHost.addTab(buildTabSpec(TAB_TAG_ME, "我", R.drawable.mime1, mMeIntent));  
		
	}
	
	/**
	 * 设置标签页
	 * @param tag
	 * @param resLabel
	 * @param resIcon
	 * @param content
	 * @return
	 */
	private TabHost.TabSpec buildTabSpec(String tag, String resLabel, int resIcon, final Intent content) {
		return mTabHost.newTabSpec(tag)
					   .setIndicator(resLabel, getResources().getDrawable(resIcon))
					   .setContent(content);
	}

	/**
	 * 配置好Intent
	 */
	private void prepareIntent() {
		mMessageIntent = new Intent(this, InfoActivity.class);
		mGroupIntent = new Intent(this, MyGroupActivity.class);
		mMeIntent = new Intent(this, MePageActivity.class);
	}

	/**
	 * 通过标记tag来修改当前mTabHost显示的tab
	 * @param tab
	 */
	public static void setCurrentTabByTag(String tab) {
		mTabHost.setCurrentTabByTag(tab);
	}
	
	@Override
	public void onClick(View v) {
		if (mCurrentTabId == v.getId()) {
			return ;
		}
		//将图片和文本全部设置成灰色
		mImageBtn1.setImageResource(R.drawable.message1);
		mImageBtn2.setImageResource(R.drawable.group1);
		mImageBtn3.setImageResource(R.drawable.mime1);
		mCategoryText1.setTextColor(COLOR1);
		mCategoryText2.setTextColor(COLOR1);
		mCategoryText3.setTextColor(COLOR1);
		
		int checkedId = v.getId();
		switch (checkedId) {
			case R.id.channel1:
				mTabHost.setCurrentTabByTag(TAB_TAG_MESSAGE);
				mImageBtn1.setImageResource(R.drawable.message);
				mCategoryText1.setTextColor(COLOR2);
				break;
			case R.id.channel2:
				mTabHost.setCurrentTabByTag(TAB_TAG_GROUP);
				mImageBtn2.setImageResource(R.drawable.group);
				mCategoryText2.setTextColor(COLOR2);
				break;
			case R.id.channel3:
				mTabHost.setCurrentTabByTag(TAB_TAG_ME);
				mImageBtn3.setImageResource(R.drawable.mime);
				mCategoryText3.setTextColor(COLOR2);
				break;
	
			default:
				break;
		}
		mCurrentTabId = checkedId;
	}</span>

主界面的布局文件：activity_main.xml

<span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainstrangecloud"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff">
    
    <TabHost 
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000000"
            android:orientation="vertical">
            
            <FrameLayout 
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">
            </FrameLayout>
            
            <TabWidget 
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="gone"/>
            
            <LinearLayout 
                android:id="@+id/mainbottom"
                android:layout_width="match_parent"
                android:layout_height="55dip"
                android:background="#000"
                android:paddingTop="5dip"
                android:orientation="horizontal">
                
                <FrameLayout 
                    style="@style/main_tab_but_linear">
                    
                    <LinearLayout
                        android:id="@+id/channel1"
                        style="@style/main_tab_but_linear">
                        
                        <ImageView
                            android:id="@+id/imageView1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/message"/>
                        
                        <TextView 
                            android:id="@+id/textView1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="消息"
                            android:textColor="#b87721"
                            android:textSize="12sp"
                            android:visibility="gone"/>
                        
                    </LinearLayout>
                    
                </FrameLayout>
                
                <FrameLayout
                    style="@style/main_tab_but_linear">
                    
                    <LinearLayout 
                        android:id="@+id/channel2"
                        style="@style/main_tab_but_linear">
                        
                        <ImageView 
                            android:id="@+id/imageView2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/group1"/>
                        
                        <TextView 
                            android:id="@+id/textView2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="群组"
                            android:textColor="#838992"
                            android:textSize="12sp"
                            android:visibility="gone"/>
                        
                    </LinearLayout>
                    
                </FrameLayout>
                
                <FrameLayout 
                    style="@style/main_tab_but_linear">
                    
                    <LinearLayout
                        android:id="@+id/channel3"
                        style="@style/main_tab_but_linear">
                        
                        <ImageView
                            android:id="@+id/imageView3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:src="@drawable/mime1"/>
                        
                        <TextView 
                            android:id="@+id/textView3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="我"
                            android:textColor="#838992"
                            android:textSize="12sp"
                            android:visibility="gone"/>
                        
                    </LinearLayout>
                    
                </FrameLayout>
                
            </LinearLayout>
            
        </LinearLayout>
        
    </TabHost>
    
</RelativeLayout></span>

主页面布局中使用到的style="@style/main_tab_but_linear"为：

<span style="font-size:10px;"><style name="main_tab_but_linear">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_gravity">center</item>
        <item name="android:clickable">true</item>
        <item name="android:orientation">vertical</item>
    </style></span>

InfoActivity界面java源码：

<span style="font-size:10px;">public class InfoActivity extends Activity{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_info);
	}
}</span>

对应的activity_info布局为：

<span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2"
    android:orientation="vertical" >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="tab--消息"
        android:textColor="#000"
        android:textSize="20sp"/>

</LinearLayout>
</span>

MyGroupActivity界面java源码：

<span style="font-size:10px;">public class MyGroupActivity extends Activity{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_group);
	}
}</span>

对应的activity_group布局为：

<span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2"
    android:orientation="vertical" >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="tab--群组"
        android:textColor="#000"
        android:textSize="20sp"/>

</LinearLayout>
</span>

MePageActivity界面java源码：

<span style="font-size:10px;">public class MePageActivity extends Activity{
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_me);
	}
}</span>

对应的activity_me布局为：

<span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f2f2f2"
    android:orientation="vertical" >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="tab--我"
        android:textColor="#000"
        android:textSize="20sp"/>

</LinearLayout>
</span>

除此之外，还需要在AndroidManifest.xml清单文件中声明三个分页----InfoActivity、MyGroupActivity、MePageActivity。倘若没有对这三个分页进行声明，那么程序将无法运行！！！

以下附带几张真机测试图片。

_Jason-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TabHost的使用

最近刚好用到TabHost，所以把TabHost整理了一下。TabHost现在在很多应用中都能见到，而且TabHost给用户的体验很好，所以还是很有必要学一下，或者在以后开发的过程中都有可能会经常使用到。TabHost可以在界面中显示多个选项卡，其常用的组件有：TabWidget----TabHost标签页中的按钮，通过点击该按钮来切换选项卡；TabSpec----可以在TabHost中添加多
复制链接

扫一扫