Android项目中TabHost标签切换

最新推荐文章于 2024-10-31 16:06:32 发布

原创最新推荐文章于 2024-10-31 16:06:32 发布 · 629 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #app #布局 #xml #设计

Android 专栏收录该内容

51 篇文章

订阅专栏

本文介绍如何通过修改图片和文字颜色来美化Android应用中的TabHost切换效果，提供两种方法实现不同状态下的Tab样式变化。

TabHost在Android APP中经常看到，觉得挺不错的，就参照做了个，但标签的切换效果没有添加，最多改下背景色，不太美观，于是在这次做的时候加了图片和文件颜色改变，变得美观很多。

1、大概效果如下

2、该实现设计四个Activity，MainActivity的三个标签点击时分别是呈现三个Activity，显示的三个忽略，主要把MainActivity的相关实现分享下。

方法一：

1）首先XML文件

<?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:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context="com.hornsey.MainActivity">

    <LinearLayout
        android:orientation="vertical"
        android:gravity="bottom"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1">
            <RelativeLayout
                android:id="@+id/view1"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">
                <TextView
                    android:id="@+id/text1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </RelativeLayout>

            <TextView
                android:id="@+id/view2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"/>
            <TextView
                android:id="@+id/view3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:text="Tab3"/>

        </FrameLayout>
        <TabWidget
            android:id="@android:id/tabs"
            android:background="@color/gray"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">
        </TabWidget>
    </LinearLayout>
</TabHost>

2）主文件

package com.hornsey.onlinelearning;

import android.app.ActionBar;
import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
import android.widget.TextView;
import android.widget.Toast;

import com.hornsey.util.Hcolor;


public class MainActivity extends TabActivity {

    private static final String Tab1 = "Tab1";
    private static final String Tab2 = "Tab2";
    private static final String Tab3 = "Tab3";

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

        final TabHost tabHost = this.getTabHost();
        final TabWidget tabWidget = tabHost.getTabWidget();

        TabHost.TabSpec tabSpec1 = tabHost.newTabSpec(Tab1);
        tabSpec1.setIndicator(composeLayout("首页",R.drawable.tab_home_s))
                .setContent(new Intent(MainActivity.this, HomeActivity.class));
        tabHost.addTab(tabSpec1);

        tabHost.addTab(tabHost.newTabSpec(Tab2).setIndicator(composeLayout("我", R.drawable.tab_me))
                .setContent(new Intent(MainActivity.this, MeActivity.class)));

        tabHost.addTab(tabHost.newTabSpec(Tab3).setIndicator(composeLayout("设置", R.drawable.tab_setting))
                .setContent(new Intent(MainActivity.this, SettingActivity.class)));


        for(int i = 0; i < tabWidget.getChildCount(); i++) {

            //设置高度、宽度，不过宽度由于设置为fill_parent，在此对它没效果
            tabWidget.getChildAt(i).getLayoutParams().height = 80;
            tabWidget.getChildAt(i).getLayoutParams().width = 80;

        }

        //设置Tab变换时的监听事件
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

