UI界面微信底部（Fragment实现Tab，底部点击）

fragment 管理自己的布局，是独立的，activity只负责调度fragment，而ViewPager 包括布局在内全部由activity管理

优化布局层次
　　include　　merge　　Viewstub

fragment的父布局是FrameLayout

此次的实现，内容区域已经不是ViewPager，而是4个fragment.Android3.0版本以上开始推荐使用Fragment，但不可以左右滑动

----------------------------------

Top.xml

<?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="45dp"
    android:background="@drawable/title_bar"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

Bottom.xml

<?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="55dp"
    android:background="@drawable/bottom_bar"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
[注意点在于为LinearLayout设置监听器的时候，会出现点击文字能响应监听事件，
而点击图片不会响应的情况，问题在于LinearLayout会把监听事件先交给ImageButton，
因为它是可以点击的，而ImageButton中未实现监听器，所以不能响应。
解决方法就是设置它不能被点击。在XML文件中，添加android:clickable="false"，就可以。]
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>

 

 

activity_main.xml

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

    <include layout="@layout/top" />

　　<FrameLayout 
        android:id="@+id/id_content"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></FrameLayout>
   <include layout="@layout/bottom" />

</LinearLayout>

 

 

tab01.xml　　tab02.xml　　tab03.xml　　tab04.xml

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Frd Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

WeixinFragment.java

 

package com.imooc.tab02;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class WeixinFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab01, container, false);
    }
}

 

SettingFragment .java

package com.imooc.tab02;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SettingFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab04, container, false);
    }
}

FrdFragment .java

package com.imooc.tab02;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FrdFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab02, container, false);
    }
}

AddressFragment .java

package com.imooc.tab02;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class AddressFragment extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.tab03, container, false);
    }
}

MainActivity .java

package com.imooc.tab02;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener
{
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSettings;

    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAddress;
    private ImageButton mImgSettings;

    private Fragment mTab01;
    private Fragment mTab02;
    private Fragment mTab03;
    private Fragment mTab04;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
        setSelect(0);
    }

    private void initEvent()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }

    private void initView()
    {
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);

        mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
        mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);
    }

    private void setSelect(int i)
    {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        // 把图片设置为亮的
        // 设置内容区域
        switch (i)
        {
        case 0:
            if (mTab01 == null)
            {
                mTab01 = new WeixinFragment();
                transaction.add(R.id.id_content, mTab01);
            } else
            {
                transaction.show(mTab01);
            }
            mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            if (mTab02 == null)
            {
                mTab02 = new FrdFragment();transaction.add(R.id.id_content, mTab02);
            } else
            {
                transaction.show(mTab02);
                
            }
            mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 2:
            if (mTab03 == null)
            {
                mTab03 = new AddressFragment();
                transaction.add(R.id.id_content, mTab03);
            } else
            {
                transaction.show(mTab03);
            }
            mImgAddress.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            if (mTab04 == null)
            {
                mTab04 = new SettingFragment();
                transaction.add(R.id.id_content, mTab04);
            } else
            {
                transaction.show(mTab04);
            }
            mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
            break;

        default:
            break;
        }

        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction)
    {
        if (mTab01 != null)
        {
            transaction.hide(mTab01);
        }
        if (mTab02 != null)
        {
            transaction.hide(mTab02);
        }
        if (mTab03 != null)
        {
            transaction.hide(mTab03);
        }
        if (mTab04 != null)
        {
            transaction.hide(mTab04);
        }
    }

    @Override
    public void onClick(View v)
    {
        resetImgs();
        switch (v.getId())
        {
        case R.id.id_tab_weixin:
            setSelect(0);
            break;
        case R.id.id_tab_frd:
            setSelect(1);
            break;
        case R.id.id_tab_address:
            setSelect(2);
            break;
        case R.id.id_tab_settings:
            setSelect(3);
            break;

        default:
            break;
        }
    }

    /**
     * 切换图片至暗色
     */
    private void resetImgs()
    {
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgAddress.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }

}

步骤：

1.fragment代码，继承 Fragment，重写onCreateView，复制四份

2.在activity_main.xml修改布局Framlayout 

3.在MainActivity.java初始化View
　　初始化事件监听器
　　view添加各自的事件监听器 
　　tab监听事件内容：
　　　　所有图片置灰
　　　　选中tab图片高亮
　　　　framlayout显示相应fragment
　　　　获得一个FragmentManager
　　　　开启一个FragmentTransaction
　　　　beginTransaction
　　　　监听事件中new Fragment，manager Fragment
　　　　hideFragment(FragmentTransaction)// 隐藏所有
　　　　fragmentTransaction.hide(Fragment)// 隐藏一个
　　　　fragmentTransaction.show(Fragment)// 显示一个
　　　　提交事务fragmentTransaction.commit();