Tab实现之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:gravity="center"
    android:background="#080808"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="25sp"
        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="wrap_content"
    android:background="#0d0d0d"
    android:orientation="horizontal">

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

        <ImageView
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@mipmap/ic_launcher"/>

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

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

        <ImageView
            android:id="@+id/id_tab_friend_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32"/>

        <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="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32"/>

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

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

        <ImageView
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32"/>

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


</LinearLayout>

 

 

在activity_main.xml文件中

 

<?xml version="1.0"encoding="utf-8"?>
<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="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    ></FrameLayout>

    //布局底部的四个Tab
    <include layout="@layout/bottom"/>
</LinearLayout>

 

 

以下是四个滑动页面的布局

在tab01.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="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是微信TAB"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点击"
        android:id="@+id/tab01_button"/>
</LinearLayout>

 

 

在tab02.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="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是朋友TAB"/>
</LinearLayout>

 

 

 

在tab03.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="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是通讯录TAB"/>
</LinearLayout>

 

 

在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="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是设置TAB"/>
</LinearLayout>

 

 

 

 

在MainActivity.class文件中

package com.example.yuxue.learntab_fragment;

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.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

//此处的需要继承V4下的  FragmentActivity
public class MainActivityextends FragmentActivityimplements View.OnClickListener {

    //  TAB
    privateLinearLayout tab_weixin;
    private LinearLayouttab_friend;
    private LinearLayouttab_address;
    private LinearLayouttab_setting;
    //    IMG
    privateImageView tab_weixin_img;
    private ImageView tab_friend_img;
    private ImageView tab_address_img;
    private ImageView tab_setting_img;
    //  Fragment
    privateFragment fragment01;
    private Fragment fragment02;
    private Fragment fragment03;
    private Fragment fragment04;

    @Override
    protected voidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
        setSlects(0);//第一次显示第一个Fragment
    }

    private void initView() {
        //  Tab
        tab_weixin= (LinearLayout) findViewById(R.id.id_tab_weixin);
        tab_friend = (LinearLayout) findViewById(R.id.id_tab_friend);
        tab_address = (LinearLayout) findViewById(R.id.id_tab_address);
        tab_setting = (LinearLayout) findViewById(R.id.id_tab_setting);
        // IMG
        tab_weixin_img= (ImageView) findViewById(R.id.id_tab_weixin_img);
        tab_friend_img = (ImageView) findViewById(R.id.id_tab_friend_img);
        tab_address_img = (ImageView) findViewById(R.id.id_tab_address_img);
        tab_setting_img = (ImageView) findViewById(R.id.id_tab_setting_img);
    }

    private void initEvents() {
        tab_weixin.setOnClickListener(this);
        tab_friend.setOnClickListener(this);
        tab_address.setOnClickListener(this);
        tab_setting.setOnClickListener(this);
    }

    @Override
    public voidonClick(View v) {
        set_Img();//  先将所有的图片设置为暗色
        switch(v.getId()) {
            //  TAB 的点击事件
            caseR.id.id_tab_weixin:
                //将相应图片设置为亮色    切换到相应的内容区域
                setSlects(0);
                break;
            case R.id.id_tab_friend:
                setSlects(1);
                break;
            case R.id.id_tab_address:
                setSlects(2);
                break;
            case R.id.id_tab_setting:
                setSlects(3);
                break;


        }
    }

    private void setSlects(intindex) {
        FragmentManager fragmentManager = getSupportFragmentManager();//拿到Fragment的管理器
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();//为Fragment创建一个事务
        hideAllFragment(fragmentTransaction);//   隐藏所有的  Fragment
        //选中相应地的选项卡，将相应图片设置为亮色 并   切换到相应的内容区域
        switch(index) {
            case 0:
                //判断Fragment是否为空  为空创建、添加并显示，否则就显示
                if(fragment01 ==null) {
                    fragment01 = new WeixinFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment01);
                    fragmentTransaction.show(fragment01);
                } else {
                    fragmentTransaction.show(fragment01);
                }
                tab_weixin_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case 1:
                if (fragment02== null) {
                    fragment02 = new FriendFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment02);
                    fragmentTransaction.show(fragment02);
                } else {
                    fragmentTransaction.show(fragment02);
                }
                tab_friend_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case 2:
                if (fragment03== null) {
                    fragment03 = new AddressFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment03);
                    fragmentTransaction.show(fragment03);
                } else {
                    fragmentTransaction.show(fragment03);
                }
                tab_address_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case 3:
                if (fragment04== null) {
                    fragment04 = new SettingFragemnt();
                    fragmentTransaction.add(R.id.id_content,fragment04);
                    fragmentTransaction.show(fragment04);
                } else {
                    fragmentTransaction.show(fragment04);
                }
                tab_setting_img.setImageResource(R.mipmap.ic_launcher);
                break;
        }
        fragmentTransaction.commit();

    }

    private void hideAllFragment(FragmentTransaction transaction) {
        //  隐藏所有的  Fragment
        if(fragment01 !=null) {
            transaction.hide(fragment01);
        }
        if (fragment02!= null) {
            transaction.hide(fragment02);
        }
        if (fragment03!= null) {
            transaction.hide(fragment03);
        }
        if (fragment04!= null) {
            transaction.hide(fragment04);
        }

    }

    private void set_Img() {
        //  将所有的图片设置为暗色
        tab_weixin_img.setImageResource(R.drawable.android32);
        tab_friend_img.setImageResource(R.drawable.android32);
        tab_address_img.setImageResource(R.drawable.android32);
        tab_setting_img.setImageResource(R.drawable.android32);
    }
}

 

在WeixinFragemnt.class文件中

 

package com.example.yuxue.learntab_fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

/**
 * Created by yuxue on 2016/4/29.
 */
public class WeixinFragemntextends Fragment {

    private Button button;

    @Override
    //  创建Fragment  时调用
    public voidonCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    //  绘制Fragment时调用   常用的方法就是三个：  onCreate（） 、  onCreateView（）、  onPause( )
    publicView onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @NullableBundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab01, container,false);
        button = (Button) view.findViewById(R.id.tab01_button);
        button.setOnClickListener(newView.OnClickListener() {
            @Override
            public voidonClick(View v) {
                Toast.makeText(getActivity(), "123456", Toast.LENGTH_SHORT).show();
            }
        });
        return view;
    }

}