Android FragmentTabHost实现底部tab切换

一、概述：

1、实现如下图的底部Tab效果，点击tab颜色变化

2、示例图：

二、FragmentTabHost组成

Tabhost,TabWidget,切换的内容容器FrameLayout

层级关系

—-FragmentTabHost

|—–TabWidget

|—–FrameLayout

三、布局实现

1、实现tabhost采用android.support.v4.app.FragmentTabHost

注意 id：@android:id/tabhost

2、实现tabWidget

注意 id：@android:id/tabs

3、实现FrameLayout

注意

1. id： @android：id/tabcontent
2. 此容器已经被废除，但在布局中必须有

4、实现自定义的内容容器区域(FrameLayout)

注意 ：

1. 整体需采用线性布局

2. 将自定义展示的区域放到TabHost之上

3. 自定义的内容需要给权重

四、实现过程：

1、初始化TabHost

调用setup(Context,FragmentManager,int);

最后一个参数 指的是 Fragment的容器id 用来切换fragment的

2、新建TabSpec

调用setIndicator(View view)//实现自定义的tab

3、添加TabSpec

调用addTab(TabSpec,Class,Bundle)的方法添加TabSpec

Class 指的是 tab对应的 Fragment

Bundle 指的是 Fragment 初始化的参数

五、组合式控件的实现

1、新建布局

2、将布局和代码进行关联

新建的View 必须继承 和 布局容器一样的容器类

通过View.inflate(context,LayoutId, this)将View和xml进行绑定

功能进行封装

3、根据当前View需要的功能进行封装

六、源码：

1、创建布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

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

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#FFF1F1F1" >
</TabWidget>

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp" >
</FrameLayout>
</android.support.v4.app.FragmentTabHost>

</LinearLayout>

2、自定义变化的Tab,里面有一个imageview图标，一个textview文本，一个红色的textview用来记录信息的数目；

package com.android.chat.views;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import com.android.chat.R;

/**
* @描述         主页底部指示器
* @项目名称      App_Chat
* @包名         com.android.chat.views
* @类名         TabIndicatorView
* @author      chenlin
* @date        2013年6月23日 下午10:27:34
*/
public class TabIndicatorView extends RelativeLayout {
//图标
private ImageView mIcon;
private TextView mTVHint;
//未读的红色的小文本
private TextView mTVUnRead;

private int mNormalIconId;
private int mFocusIconId;

public TabIndicatorView(Context context) {
this(context, null);
}

public TabIndicatorView(Context context, AttributeSet attrs) {
super(context, attrs);

// 将布局文件和 代码进行绑定
View.inflate(context, R.layout.tab_indicator, this);

mIcon = (ImageView) findViewById(R.id.tab_indicator_icon);
mTVHint = (TextView) findViewById(R.id.tab_indicator_hint);
mTVUnRead = (TextView) findViewById(R.id.tab_indicator_unread);

setTabUnreadCount(0);
}

// 设置tab的title
public void setTabTitle(String title) {
mTVHint.setText(title);
}

public void setTabTitle(int titleId) {
mTVHint.setText(titleId);
}

// 初始化图标
public void setTabIcon(int normalIconId, int focusIconId) {
this.mNormalIconId = normalIconId;
this.mFocusIconId = focusIconId;

mIcon.setImageResource(normalIconId);
}

// 设置未读数
public void setTabUnreadCount(int unreadCount) {
if (unreadCount <= 0) {
mTVUnRead.setVisibility(View.GONE);
} else {
if (unreadCount <= 99) {
mTVUnRead.setText(unreadCount + "");
} else {
mTVUnRead.setText("99+");
}

mTVUnRead.setVisibility(View.VISIBLE);
}
}

// 设置选中
public void setTabSelected(boolean selected) {
if (selected) {
mIcon.setImageResource(mFocusIconId);
} else {
mIcon.setImageResource(mNormalIconId);
}
}
}

3、TabIndicatorView 的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="54dip"
android:layout_marginLeft="-3dip"
android:layout_marginRight="-3dip"
android:layout_weight="1" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >

<ImageView
android:id="@+id/tab_indicator_icon"
android:layout_width="34dp"
android:layout_height="34dp"
android:contentDescription="@null"
android:src="@drawable/tab_icon_me_normal" />

<TextView
android:id="@+id/tab_indicator_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="aaaa"
android:textSize="12sp" />
</LinearLayout>

<TextView
android:id="@+id/tab_indicator_unread"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="3dp"
android:layout_marginTop="3dp"
android:background="@drawable/action_unread_icon"
android:gravity="center"
android:text="1"
android:textColor="#ffffffff"
android:textSize="10sp" />

</RelativeLayout>

4、最后在主页实现

package com.android.chat;

import com.android.chat.views.TabIndicatorView;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.widget.TabHost.TabSpec;

/**
*
* @描述 主页
* @项目名称 App_Chat
* @包名 com.android.chat
* @类名 MainActivity
* @author chenlin
* @date 2015年6月23日 下午10:22:28
*/
public class MainActivity extends FragmentActivity {
private static final String TAB_CHAT = "chat";
private FragmentTabHost mTabHost;
private TabIndicatorView mIndicatorView;

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

initTab();
}

private void initTab() {
// 1. 初始化TabHost
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.activity_home_container);
// 2. 新建TabSpec
TabSpec spec = mTabHost.newTabSpec(TAB_CHAT);
mIndicatorView = new TabIndicatorView(this);
mIndicatorView.setTabTitle("消息");
mIndicatorView.setTabIcon(R.drawable.tab_icon_chat_normal, R.drawable.tab_icon_chat_focus);
spec.setIndicator(mIndicatorView);

// 3. 添加TabSpec
mTabHost.addTab(spec, ChatFra.class, null);
}

}