            @Override
            public void onTabChanged(String tabId) {
                //当点击tab选项卡的时候，更改当前图标及字体颜色
                switch (tabId){
                    case Tab1:
                        setTab1();
                        break;
                    case Tab2:
                        setTab2();
                        break;
                    case Tab3:
                        setTab3();
                        break;
                    default:
                        break;
                }

            }
        });


    }

    private  void setTab1(){
        final TabHost tabHost = this.getTabHost();
        final TabWidget tabWidget = tabHost.getTabWidget();

        //tab1
        View v = tabWidget.getChildAt(0);
        ImageView iv = (ImageView) v.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_home_s);
        TextView tv = (TextView) v.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.purple);

        //tab2
        View v1 = tabWidget.getChildAt(1);
        iv = (ImageView) v1.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_me);
        tv = (TextView) v1.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.cyan);

        //tab3
        View v2 = tabWidget.getChildAt(2);
        iv = (ImageView) v2.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_setting);
        tv = (TextView) v2.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.cyan);
    }

    private  void setTab2(){
        final TabHost tabHost = this.getTabHost();
        final TabWidget tabWidget = tabHost.getTabWidget();

        //tab1
        View v = tabWidget.getChildAt(0);
        ImageView iv = (ImageView) v.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_home);
        TextView tv = (TextView) v.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.cyan);

        //tab2
        View v1 = tabWidget.getChildAt(1);
        iv = (ImageView) v1.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_me_s);
        tv = (TextView) v1.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.purple);

        //tab3
        View v2 = tabWidget.getChildAt(2);
        iv = (ImageView) v2.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_setting);
        tv = (TextView) v2.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.cyan);
    }

    private  void setTab3(){
        final TabHost tabHost = this.getTabHost();
        final TabWidget tabWidget = tabHost.getTabWidget();

        //tab1
        View v = tabWidget.getChildAt(0);
        ImageView iv = (ImageView) v.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_home);
        TextView tv = (TextView) v.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.cyan);

        //tab2
        View v1 = tabWidget.getChildAt(1);
        iv = (ImageView) v1.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_me);
        tv = (TextView) v1.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.cyan);

        //tab3
        View v2 = tabWidget.getChildAt(2);
        iv = (ImageView) v2.findViewById(R.id.tab_image);
        iv.setImageResource(R.drawable.tab_setting_s);
        tv = (TextView) v2.findViewById(R.id.tab_tv);
        tv.setTextColor(Hcolor.purple);
    }

    /**
     * 这个设置Tab标签本身的布局，需要TextView和ImageView不能重合
     * s:是文本显示的内容
     * i:是ImageView的图片位置
     */
    public View composeLayout(String s, int i){
        Log.e("Error", "composeLayout");
        LinearLayout layout = new LinearLayout(this);
        layout.setOrientation(LinearLayout.VERTICAL);
        layout.setGravity(Gravity.CENTER);

        ImageView iv = new ImageView(this);
        iv.setId(R.id.tab_image);
        iv.setImageResource(i);
        layout.addView(iv,
                new LinearLayout.LayoutParams(35, 35));
//                new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));

        TextView tv = new TextView(this);
        tv.setId(R.id.tab_tv);
        tv.setSingleLine(true);
        tv.setText(s);
        tv.setTextColor(Color.GRAY);
        layout.addView(tv,
                new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));

        return layout;
    }

}

标签切换时，使用最笨的办法，分别在每一个标签点击时，把当前标签及旁边两个标签的图片及文字颜色都给改变下，这个地方代码显得繁琐。因为图片资源名称不统一，所以只能一点一点写。

方法二：

1）按钮图标使用xml文件定义，分别设置按钮选中和没有选中时显示的图片，例如首页按钮图标设置如下：

R.drawable.tabhome

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_home_s" android:state_selected="true"/>
    <item android:drawable="@drawable/tab_home" android:state_selected="false"/>
</selector>

2）对选中的tab进行颜色设置：每次先将各个tab按钮的颜色设置为默认颜色，然后找出选中的按钮，将文字颜色设置为选中色

        TextView textView = (TextView) tabWidget.getChildAt(0).findViewById(R.id.title);
        textView.setTextColor(getResources().getColor(R.color.main_color));

        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {

            @Override
            public void onTabChanged(String tabId) {
                //当点击tab选项卡的时候，更改当前tab字体颜色
                int tabSelected = 0;
                for(int i = 0; i < tabWidget.getChildCount(); i++) {
                    View view = tabWidget.getChildAt(i);
                    TextView textView = (TextView) view.findViewById(R.id.title);
                    textView.setTextColor(Color.GRAY);
                }
                switch (tabId) {
                    case Tab1:
                        tabSelected = 0;
                        break;
                    case Tab2:
                        tabSelected = 1;
                        break;
                    case Tab3:
                        tabSelected = 2;
                        break;
                    default:
                        break;
                }
                View view = tabWidget.getChildAt(tabSelected);
                TextView textView = (TextView) view.findViewById(R.id.title);
                textView.setTextColor(getResources().getColor(R.color.main_color));
            }
        });
    }