仿微信底部导航栏的实现

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