仿微信主页的切换

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