Android RadioGroup+ViewPager+ActionBar实现仿微信6.0界面(底部滑动菜单栏+导航栏)

转载请注明原文地址：http://blog.csdn.net/anyfive/article/details/41296341

本文主要使用RadioGroup+ViewPager来实现滑动界面，使用ActionBar来实现顶部菜单栏。先上图（使用GifCam录制）。

Ps：美工是永远的痛，图片是从微信反编译出来的资源里面拿过来用的，不知道为什么用上去就变得这么丑...

项目结构：

java文件：

xml文件：

我们来看一下底部菜单栏的实现。

之前看到网上的实现大部分都是采用TabHost来做的，但是TabActivity在API 13已经被丢弃了，用是可以用，不过编译器会提示你TabActivity已经过时了，建议你采用FragmentActivity。FragmenActivity是一个很有用的类，无论你要使用FragmentTabHost，还是ViewPager，或者两者结合，都需要继承这个类。

而在这里，我使用的是更加简洁的ViewPager+RadioGroup组合。先看xml布局文件：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout    android:orientation="vertical"   android:layout_width="match_parent"   android:layout_height="match_parent"     xmlns:android="http://schemas.android.com/apk/res/android">   <android.support.v4.view.ViewPager      android:id="@+id/main_ViewPager"      android:layout_width="match_parent"      android:layout_height="0dp"      android:layout_weight="1.0"        />       <RadioGroup          android:id="@+id/main_tab_RadioGroup"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_gravity="bottom"         android:background="@color/main_tab_bg"         android:gravity="center_vertical"         android:orientation="horizontal"             >           <RadioButton                android:id="@+id/radio_chats"               style="@style/main_tab"                android:drawableTop="@drawable/icon_chat"               android:text="微信"                 android:checked="true"               />           <RadioButton                android:id="@+id/radio_contacts"               style="@style/main_tab"               android:drawableTop="@drawable/icon_contacts"               android:text="通讯录"               />           <RadioButton                android:id="@+id/radio_discover"               style="@style/main_tab"               android:drawableTop="@drawable/icon_discover"               android:text="发现"               />           <RadioButton             android:id="@+id/radio_me"            style="@style/main_tab"            android:drawableTop="@drawable/icon_me"            android:text="我"                  />       </RadioGroup>   </LinearLayout> 

将ViewPager的layout_height属性设置为0dp，layout_weight属性设置为1.0，用于填充导航栏下菜单栏上的区域，也就是需要滑动的区域。

需要注意的是：RadioButton的style资源文件用于定义其外观属性，如字体颜色、字体大小、背景颜色等，其中android:button必须设置成@null类型，从而去掉单选框。

此外，RadioButton加载的drawable资源为xml文件，其中定义了按钮按下和没按下的显示图片。其中一个xml文件为：

icon_chats.xml

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

至此，xml文件完成。现在我们来看一下java文件。

MainActivity.java

