Fragment+RadioButton实现点击切换页面效果

   首先我们需要在主布局文件中 放一个 容器，方便让fragment加入进去,我们创建了四个Fragment，并用RedioButton实现了导航栏

MainActivity.java

package com.example.administrator.fragmentdemo;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;


public class MainActivity extends Activity implements View.OnClickListener {

    private RadioButton image1;
    private RadioButton image2;
    private RadioButton image3;
    private RadioButton image4;

    private FirstFragment firstFragment;
    private SecondFragment secondFragment;
    private ThirdFragment thirdFragment;
    private FourFragment fourFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initEvents();
        //首先 我们先选定一个
        select(0);
    }
    //初始化  各种个 View
    private void initViews(){
        image1 = (RadioButton) findViewById(R.id.tab_image1);
        image2 = (RadioButton) findViewById(R.id.tab_image2);
        image3 = (RadioButton) findViewById(R.id.tab_image3);
        image4 = (RadioButton) findViewById(R.id.tab_image4);
    }
    //初始化 监听事件
    private void initEvents(){
        image1.setOnClickListener(this);
        image2.setOnClickListener(this);
        image3.setOnClickListener(this);
        image4.setOnClickListener(this);
    }
    // 初始化 各种图片
    private void initImageBack(){
        image1.setBackgroundResource(R.drawable.chatting_biaoqing_btn_normal);
        image2.setBackgroundResource(R.drawable.lbs_icon_disable);
        image3.setBackgroundResource(R.drawable.scan_book);
        image4.setBackgroundResource(R.drawable.scan_word);
    }
    //
    private void select(int i){
        FragmentManager fm = getFragmentManager();  //获得Fragment管理器
        FragmentTransaction ft = fm.beginTransaction(); //开启一个事务

        hidtFragment(ft);   //先隐藏 Fragment

        switch (i){
            case 0:
                image1.setBackgroundResource(R.drawable.chatting_biaoqing_btn_enable);
                if (firstFragment == null){
                    firstFragment = new FirstFragment();
                    ft.add(R.id.fragment_container,firstFragment);
                }else{
                    ft.show(firstFragment);
                }
                break;
            case 1:
                image2.setBackgroundResource(R.drawable.lbs_icon_enable);
                if (secondFragment == null){
                    secondFragment = new SecondFragment();
                    ft.add(R.id.fragment_container,secondFragment);
                }else {
                    ft.show(secondFragment);
                }
                break;
            case 2:
                image3.setBackgroundResource(R.drawable.scan_book_hl);
                if (thirdFragment == null){
                    thirdFragment = new ThirdFragment();
                    ft.add(R.id.fragment_container,thirdFragment);
                }else {
                    ft.show(thirdFragment);
                }
                break;
            case 3:
                image4.setBackgroundResource(R.drawable.scan_word_hl);
                if(fourFragment == null){
                    fourFragment = new FourFragment();
                    ft.add(R.id.fragment_container,fourFragment);
                }else {
                    ft.show(fourFragment);
                }
                break;
        }
        ft.commit();   //提交事务
    }
    //隐藏所有Fragment
    private void hidtFragment(FragmentTransaction fragmentTransaction){
        if (firstFragment != null){
            fragmentTransaction.hide(firstFragment);
        }
        if (secondFragment != null){
            fragmentTransaction.hide(secondFragment);
        }
        if (thirdFragment != null){
            fragmentTransaction.hide(thirdFragment);
        }
        if (fourFragment != null){
            fragmentTransaction.hide(fourFragment);
        }
    }
    //重写监听
    @Override
    public void onClick(View v) {

        initImageBack(); //初始化 图片背景

        switch (v.getId()){
            case R.id.tab_image1:
                select(0);
                break;
            case R.id.tab_image2:
                select(1);
                break;
            case R.id.tab_image3:
                select(2);
                break;
            case R.id.tab_image4:
                select(3);
                break;
        }
    }
}

主布局文件,在这里我分开写的，底部的导航栏有新建了一个xml文件，并在主布局文件中用include将他包含进来。

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"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/friendactivity_comment_frame_pressed"/>

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

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

</LinearLayout>

底部导航栏的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    android:background="@drawable/friendactivity_comment_frame_pressed">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/tab_image1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/chatting_biaoqing_btn_normal"/>

        <RadioButton
            android:id="@+id/tab_image2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/lbs_icon_disable"/>
        <RadioButton
            android:id="@+id/tab_image3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/scan_book"/>
        <RadioButton
            android:id="@+id/tab_image4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:background="@drawable/scan_word"/>
    </RadioGroup>

</LinearLayout>

四个fragment都一样，我就放一个代码，布局也很简单，就放了一个TextView

Fragment.java

package com.example.administrator.fragmentdemo;

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

/**
 * Created by Administrator on 2015/9/3.
 */
public class FirstFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.first_fragment_view,container,false);
    }
}

该fragment的布局文件为:

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is frist fragment"/>
</LinearLayout>

效果图: