FragmentTabHost的使用--仿微信首页搭建

1.FragmentTabHost这个类是v4包下的,使用起来也是非常方便的

先贴上布局代码

android.support.v4.app.FragmentTabHost节点下的id都要使用系统的id,要不然系统会找不到控件报错。TabHost导航默认出现在页面的顶部的,这里我们使用一个非常巧妙地

方法,就是把TabHost自带的FrameLayout内容区域给设置0dp,然后自己再给一个FrameLayout  id和这个一样,这样系统就去找咱们自己写的这个Framelayout了,成功的把导航

弄到了底部.

2.activity中的代码

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		tabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
		addSpec();
		tabHost.setOnTabChangedListener(this);
		tabHost.getTabWidget().setDividerDrawable(android.R.color.transparent);
	}

先初始化Tabhost 然后在addSpec()方法中添加标签Spec,最后给tabHost设置Tab改变的监听,并且把分割线隐藏

private void addSpec() {
		chat = tabHost.newTabSpec(TAG_CHAT);
		chat_view = new TabIndicatorView(this);
		chat_view.setIcon(R.drawable.tab_icon_chat_focus,R.drawable.tab_icon_chat_normal);
		chat_view.setIconON();
		chat_view.setUnReadNum(22);
		chat_view.setTitle("消息");
		chat.setIndicator(chat_view);
		tabHost.addTab(chat, ChatFragment.class, null);
		
		contact = tabHost.newTabSpec(TAG_CONN);
		contact_view = new TabIndicatorView(this);
		contact_view.setIcon(R.drawable.tab_icon_contact_focus,R.drawable.tab_icon_contact_normal);
		contact_view.setIconOff();
		contact_view.setUnReadNum(0);
		contact_view.setTitle("联系");
		contact.setIndicator(contact_view);
		tabHost.addTab(contact, ContactFragment.class, null);
		
		discover = tabHost.newTabSpec(TAG_FIND);
		discover_view = new TabIndicatorView(this);
		discover_view.setIcon(R.drawable.tab_icon_discover_focus,R.drawable.tab_icon_discover_normal);
		discover_view.setIconOff();
		discover_view.setUnReadNum(0);
		discover_view.setTitle("发现");
		discover.setIndicator(discover_view);
		tabHost.addTab(discover, DiscoverFragment.class, null);
		
		me = tabHost.newTabSpec(TAG_ME);
		me_view = new TabIndicatorView(this);
		me_view.setIcon(R.drawable.tab_icon_me_focus,R.drawable.tab_icon_me_normal);
		me_view.setIconOff();
		me_view.setUnReadNum(100);
		me_view.setTitle("我");
		me.setIndicator(me_view);
		tabHost.addTab(me, MeFragment.class, null);
		
	}

这里的TabIndicatorView是我们自定义的组合控件,代码如下:

package com.fanday.wechat.view;

import com.fanday.wechat.R;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class TabIndicatorView extends RelativeLayout {

	private ImageView iv;
	private TextView tv_unRead;
	private TextView tv_msg;
	private int offIcon,onIcon;

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

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

	private void init() {
		LayoutInflater.from(getContext()).inflate(R.layout.tab_indicator, this);
		iv = (ImageView) findViewById(R.id.indicator_icon);
		tv_unRead = (TextView) findViewById(R.id.unread_num);
		tv_msg = (TextView) findViewById(R.id.indicator_text);
	}

	public void setIcon(int onIcon,int offIcon) {
		this.onIcon=onIcon;
		this.offIcon=offIcon;
	}

	public void setIconON(){
		iv.setImageResource(onIcon);
	}
	public void setIconOff(){
		iv.setImageResource(offIcon);
	}
	public void setUnReadNum(int num) {
		if (num == 0) {
			tv_unRead.setVisibility(View.GONE);
		} else if (num <= 99) {
			tv_unRead.setVisibility(View.VISIBLE);
			tv_unRead.setText(num + "");
		} else {
			tv_unRead.setText("99+");
		}
	}

	public void setTitle(String tab) {
		tv_msg.setText(tab);
	}

}

view的布局:

未读提醒的background用到了一个shape资源:

最后是tabHost的Tab改变的时候的逻辑:

	@Override
	public void onTabChanged(String tabId) {
		chat_view.setIconOff();
		contact_view.setIconOff();
		discover_view.setIconOff();
		me_view.setIconOff();
		switch (tabId) {
		case TAG_CHAT:
			chat_view.setIconON();
			break;
		case TAG_CONN:
			contact_view.setIconON();
			break;
		case TAG_FIND:
			discover_view.setIconON();
			break;
		case TAG_ME:
			me_view.setIconON();
			break;
		default:
			break;
		}
		tabHost.setCurrentTabByTag(tabId);
	}

这样就完成了,底部导航加fragment切换的效果了

源码下载  :  源码