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>

效果图: