Android TabHost 选项卡

最新推荐文章于 2023-11-08 14:42:24 发布

千翎丿

最新推荐文章于 2023-11-08 14:42:24 发布

阅读量295

点赞数 1

分类专栏： Android布局文章标签： TabHost Android选项卡

本文链接：https://blog.csdn.net/qq_37835161/article/details/86029527

版权

Android布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

TabHost选项卡，一共有三种设置方式，下面分别进行阐述

一、java代码中设置——继承TabActivity

Activity代码

TabActivity.getTabHost()——>通过inflate填充布局到TabHost——>添加标签页addTab

package com.iqoo.tabtest;

import android.app.TabActivity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class MainActivity extends TabActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		//获得TabHost
		/*
		step1: TabHost.getTabContentView()：get the FrameLayout which holds tab content
		step2: inflate activity_main.xml to the gotten FrameLayout
		*/
		TabHost mTabHost = this.getTabHost();
		LayoutInflater.from(this).inflate(R.layout.activity_main, mTabHost.getTabContentView(), true);

		//添加标签页
		//新建标签（通过tag）、设置标签页名、设置标签页内容
		mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator("tab1").setContent(R.id.tab_1));
		mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator("tab2").setContent(R.id.tab_2));

		//标签页点击事件
		mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				if(tabId.equals("tab_1")){
					//点击了tab1
				}else if(tabId.equals("tab_2")){
					//点击了tab2
				}
			}
		});
	}
}

layout代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/tab">

    <LinearLayout
        android:id="@+id/tab_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="第一个标签页" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="第二个标签页"/>
    </LinearLayout>

</FrameLayout>

效果图
在这里插入图片描述
布局构成解释：

二、.xml中利用TabHost，无需继承TabActivity

layout布局文件
TabHost包含子部分：
一个TabWidget标签页，用于用户点击；
另一个FrameLayout用于显示当前标签页的具体内容

<?xml version="1.0" encoding="utf-8"?>
<TabHost
    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"
    tools:context=".MainActivity"
    android:id="@+id/tab">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- FrameLayout布局，采用系统固定ID-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <!-- 第一个tab的布局 -->
            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="第一个tab" />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

            <!-- 第二个tab的布局 -->
            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="第二个tab" />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>

        </FrameLayout>

        <!-- TabWidget组件，采用系统固定ID-->
        <TabWidget
            android:id="@android:id/tabs"
            android:background="#C1CDC1"
            android:divider="#000000"
            android:showDividers="middle"
            android:dividerPadding="2dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </TabWidget>
    </LinearLayout>

</TabHost>

java源文件
通过findViewById获取TabHost——>TabHost.setup()初始化——>addTab添加标签页

package com.iqoo.tabtest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.TabHost;

public class MainActivity extends AppCompatActivity {
	private final String TAG = getClass().getSimpleName();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		Log.d(TAG, "onCreate()");

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		//获得TabHost，并初始化
		TabHost mTabHost = findViewById(R.id.tab);
		mTabHost.setup();

		//添加标签页
		mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator("tab1").setContent(R.id.tab1));
		mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator("tab2").setContent(R.id.tab2));

		//标签页点击事件
		mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				if(tabId.equals("tab_1")){
					//点击了tab1
				}else if(tabId.equals("tab_2")){
					//点击了tab2
				}
			}
		});
	}
}

【备注】：
其中，一般可在Activity注册时，添加以下两个属性：

android:windowSoftInputMode="adjustResize"	//打开软键盘时，自动调节Activity窗体
android:screenOrientation="portrait"		//设置Activity窗体始终保持竖向，即：关闭Activity窗体翻转

效果图

三、类同方法二，但每个Tab项单独分开

此种方法和方法二类似，只是方法二中每个标签页内容都写在都一个xml文件中；而此种方法会将每个
标签页内容写到不同的文件中，再在代码中进行添加整合

主布局文件.xml

仅仅包含一个TabHost及其子件：FrameLayout和TabWidget
(LinearLayout是为了将这两个子件分割开来，防止重合到一起)

<?xml version="1.0" encoding="utf-8"?>
<TabHost
  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"
  tools:context=".MainActivity"
  android:id="@+id/tab">

  <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">

      <!-- FrameLayout布局，采用系统固定ID-->
      <FrameLayout
          android:id="@android:id/tabcontent"
          android:layout_width="fill_parent"
          android:layout_height="0dp"
          android:layout_weight="1"
          android:orientation="vertical">
      </FrameLayout>

      <!-- TabWidget组件，采用系统固定ID-->
      <TabWidget
          android:id="@android:id/tabs"
          android:background="#C1CDC1"
          android:divider="#000000"
          android:showDividers="middle"
          android:dividerPadding="2dp"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
      </TabWidget>
  </LinearLayout>

</TabHost>

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/tab1">

  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="第一个tab"/>
      
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tab2">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="第二个tab"/>

</LinearLayout>

Activity.java代码

获取TabHost——>将两个tab.xml文件实例化为view对象并添加到主布局中去——>添加标签页

package com.iqoo.tabtest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.widget.TabHost;

public class MainActivity extends AppCompatActivity {
	private final String TAG = getClass().getSimpleName();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		Log.d(TAG, "onCreate()");

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		//获得TabHost，并初始化
		TabHost mTabHost = findViewById(R.id.tab);
		mTabHost.setup();

		//将两个布局文件 实例化成 view对象，并且添加到主布局文件中去
		//Instantiates a layout XML file into its corresponding View objects.
		LayoutInflater.from(this).inflate(R.layout.tab1, mTabHost.getTabContentView(), true);
		LayoutInflater.from(this).inflate(R.layout.tab2, mTabHost.getTabContentView(), true);

		//添加标签页
		mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator("tab1").setContent(R.id.tab1));
		mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator("tab2").setContent(R.id.tab2));

		//标签页点击事件
		mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				if(tabId.equals("tab_1")){
					//点击了tab1
				}else if(tabId.equals("tab_2")){
					//点击了tab2
				}
			}
		});
	}
}

效果图同方法二的效果图

看到的代码不是自己的，动手写出来的代码才是自己的…

千翎丿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android TabHost 选项卡

TabHost选项卡，一共有三种设置方式，下面分别进行阐述一、java代码中设置——继承TabActivityActivity代码package com.iqoo.tabtest;import android.app.TabActivity;import android.support.v7.app.AppCompatActivity;import android.os.Bund...
复制链接

扫一扫

专栏目录