public class MainActivity extends FragmentActivity implements OnCheckedChangeListener{//ViewPager控件private ViewPager main_viewPager ;//RadioGroup控件private RadioGroup main_tab_RadioGroup ;//RadioButton控件private RadioButton radio_chats , radio_contacts , radio_discover , radio_me ;//类型为Fragment的动态数组private ArrayList<Fragment> fragmentList ;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//界面初始函数，用来获取定义的各控件对应的IDInitView();//ViewPager初始化函数InitViewPager();}public void InitView(){main_tab_RadioGroup = (RadioGroup) findViewById(R.id.main_tab_RadioGroup) ;radio_chats = (RadioButton) findViewById(R.id.radio_chats) ;radio_contacts = (RadioButton) findViewById(R.id.radio_contacts) ;radio_discover = (RadioButton) findViewById(R.id.radio_discover) ;radio_me = (RadioButton) findViewById(R.id.radio_me) ;main_tab_RadioGroup.setOnCheckedChangeListener(this);}public void InitViewPager(){main_viewPager = (ViewPager) findViewById(R.id.main_ViewPager);fragmentList = new ArrayList<Fragment>() ;Fragment chatsFragment = new ChatsFragment() ;Fragment contactsFragment = new ContactsFragment();Fragment discoverFragment = new DiscoverFragment();Fragment meFragment = new MeFragment();//将各Fragment加入数组中fragmentList.add(chatsFragment);fragmentList.add(contactsFragment);fragmentList.add(discoverFragment);fragmentList.add(meFragment);//设置ViewPager的设配器main_viewPager.setAdapter(new MyAdapter(getSupportFragmentManager() , fragmentList));//当前为第一个页面main_viewPager.setCurrentItem(0);//ViewPager的页面改变监听器main_viewPager.setOnPageChangeListener(new MyListner());}public class MyAdapter extends FragmentPagerAdapter{ArrayList<Fragment> list ;public MyAdapter(FragmentManager fm , ArrayList<Fragment> list){super(fm);this.list = list ;}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic int getCount() {return list.size();}}public class MyListner implements OnPageChangeListener{@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int arg0) {//获取当前页面用于改变对应RadioButton的状态int current = main_viewPager.getCurrentItem() ;switch(current){case 0:main_tab_RadioGroup.check(R.id.radio_chats);break;case 1:main_tab_RadioGroup.check(R.id.radio_contacts);break;case 2:main_tab_RadioGroup.check(R.id.radio_discover);break;case 3:main_tab_RadioGroup.check(R.id.radio_me);break;}}}@Overridepublic void onCheckedChanged(RadioGroup radioGroup, int CheckedId) {//获取当前被选中的RadioButton的ID，用于改变ViewPager的当前页int current=0;switch(CheckedId){case R.id.radio_chats:current = 0 ;break ;case R.id.radio_contacts:current = 1 ;break;case R.id.radio_discover:current = 2 ;break;case R.id.radio_me:current = 3 ;break ;}if(main_viewPager.getCurrentItem() != current){main_viewPager.setCurrentItem(current);}}}

MainActivity文件中主要是定义ViewPager的适配器和事件监听器，RadioGroup的事件监听器。

加上各Fragment的布局文件和java文件，滑动切换菜单栏就完成了。

如图：

现在菜单栏有了，我们给他加个导航栏。导航栏我们用到的是ActionBar，它是在3.0之后的版本加入的。

首先，我们先编写资源目录下memu文件夹下的main.xml文件。代码如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:context="com.example.mywinxintest.MainActivity" >    <item        android:id="@+id/action_search"        android:actionViewClass="android.widget.SearchView"        android:icon="@drawable/action_search"        android:showAsAction="always|collapseActionView"        android:title="Search"        />        <item        android:id="@+id/action_plus"        android:actionProviderClass="com.example.actionbar.PlusActionProvider"        android:icon="@drawable/action_more"        android:showAsAction="always"        android:title="@null"        /></menu>

在这里我们用到一个类叫做PlusActionProvider，该类是自定义的一个继承ActionProvider的类，它可以将一个Action按钮替换成一个自定义布局。

我们来看一下这个类。

PlusActionProvider.java

public class PlusActionProvider extends ActionProvider{private Context context ;//构造方法public PlusActionProvider(Context context) {super(context);this.context = context ;}@Overridepublic View onCreateActionView() {return null;}@Overridepublic void onPrepareSubMenu(SubMenu submenu){submenu.clear();//增加子菜单并设置点击事件监听器submenu.add("发起群聊").setIcon(R.drawable.action_group_chat).setOnMenuItemClickListener(new OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem arg0) {Toast.makeText(context, "您点击了“发起群聊”选项", 5000).show();return true;}});submenu.add("添加朋友").setIcon(R.drawable.action_add_contacts).setOnMenuItemClickListener(new OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem arg0) {Toast.makeText(context, "您点击了“添加朋友”选项", 5000).show();return true;}});submenu.add("扫一扫").setIcon(R.drawable.action_scan_qr_code).setOnMenuItemClickListener(new OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem arg0) {Toast.makeText(context, "您点击了“扫一扫”选项", 5000).show();return true;}});submenu.add("意见反馈").setIcon(R.drawable.action_feedback).setOnMenuItemClickListener(new OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem arg0) {Toast.makeText(context, "您点击了“意见反馈”选项", 5000).show();return true;}});}@Overridepublic boolean hasSubMenu(){return true;}}

至此，我们的界面完成了。效果图便是文章开头的GIF图片。

其实大家可以发现，我们的导航栏与微信6.0的导航栏还是有所不同的，比如我们的导航栏左边有图标，微信的没有；点击搜索按钮后的界面也不同。

滑动切换菜单栏时，我们没有微信的淡入淡出效果。

对于这些实现，博主也没有找到办法。希望大家知道的可以告诉博主。

虽然没有和微信完全一样，但是相信在一些简单的开发中使用起来也是绰绰有余了。

源码下载地址：http://download.csdn.net/detail/anyfive/8179143