转载请注明原文地址: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