使用ViewPager+RadioGroup实现仿微信底部导航栏
先看效果图:
PS:本案例使用Android Studio2.2.3开发.
本案例很简单,底部使用了RadioGroup+四个RadioButton作为导航栏,写了四个Drawable,用来显示选中和没选中底下导航栏的背景.
上面使用了ViewPager控件实现与下方导航栏的联动.
先贴一下前台代码:
MainActivity.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="me.worldskills.android.testdemo.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/main_vp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#e1e1e1"/>
<RadioGroup
android:id="@+id/main_rg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rbChat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_chats"
android:gravity="center"
android:text="Chats"
android:textColor="@android:color/darker_gray"/>
<RadioButton
android:id="@+id/rbContact"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_contacts"
android:gravity="center"
android:text="Contacts"
android:textColor="@android:color/darker_gray"/>
<RadioButton
android:id="@+id/rbDiscover"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_discover"
android:gravity="center"
android:text="Discover"
android:textColor="@android:color/darker_gray"/>
<RadioButton
android:id="@+id/rbMe"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_me"
android:gravity="center"
android:text="Me"
android:textColor="@android:color/darker_gray"/>
</RadioGroup>
</LinearLayout>
前台比较简单了,就不细说了,贴一下使用到的Drawable,因为代码差不多,就贴一个,其他改一下显示的图片就行:
selector_chats
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/chat_press" android:state_checked="true"></item>
<item android:drawable="@mipmap/chat_normal" android:state_checked="false"></item>
</selector>
这里用了个
然后我们来看看后台代码:
MainActivity.java:
public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
List<View> lsViews = new ArrayList<>();//声明ViewPager需要使用的View对象
MyPagerAdapter pagerAdapter;//声明适配器对象
RadioButton rbChat, rbContact, rbDiscover, rbMe;
RadioGroup radioGroup;
@Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Initialise Views
viewPager = (ViewPager) findViewById(R.id.main_vp);
radioGroup = (RadioGroup) findViewById(R.id.main_rg);
rbChat = (RadioButton) findViewById(R.id.rbChat);
rbContact = (RadioButton) findViewById(R.id.rbContact);
rbDiscover = (RadioButton) findViewById(R.id.rbDiscover);
rbMe = (RadioButton) findViewById(R.id.rbMe);
rbChat.setChecked(true);
lsViews.add(getLayoutInflater().inflate(R.layout.page_chats, null, false));
lsViews.add(getLayoutInflater().inflate(R.layout.page_contacts, null, false));
lsViews.add(getLayoutInflater().inflate(R.layout.page_discover, null, false));
lsViews.add(getLayoutInflater().inflate(R.layout.page_me, null, false));
pagerAdapter = new MyPagerAdapter(lsViews);
viewPager.setAdapter(pagerAdapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//选中ViewPage页的时候触发该事件
@Override
public void onPageSelected(int position) {
switch (position) {
case 0://Chats
rbChat.setChecked(true);
break;
case 1://Contacts
rbContact.setChecked(true);
break;
case 2://Discover
rbDiscover.setChecked(true);
break;
case 3://Me
rbMe.setChecked(true);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//设置Radio选中的时候切换ViewPager
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
switch (i) {
case R.id.rbChat:
viewPager.setCurrentItem(0);
break;
case R.id.rbContact:
viewPager.setCurrentItem(1);
break;
case R.id.rbDiscover:
viewPager.setCurrentItem(2);
break;
case R.id.rbMe:
viewPager.setCurrentItem(3);
break;
}
}
});
}
}
里面通过监听RadioGroup的子项选择事件和ViewPager的切换监听实现底部导航栏和ViewPager的联动
里面使用到了一个PagerAdapter,也贴一下代码:
public class MyPagerAdapter extends PagerAdapter {
List<View> lsViews = new ArrayList<>();//存储ViewPager需要的View
//构造方法，用来传递View列表
public MyPagerAdapter(List<View> lsViews) {
this.lsViews = lsViews;
}
//更新视图数据
public void Update(List<View> lsViews) {
this.lsViews = lsViews;
}
//获得视图数量
@Override
public int getCount() {
return lsViews.size();
}
//用来判断当前视图是否需要缓存
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//翻页的时候移除之前的视图
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lsViews.get(position));
}
//翻页的时候加载新的视图
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(lsViews.get(position));
return lsViews.get(position);
}
}
好了,就这么多了~
案例下载地址:http://download.csdn.net/download/garnett_nirvana/9981559