Android studio 中的TabWidget

1、TabWidget 的 layout文件

<?xml version="1.0" encoding="utf-8"?>
    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:background="@color/background">

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </FrameLayout>

            <TextView
                android:id="@+id/intervalText1"
                android:layout_width="match_parent"
                android:layout_height="@dimen/interval"
                android:background="@color/hint_title_background"
                android:layout_above="@android:id/tabs"/>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="@dimen/tabs_height"
                android:background="@color/white"
                android:orientation="horizontal">
            </TabWidget>

        </LinearLayout>
    </TabHost>

2、tab布局的layout文件

<?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:gravity="center"
              android:layout_marginTop="@dimen/tabs_interval"
              android:orientation="vertical"
              android:background="@color/white">
    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="@dimen/tabs"
        android:layout_height="@dimen/tabs"
        android:scaleType="fitCenter"/>
    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/tabs_interval"
        android:textColor="@drawable/main_tab_textcolor"
        android:textSize="@dimen/text_size3"/>

</LinearLayout>

3、MainActivity

public class MainActivity extends TabActivity {

    private static final String TAB_SALE = "SALE";
    private static final String TAB_CART = "CART";
    private static final String TAB_REPORT = "REPORT";
    private static final String TAB_SETUP = "SETUP";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.maintabs);

        TabHost tabHost = getTabHost();

        //first tab
        tabHost.addTab(tabHost.newTabSpec(TAB_SALE)
                .setIndicator(prepareTabView(TAB_SALE))
                .setContent(new Intent(this, SaleActivity.class)
                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
        //second tab
        tabHost.addTab(tabHost.newTabSpec(TAB_CART)
                .setIndicator(prepareTabView(TAB_CART))
                .setContent(new Intent(this, CartActivity.class)
                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
        //third tab
        tabHost.addTab(tabHost.newTabSpec(TAB_REPORT)
                .setIndicator(prepareTabView(TAB_REPORT))
                .setContent(new Intent(this, ReportActivity.class)
                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
        //forth tab
        tabHost.addTab(tabHost.newTabSpec(TAB_SETUP)
                .setIndicator(prepareTabView(TAB_SETUP))
                .setContent(new Intent(this, SetupActivity.class)
                        .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));

        tabHost.setCurrentTab(0);//设置当前的选项卡,这里为Tab1
    }

    //自定义 标签按钮
    private View prepareTabView(String text) {
        View view = LayoutInflater.from(this).inflate(R.layout.main_tab_view, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.tab_icon);
        imageView.setBackground(getDrawable(text));
        TextView textView = (TextView) view.findViewById(R.id.tab_text);
        textView.setText(text);
        return view;
    }

    private Drawable getDrawable(String tabLabel){
        Drawable backgroundDrawable = null;
        if (tabLabel.equals(TAB_SALE)) {
            backgroundDrawable = getResources().getDrawable(R.drawable.tab_sale);
        } else if (tabLabel.equals(TAB_CART)) {
            backgroundDrawable = getResources().getDrawable(R.drawable.tab_cart);
        } else if (tabLabel.equals(TAB_REPORT)) {
            backgroundDrawable = getResources().getDrawable(R.drawable.tab_report);
        } else {
            backgroundDrawable = getResources().getDrawable(R.drawable.tab_setup);
        }
        return backgroundDrawable;
    }
}

4、tab切换时图标改变

由于四个tab切换时实现图标改变的.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/tab_sale_h"></item>
    <item android:state_selected="false" android:drawable="@drawable/tab_sale_n"></item>
</selector>