切换卡布局TabHost

定义一个java继承一个TabActivity(此方法过时!)

package com.example.ui5;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class Usectivity extends TabActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_usectivity);
        //获取选项卡布局(在xml里关联系统id就可以知道getTabHost获取的是哪一个的选卡布局)
        TabHost host = getTabHost();//获取布局的操作
        //构建一个选项卡          表示         setIndicator(名字,图标)              设置内容
        TabSpec setContent = host.newTabSpec("001").setIndicator("卡通").setContent(R.id.tab_pem_1);
        TabSpec setContent2 = host.newTabSpec("002").setIndicator("真人").setContent(R.id.tab_pem_2);
        //设置选项
        host.addTab(setContent);
        host.addTab(setContent2);
        
    }
}

xml里面写

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"//关联系统id,布局(Android)
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
    <LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<TabWidget 
    android:id="@android:id/tabs"//选项卡
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    ></TabWidget>
<FrameLayout 
    android:id="@android:id/tabcontent"//选项卡内容
      android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
    <ImageView 
        android:id="@+id/tab_pem_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/llllll"
        />
     <ImageView 
          android:id="@+id/tab_pem_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/nglong"
        android:scaleType="fitXY"
         />
</FrameLayout>

</LinearLayout>

</TabHost>

运行效果

image.png

另一种的方式(不继承用了setup获取操作)

java主打

package com.example.tabhost_text1;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends Activity {
    TabHost tabHost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabHost=(TabHost) findViewById(R.id.tabhost);
        tabHost.setup();//找到tabwidget和framelayout
        //添加标签页
        TabSpec tab1=tabHost.newTabSpec("tab1");
        //一参是标签子,二参是图片
        tab1.setIndicator("首页",getResources().getDrawable(R.drawable.i6));
        //指定标签                    加载FrameLayout布局里面的指定内容
        tab1.setContent(R.id.line1);
        tabHost.addTab(tab1);//添加标签 
        
        
        //添加标签页
                TabSpec tab2=tabHost.newTabSpec("tab2");
                //一参是标签子,二参是图片
                tab2.setIndicator("第二页",getResources().getDrawable(R.drawable.i7));
                //指定标签                    加载FrameLayout布局里面的指定内容
                tab2.setContent(R.id.line2);
                tabHost.addTab(tab2);//添加标签 
    
                
                //添加标签页
                TabSpec tab3=tabHost.newTabSpec("tab2");
                //一参是标签子,二参是图片
                tab3.setIndicator("第三页",getResources().getDrawable(R.drawable.i8));
                //指定标签                    加载FrameLayout布局里面的指定内容
                tab3.setContent(R.id.line3);
                tabHost.addTab(tab3);//添加标签 
                
    }
}

主xml打注意系统的id

<TabHost
    android:id="@+id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
        <TabWidget 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"
            
            ></TabWidget>
        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            
            >
            <!-- 首页 -->
            <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/line1"
                >
                <TextView 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="首页"
                android:textSize="30dp"
                android:gravity="center"
                /></LinearLayout>
                <!-- 第二页 -->
            <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/line2"
                >
                <TextView 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="第二页"
                android:textSize="30dp"
                android:gravity="center"
                />
            </LinearLayout>
                <!-- 第三页 -->
            <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/line3"
                >
                <TextView 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="第三页"
                android:textSize="30dp"
                android:gravity="center"
                />
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

效果图(老版本的Android会显示图片)

image.png

自定义标签的样式:tab1.setIndicator(createView("首页"));里面写了一个view的方法

View createView(String text){//返回一个viwe的对象
        View view = View.inflate(this, R.layout.tab, null);//加载布局
        TextView textview=(TextView)view.findViewById(R.id.textview);//初始化数据
        textview.setText(text);//设置文字
        return view;//返回的是view把R.layout.tab布局全部反会了
    }

tab.xml写

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="@drawable/bg"//自定义背景图片
    >
    <TextView 
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="首页"
        android:textColor="@android:color/white"
        android:textSize="22sp"
        />
</LinearLayout>

bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 选中的颜色 -->
<item  android:state_selected="true" 
    android:drawable="@drawable/bg_selected" ></item>
<item android:state_selected="false"
    android:drawable="@drawable/bg_normal"
></item>
</selector>

image.png