使用ViewPager+Fragment+RadioGroup实现类似微信主界面

其实现在很多的应用都有类似的实现，最常用的或许就是微信了吧。先来看看效果图吧



当然这里只是拿了大众点评的图片，和微信的实现功能是一样的。微博也有类似的实现，但微博的实现简单点，用Fragment+RadioGroup就可以了，因为它不支持左右滑动界面。这里主要用到了ViewPager实现滑动，Fragment来表示各个界面，RadioGroup表示下方的四个选项。

对于下方的选项，有很多种实现方法，直接用LinearLayout包装ImageView和TextView也可以，我这里用的是RadioGroup，主要是减少了布局的嵌套层次

对于Fragment ，这里就不提了，有兴趣的可以看看郭霖大牛的解说http://blog.csdn.net/guolin_blog/article/details/8881711 ，ViewPager的话，也可以自己找找相关的资料先熟悉一下。这里只是展示实现效果以及过程

下面先来看看主布局文件：

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="cn.ljuns.fragmentandviewpager.MainActivity" >

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:flipInterval="30"
android:persistentDrawingCache="animation" >
</android.support.v4.view.ViewPager>

<RadioGroup
android:id="@+id/radioGrop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<RadioButton
android:id="@+id/main_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="5dp"
android:drawableTop="@drawable/home_selector"
android:gravity="center"
android:paddingLeft="0dp"
android:text="首页"
android:textColor="@drawable/bottom_font_selector" />

<RadioButton
android:id="@+id/main_tuan"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="5dp"
android:drawableTop="@drawable/tuan_selector"
android:gravity="center"
android:paddingLeft="0dp"
android:text="团购"
android:textColor="@drawable/bottom_font_selector" />

<RadioButton
android:id="@+id/main_search"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="5dp"
android:drawableTop="@drawable/search_selector"
android:gravity="center"
android:paddingLeft="0dp"
android:text="发现"
android:textColor="@drawable/bottom_font_selector" />

<RadioButton
android:id="@+id/main_my"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawablePadding="5dp"
android:drawableTop="@drawable/my_selector"
android:gravity="center"
android:paddingLeft="0dp"
android:text="我的"
android:textColor="@drawable/bottom_font_selector" />
</RadioGroup>
</LinearLayout>

很简单有木有？直接一个ViewPager和RadioGroup垂直排列，在RadioGroup里有四个RadioButton。

android:button="@null"表示取消前面的单选框，android:drawableTop="@drawable/home_selector"表示图片放在文字的上面，其他属性应该不用解释了吧

文字和图片的点击效果写在了drawable-ldpi，下面看看首页这个点击效果的实现

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="@drawable/main_index_home_pressed"/>
<item android:state_checked="false" android:drawable="@drawable/main_index_home_normal"/>

</selector>

接下来就是Fragment类和对应的布局文件了，因为四个Fragment和布局都一样，这里就只贴出一个，其他三个改改名字就好了

fragment_home.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:gravity="center"
android:background="#FAEBD7"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页Fragment" />

</LinearLayout>

FragmentHome.java

package cn.ljuns.fragmentandviewpager;

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

public class FragmentHome extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_home, container, false);
}
}

有了解过ViewPager 的就会知道，它和ListView很像，ListView显示的是列表，而ViewPager显示的是视图。所以，我们同样也需要一个Adapter来将ViewPager和Fragment进行绑定（这里说绑定并不严谨，只是为了通俗）。下面来看看Apater

MyFragmentPageAdapter.java

package cn.ljuns.fragmentandviewpager;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPageAdapter extends FragmentPagerAdapter {

private List<Fragment> fragments; //Fragment集合

public MyFragmentPageAdapter(FragmentManager fm) {
super(fm);
}

public MyFragmentPageAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
//当前显示的是第几个
@Override
public Fragment getItem(int arg0) {
return fragments.get(arg0);
}
//计算需要几个item
@Override
public int getCount() {
return fragments.size();
}
}

