Android项目中TabHost标签切换
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>
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));
}
});
}