仿微信底部导航栏的实现

使用ViewPager+RadioGroup实现仿微信底部导航栏

先看效果图:

PS:本案例使用Android Studio2.2.3开发.

本案例很简单,底部使用了RadioGroup+四个RadioButton作为导航栏,写了四个Drawable,用来显示选中和没选中底下导航栏的背景.

上面使用了ViewPager控件实现与下方导航栏的联动.

先贴一下前台代码:

MainActivity.xml:

<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>

前台比较简单了,就不细说了,贴一下使用到的Drawable,因为代码差不多,就贴一个,其他改一下显示的图片就行:

selector_chats

这里用了个标签,选中的时候和未选中的时候显示不同的图片即可

然后我们来看看后台代码:

MainActivity.java:

public class MainActivity extends AppCompatActivity {

ViewPager viewPager;
List 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 lsViews = new ArrayList<>();//存储ViewPager需要的View

//构造方法，用来传递View列表
public MyPagerAdapter(List lsViews) {
this.lsViews = lsViews;
}

//更新视图数据
public void Update(List 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