仿微信主页的切换

0.效果





1.创建首页的Activity

public class MaintabActivity extends FragmentActivity implements OnTabChangeListener {

private FragmentTabHost tabHost;

//定义 每个Tab的 Tag  --- start
private final static String TAG_CHAT = "chat";

private final static String TAG_CONTACTS = "contacts";

private final static String TAG_DISCOVER = "discover";

private final static String TAG_ME = "me";
// 定义 每个Tab的 Tag  --- end

// 定义 每个Tab展示的View   --- start
private TabIndicator chatIndicator;

private TabIndicator contactsIndicator;

private TabIndicator discoverIndicator;

private TabIndicator meIndicator;
// 定义 每个Tab展示的View   --- end

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

this.requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

initIndicator();

initTabHost();
}

/**
* 初始化 TabHost
*/
private void initTabHost() {
// 1. 初始化TabHost
tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
tabHost.setup(this, getSupportFragmentManager(), R.id.homeTabContent);

// 2.1 创建聊天TabSpec
TabSpec chatTabSpec = tabHost.newTabSpec(TAG_CHAT);
chatTabSpec.setIndicator(chatIndicator);

// 2.2 创建联系人TabSpec
TabSpec contactsTabSpec = tabHost.newTabSpec(TAG_CONTACTS);
contactsTabSpec.setIndicator(contactsIndicator);

// 2.3 创发现TabSpec
TabSpec discoverTabSpec = tabHost.newTabSpec(TAG_DISCOVER);
discoverTabSpec.setIndicator(discoverIndicator);

// 2.4 创我TabSpec
TabSpec meTabSpec = tabHost.newTabSpec(TAG_ME);
meTabSpec.setIndicator(meIndicator);

// 3. 添加 TabSpec
tabHost.addTab(chatTabSpec,ChatFragment.class,null);
tabHost.addTab(contactsTabSpec,ContactsFragment.class,null);
tabHost.addTab(discoverTabSpec,DiscoverFragment.class,null);
tabHost.addTab(meTabSpec,MeFragment.class,null);

// 4.去掉 每个Tab后面的 竖线
tabHost.getTabWidget().setDividerDrawable(null);

// 5. 设置初始化选中的Tab
tabHost.setCurrentTabByTag(TAG_CHAT);
chatIndicator.setCurrentFocus(true);

// 6.给每个Tab添加监听器
tabHost.setOnTabChangedListener(this);
}

/**
* 初始化每个需要展示的View
*/
private void initIndicator(){
chatIndicator = new TabIndicator(this);
chatIndicator.setTabHit("微信");
chatIndicator.setTabIcon(R.drawable.tab_icon_chat_normal, R.drawable.tab_icon_chat_focus);

contactsIndicator = new TabIndicator(this);
contactsIndicator.setTabHit("通讯录");
contactsIndicator.setTabIcon(R.drawable.tab_icon_contact_normal, R.drawable.tab_icon_contact_focus);
contactsIndicator.setUnread(1);

discoverIndicator = new TabIndicator(this);
discoverIndicator.setTabHit("发现");
discoverIndicator.setTabIcon(R.drawable.tab_icon_discover_normal, R.drawable.tab_icon_discover_focus);

meIndicator = new TabIndicator(this);
meIndicator.setTabHit("我");
meIndicator.setTabIcon(R.drawable.tab_icon_me_normal, R.drawable.tab_icon_me_focus);
}

/**
* 每个Tab的点击监听
*/
@Override
public void onTabChanged(String tabId) {

buildIndicator();

// 点击微信的Tab
if(tabId.equals(TAG_CHAT)){
chatIndicator.setTabSelected(true);
}

// 点击联系人的Tab
if(tabId.equals(TAG_CONTACTS)){
contactsIndicator.setTabSelected(true);
}

// 点击发现的Tab
if(tabId.equals(TAG_DISCOVER)){
discoverIndicator.setTabSelected(true);
}

// 点击我的Tab
if(tabId.equals(TAG_ME)){
meIndicator.setTabSelected(true);
}
}

/**
* 点击之后先将全部的设置为非点击状态
*/
private void buildIndicator() {
chatIndicator.setTabSelected(false);
contactsIndicator.setTabSelected(false);
discoverIndicator.setTabSelected(false);
meIndicator.setTabSelected(false);
}
}

创建首页Activity的布局页面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

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

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

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

2.创建每个Tab显示的自定义View,在layout目录下新建tab_indicator.xml

<?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:id="@+id/ll_tab_info"
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_alignRight="@id/ll_tab_info"
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>

创建自定义View对象

/**
* 创建自定义View
* @author chenhao24
*
*/
public class TabIndicator extends RelativeLayout {

private ImageView ivTabIcon;

private TextView tvTabHint;

private TextView tvTabUnRead;

private int focusId = -1;

private int normalId = -1;

private int unreadCount = 0;

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

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

View.inflate(context, R.layout.tab_indicator, this);

ivTabIcon = (ImageView) findViewById(R.id.tab_indicator_icon);

tvTabHint = (TextView) findViewById(R.id.tab_indicator_hint);

tvTabUnRead = (TextView) findViewById(R.id.tab_indicator_unread);

setUnread(0);
}

public void setTabIcon(int normalId, int focusId) {
this.normalId = normalId;
this.focusId = focusId;
}

public void setTabHit(String text) {
tvTabHint.setText(text);
}

public void setUnread(int unreadCount) {
this.unreadCount = unreadCount;

if (unreadCount <= 0) {
tvTabUnRead.setVisibility(View.GONE);
} else {
if (unreadCount >= 100) {
tvTabUnRead.setText("99+");
} else {
tvTabUnRead.setText("" + unreadCount);
}
tvTabUnRead.setVisibility(View.VISIBLE);
}
}

public int getUnreadCount() {
return this.unreadCount;
}

public void setCurrentFocus(boolean current) {
if (current) {
if (focusId != -1) {
ivTabIcon.setImageResource(focusId);
}
} else {
if (normalId != -1) {
ivTabIcon.setImageResource(normalId);
}
}
}

// 设置选中
public void setTabSelected(boolean selected) {
if (selected) {
ivTabIcon.setImageResource(focusId);
} else {
ivTabIcon.setImageResource(normalId);
}
}
}

3. 创建几个展示区域的自定义Fragment

public class ChatFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.show_info, container,false);

TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);

tvInfo.setText("这里显示微信的列表");

return view;
}
}

public class ContactsFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.show_info, container,false);

TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);

tvInfo.setText("这里显示联系人的列表");

return view;
}
}

public class DiscoverFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.show_info, container,false);

TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);

tvInfo.setText("这里显示发现的列表");

return view;
}
}

public class MeFragment extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.show_info, container,false);

TextView tvInfo = (TextView) view.findViewById(R.id.tv_info);

tvInfo.setText("这里显示我的列表");

return view;
}
}

简单的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_info"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="内容显示区域" />
</LinearLayout>

相关资源文件



















可能会遇到的错误:

java.lang.IllegalStateException: No tab content FrameLayout found for id xxxxx

解决:换个新的android-support-v4.jar,覆盖原来的

代码地址: https://github.com/cbooy/FragmentTabHostDemo