自定义TabHost实现背景图片随选项卡切换滑动效果

 <strong>先上效果图</strong>

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

布局文件

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

 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;
     }
 }