自定义TabHost 一个avtiviy 多个标签 ，实现背景图片随选项卡切换滑动效果

本例子是对TabHost组件的自定义，实现标签居底显示；每个标签包含图片和文字。

布局文件

[html] view plaincopy

<?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" >

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:background="#F8FFEE" >

<!-- 内容显示 -->

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="fill_parent"

android:layout_height="wrap_content" >

<TextView

android:id="@+id/text1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="@string/text1"

android:textSize="32dp" />

<TextView

android:id="@+id/text2"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="@string/text2"

android:textSize="32dp" />

<TextView

android:id="@+id/text3"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:text="@string/text3"

android:textSize="32dp" />

</FrameLayout>

<TabWidget

android:id="@android:id/tabs"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="@drawable/bottom_tab_bg" >

</TabWidget>

<!-- 选项卡背景图片 -->

<ImageView

android:id="@+id/tab_top_select"

android:layout_width="45dp"

android:layout_height="45dp"

android:layout_alignParentBottom="true"

android:src="@drawable/topbar_select" />

</RelativeLayout>

</TabHost>

MainActivity.java

[java] view plaincopy

package com.suxh;

import java.util.ArrayList;

import java.util.List;

import android.app.TabActivity;

import android.graphics.Color;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.util.Log;

import android.view.Gravity;

import android.view.View;

import android.view.animation.TranslateAnimation;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TabHost;

import android.widget.TabHost.OnTabChangeListener;

import android.widget.TextView;

public class MainActivity extends TabActivity implements OnTabChangeListener {

// 当前选中的Tab标号

private int mCurSelectTabIndex = 0;

// 默认选中第一个tab页 移动标志操作

private final int INIT_SELECT = 0;

// 滑动动画执行时间

private final int DELAY_TIME = 500;

private TabHost mTabHost;

// 存放Tab页中ImageView信息

public List<ImageView> imageList = new ArrayList<ImageView>();

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

// 取得TabHost对象

mTabHost = getTabHost();

/* 为TabHost添加标签 */

mTabHost.addTab(mTabHost.newTabSpec("tab_1").setIndicator(composeLayout("优惠信息", R.drawable.pic1_s)).setContent(R.id.text1));

mTabHost.addTab(mTabHost.newTabSpec("tab_2").setIndicator(composeLayout("银行公告", R.drawable.pic2_n)).setContent(R.id.text2));

mTabHost.addTab(mTabHost.newTabSpec("tab_3").setIndicator(composeLayout("金融产品", R.drawable.pic3_n)).setContent(R.id.text3));

// 设置TabHost的背景颜色

mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));

// 设置当前选中的Tab页

mTabHost.setCurrentTab(0);

// TabHost添加事件

mTabHost.setOnTabChangedListener(this);

// 初始化移动标识这里移到第一个tab页

initCurSelectTab();

}

/**

* 初始化选中Tab覆盖图片的Handler

*/

private Handler initSelectTabHandle = new Handler () {

public void handleMessage (Message msg) {

switch (msg.what) {

case INIT_SELECT:

moveTopSelect(INIT_SELECT);

break;

default:

break;

}

super.handleMessage(msg);

}

};

/**

* 初始化选中Tab覆盖图片

*/

public void initCurSelectTab(){

// 默认选中移动图片位置

Message msg = new Message();

msg.what = INIT_SELECT;

initSelectTabHandle.sendMessageDelayed(msg, DELAY_TIME);

}

/**

* Tab页改变

*/

public void onTabChanged(String tabId) {

// 设置所有选项卡的图片为未选中图片

imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.pic1_n));

imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.pic2_n));

imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.pic3_n));

if (tabId.equalsIgnoreCase("tab_1")) {

imageList.get(0).setImageDrawable(getResources().getDrawable(R.drawable.pic1_s));

// 移动底部背景图片

moveTopSelect(0);

} else if (tabId.equalsIgnoreCase("tab_2")) {

imageList.get(1).setImageDrawable(getResources().getDrawable(R.drawable.pic2_s));

// 移动底部背景图片

moveTopSelect(1);

} else if (tabId.equalsIgnoreCase("tab_3")) {

imageList.get(2).setImageDrawable(getResources().getDrawable(R.drawable.pic3_s));

// 移动底部背景图片

moveTopSelect(2);

}

}

/**

* 移动tab选中标识图片

* @param selectIndex

* @param curIndex

*/

public void moveTopSelect(int selectIndex) {

View topSelect = (View) findViewById(R.id.tab_top_select);

// 起始位置中心点

int startMid = ((View) getTabWidget().getChildAt(mCurSelectTabIndex)).getLeft() + ((View) getTabWidget().getChildAt(mCurSelectTabIndex)).getWidth() / 2;

// 起始位置左边位置坐标

int startLeft = startMid - topSelect.getWidth() / 2;

// 目标位置中心点

int endMid = ((View) getTabWidget().getChildAt(selectIndex)).getLeft() + ((View) getTabWidget().getChildAt(selectIndex)).getWidth() / 2;

// 目标位置左边位置坐标

int endLeft = endMid - topSelect.getWidth() / 2;

TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - topSelect.getLeft(), 0, 0);

animation.setDuration(200);

animation.setFillAfter(true);

topSelect.bringToFront();

topSelect.startAnimation(animation);

// 改变当前选中按钮索引

mCurSelectTabIndex = selectIndex;

Log.i("fs", "endMid " + endMid + " startLeft " + startLeft + " endLeft" + (endLeft - topSelect.getLeft()));

}

/**

* 这个设置Tab标签本身的布局，需要TextView和ImageView不能重合 s:是文本显示的内容 i:是ImageView的图片位置

*/

public View composeLayout(String s, int i) {

// 定义一个LinearLayout布局

LinearLayout layout = new LinearLayout(this);

// 设置布局垂直显示

layout.setOrientation(LinearLayout.VERTICAL);

ImageView iv = new ImageView(this);

imageList.add(iv);

iv.setImageResource(i);

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);

lp.setMargins(0, 5, 0, 0);

layout.addView(iv, lp);

// 定义TextView

TextView tv = new TextView(this);

tv.setGravity(Gravity.CENTER);

tv.setSingleLine(true);

tv.setText(s);

tv.setTextColor(Color.WHITE);

tv.setTextSize(10);

layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));

return layout;

}

}