这里用的是FragmentPageAdapter 适配器，因为这个比较常用。

首先是两个构造函数，然后重写两个方法就可以了

注意：这里导入的是android.support.v4.app.Fragment 这个包，不然待会在MainActivity里会报错

接下来该是MainActivity了

package cn.ljuns.fragmentandviewpager;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.sup
4000
port.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Window;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends FragmentActivity implements
OnCheckedChangeListener, OnPageChangeListener{

//定义Fragment
private Fragment fragment1;
private Fragment fragment2;
private Fragment fragment3;
private Fragment fragment4;
//定义FragmentManager
private FragmentManager fragmentManager;

//定义组件
private ViewPager viewPager;
private List<Fragment> fragmentLists;
private MyFragmentPageAdapter adapter;
private RadioGroup radioGroup;
private RadioButton home; // 表示第一个RadioButton 组件

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);//取消ActionBar
setContentView(R.layout.activity_main);

//初始化界面组件
init();
//初始化ViewPager
initViewPager();
}

private void initViewPager() {
fragment1 = new FragmentHome();
fragment2 = new FragmentTuan();
fragment3 = new FragmentSearch();
fragment4 = new FragmentMy();

fragmentLists = new ArrayList<Fragment>();
fragmentLists.add(fragment1);
fragmentLists.add(fragment2);
fragmentLists.add(fragment3);
fragmentLists.add(fragment4);
//获取FragmentManager对象
fragmentManager = getSupportFragmentManager();
//获取FragmentPageAdapter对象
adapter = new MyFragmentPageAdapter(fragmentManager, fragmentLists);
//设置Adapter，使ViewPager 与 Adapter 进行绑定
viewPager.setAdapter(adapter);
//设置ViewPager默认显示第一个View
viewPager.setCurrentItem(0);
//设置第一个RadioButton为默认选中状态
home.setChecked(true);
//ViewPager页面切换监听
viewPager.addOnPageChangeListener(this);
}

private void init() {
radioGroup = (RadioGroup) findViewById(R.id.radioGrop);
viewPager = (ViewPager) findViewById(R.id.viewPager);
home = (RadioButton) findViewById(R.id.main_home);
//RadioGroup状态改变监听
radioGroup.setOnCheckedChangeListener(this);
}

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.main_home: // 首页
//显示第一个Fragment并关闭动画效果
viewPager.setCurrentItem(0,false);
break;
case R.id.main_tuan: // 团购
viewPager.setCurrentItem(1,false);
break;
case R.id.main_search: // 发现
viewPager.setCurrentItem(2,false);
break;
case R.id.main_my: // 我的
viewPager.setCurrentItem(3,false);
break;
}
}

@Override
public void onPageScrollStateChanged(int arg0) {}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}

/**
* ViewPager切换Fragment时，RadioGroup做相应的监听
*/
@Override
public void onPageSelected(int arg0) {
switch (arg0) {
case 0:
radioGroup.check(R.id.main_home);
break;
case 1:
radioGroup.check(R.id.main_tuan);
break;
case 2:
radioGroup.check(R.id.main_search);
break;
case 3:
radioGroup.check(R.id.main_my);
break;
}
}
}

里面都做了详细的注释，相信很容易看懂的。

有一点要注意：这个Activity 继承的是FragmentActivity，因为要用到support.v4这个包

到这里就算是完了，总结一下：1、主布局文件添加ViewPager 和 RadioGrpup，想要有几个选项就在RadioGroup里面添加几个RadioButton；

2、添加Fragment类和对应的布局文件，此时的布局文件就是你想要在界面显示的。刚开始添加了几个RadioButton就写几个Fragment类和布局文件；

3、新建一个类实现FragmentPageAdapter，重写构造方法和必须重写的两个方法；

4、在MainActivity里面进行逻辑操作。

小弟才疏学浅，如有不足，欢迎各位指出或建议。谢谢

下面附上源码，有需要的可以看看http://download.csdn.net/detail/u013132744/9355315