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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/anyfive/article/details/41296341

转载请注明原文地址：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 ;
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		//界面初始函数，用来获取定义的各控件对应的ID
		InitView();
		//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 ;
		}
		@Override
		public Fragment getItem(int arg0) {
			return list.get(arg0);
		}
		@Override
		public int getCount() {
			return list.size();
		}
	}

	public class MyListner implements OnPageChangeListener
	{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			
		}

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

		@Override
		public 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;
			}
		}
		
	}
	
	@Override
	public 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 ;
	}

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

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

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

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

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

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

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