android tabHost的使用

最新推荐文章于 2021-06-17 23:24:46 发布

glj0007

最新推荐文章于 2021-06-17 23:24:46 发布

阅读量300

点赞数

分类专栏： TabHost 文章标签： android 移动开发

本文链接：https://blog.csdn.net/glj0007/article/details/106212157

版权

TabHost 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们可以使用系统自带的tabHost控件来做标签。
1。加入tabHost控件，XML布局如下：

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <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"
                    android:orientation="vertical">




                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">



                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">



                </LinearLayout>
            </FrameLayout>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />


        </LinearLayout>
    </TabHost>

    <TextView
        android:id="@+id/tabcount"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:text="TextView"
        android:gravity="center"
        app:layout_constraintBottom_toTopOf="@+id/tab_host"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.59000003" />
</androidx.constraintlayout.widget.ConstraintLayout>

上面代码创建的是一个包含3个标签并在标签位于下部的标签栏。默认创建的话标签栏位于上面。其实只要修改TabWidget标签的位置即可。
注意：TabHost控件自动生成标签ID不要修改，否则会报错。
标签的样式我使用了自定义，如果只是简单使用，可以忽略以下XML。

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center">


        <ImageView
            android:id="@+id/tabview_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"   />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/icontext"
            android:text="10"
            android:layout_toRightOf="@+id/tabview_icon"
            android:layout_marginLeft="-50dp"
            android:layout_marginBottom="-20dp"
            android:textColor="@color/colorwhite"
            android:background="@drawable/tabview_text"
            android:gravity="center" />
    </RelativeLayout>
       <TextView
        android:id="@+id/tabveiw_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:layout_gravity="center"
         android:textColor="@drawable/tabview_select"
        android:gravity="center" />

</LinearLayout>

设置完样式，开始代码。网上有一种方式让Activity继承TabActivity类的方法，二种方法差别不是很大，我们不使用这种方法，有感兴趣的可去自行查找。(重新编辑新增了标签栏右上角文本显示）

样式XML代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
<solid android:color="@color/colortabtext"/>
<size android:height="30dp"
      android:width="30dp"/>
    <padding android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp"/>

</shape>

主程序代码如下：

package com.example.tabview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.provider.ContactsContract;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView tabcount;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabcount=(TextView)findViewById(R.id.tabcount);

        final TabHost tabHost=(TabHost)findViewById(R.id.tab_host);//获取TabHost控件
        tabHost.setup();//初始化，如果类继承TabActivity，则初始化不能使用这个指令
        //设置标签名称，标签名称和图片不能同时设置，如果不使用自定义格式，可通过以下方法设置标签名或图标
        //tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("本地音乐",null).setContent(R.id.tab1));
        //tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("网络音乐",null).setContent(R.id.tab2));
        //tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("在线音乐",null).setContent(R.id.tab3));

        //采用自定义样式设定标签
        /*添加tab*/
        for (int i = 0; i < 3; i++) {
            View view = LayoutInflater.from(this).inflate(R.layout.tabview, null, false);
            TextView textView = (TextView) view.findViewById(R.id.tabveiw_text);
            ImageView imageView = (ImageView) view.findViewById(R.id.tabview_icon);
            TextView textView1=(TextView)view.findViewById(R.id.icontext);

            switch (i) {
                case 0:
                    textView.setText("寄存器");
                    textView1.setVisibility(View.GONE);
                    imageView.setImageResource(R.drawable.reg1);
                    tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator(view).setContent(R.id.tab1));
                    break;
                case 1:
                    textView.setText("报表");
                    textView1.setVisibility(View.GONE);
                    imageView.setImageResource(R.drawable.report1);
                    tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator(view).setContent(R.id.tab2));
                    break;
                case 2:
                    textView.setText("报警");
                    imageView.setImageResource(R.drawable.alarm1);
                    tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator(view).setContent(R.id.tab3));
                    break;

            }

        }

        //设置事件监听
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                //以下为动态改变文本颜色，可以使用选择器来实现
                //全部恢复初始色

                for(int i=0;i<3;i++){
                    ImageView imageView=(ImageView)tabHost.getTabWidget().getChildTabViewAt(i).findViewById(R.id.tabview_icon);
                    switch (i){
                        case 0: imageView.setImageResource(R.drawable.reg1);
                        break;
                        case 1: imageView.setImageResource(R.drawable.report1);
                        break;
                        case 2: imageView.setImageResource(R.drawable.alarm1);
                        break;

                    }

                }
//                if (tabHost.getCurrentTabTag()==tabId){//被选中改变颜色
//                    ((TextView)tabHost.getCurrentTabView().findViewById(R.id.tabveiw_text))
//                            .setTextColor(getResources().getColor(R.color.clolorTab));
//                }
                switch (tabId){

                    case "tab1":
                        ((ImageView)tabHost.getCurrentTabView().findViewById(R.id.tabview_icon)).setImageResource(R.drawable.reg);
                        tabcount.setText("本地音乐");
                        break;
                    case "tab2":
                        ((ImageView)tabHost.getCurrentTabView().findViewById(R.id.tabview_icon)).setImageResource(R.drawable.report);
                        tabcount.setText("网络音乐");
                        break;
                    case "tab3":
                        ((ImageView)tabHost.getCurrentTabView().findViewById(R.id.tabview_icon)).setImageResource(R.drawable.alarm);
                        tabcount.setText("在线音乐");
                        break;

                }
            }
        });

        //初次进入第一个TAB颜色
        for(int i=0;i<3;i++){
            ImageView imageView=(ImageView)tabHost.getTabWidget().getChildTabViewAt(i).findViewById(R.id.tabview_icon);
            switch (i){
                case 0: imageView.setImageResource(R.drawable.reg);
                    break;
                case 1: imageView.setImageResource(R.drawable.report1);
                    break;
                case 2: imageView.setImageResource(R.drawable.alarm1);
                    break;

            }

        }



    }
}