RadioButton实现底部菜单导航

来源：互联网发布：sql查询学生总分编辑：程序博客网时间：2024/05/23 07:25

大致思路：

使用Radiobutton做为菜单键。

首先创建XML文件

在res下drawable文件夹中创建selector.xml文件，为Radiobutton设置选择器

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@mipmap/bottom_tab_home_selected" android:state_checked="true"/>    <item android:drawable="@mipmap/bottom_tab_home_normal" /></selector>

bottom_bab_home_normal为未选中状态，bottom_bab_home_selected为选中状态。

然后为Radiobutton下的文字设选中状态，变颜色

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:color="#fc6b87" android:state_checked="true"></item>    <item android:color="#c1c1c1"></item></selector>

然后在main.xml布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.bwei.test.radiobutton.MainActivity">    <com.bwei.test.radiobutton.NoScrollViewPgaer        android:id="@+id/vp_showing_home"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"/>    <View        android:layout_width="match_parent"        android:layout_height="2dp"        android:background="#cccccc"/>    <RadioGroup        android:id="@+id/rg_home"        android:layout_marginTop="2dp"        android:orientation="horizontal"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <RadioButton            android:id="@+id/rb1"            android:button="@null"            android:checked="true"            android:layout_gravity="center_horizontal"            android:gravity="center_horizontal"            android:drawableTop="@drawable/radiobutton_home"            android:layout_weight="1"            android:layout_width="0dp"            android:text="首页"            android:textColor="@drawable/text_home"            android:layout_height="wrap_content" />        <RadioButton            android:id="@+id/rb2"            android:button="@null"            android:layout_gravity="center_horizontal"            android:gravity="center_horizontal"            android:drawableTop="@drawable/radiobutton_category"            android:layout_weight="1"            android:layout_width="0dp"            android:text="分类"            android:textColor="@drawable/text_home"            android:layout_height="wrap_content" />        <RadioButton            android:id="@+id/rb3"            android:button="@null"            android:layout_gravity="center_horizontal"            android:gravity="center_horizontal"            android:drawableTop="@drawable/radiobutton_cart"            android:layout_weight="1"            android:layout_width="0dp"            android:text="购物车"            android:textColor="@drawable/text_home"            android:layout_height="wrap_content" />        <RadioButton            android:id="@+id/rb4"            android:button="@null"            android:layout_gravity="center_horizontal"            android:gravity="center_horizontal"            android:drawableTop="@drawable/radiobutton_mine"            android:layout_weight="1"            android:layout_width="0dp"            android:text="我的"            android:textColor="@drawable/text_home"            android:layout_height="wrap_content" />    </RadioGroup></LinearLayout>

这样可以简单地实现点击Radiobutton变色。

这里我的viewpager是自定义的，我将它设置成不可滑动的效果

代码：

package com.bwei.test.radiobutton;import android.content.Context;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.MotionEvent;/** * 1.设置viewpager不滑动 * 2. * 3.2016/11/28 */public class NoScrollViewPgaer extends ViewPager {    public NoScrollViewPgaer(Context context) {        super(context);    }    public NoScrollViewPgaer(Context context, AttributeSet attrs) {        super(context, attrs);    }    /**     * 不消费     * @param ev     * @return     */    @Override    public boolean onTouchEvent(MotionEvent ev) {        return false;    }    /**     * 不阻断     * @param ev     * @return     */    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        return false;    }}

接着创建4个Fragment，我简单的创建了4个

public class Fragment1  extends Fragment{    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        TextView tv=new TextView(getActivity());        tv.setText("第一个界面");        return tv;    }}

在MainActivity中设置

package com.bwei.test.radiobutton;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.widget.RadioGroup;public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {    private ViewPager vp;    private RadioGroup rg;    private Fragment fragment;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        vp=(ViewPager) findViewById(R.id.vp_showing_home);        rg=(RadioGroup) findViewById(R.id.rg_home);        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int position) {                fragment = null;                switch (position){                    case 0:                        fragment =new Fragment1();                        break;                    case 1:                        fragment =new Fragment2();                        break;                    case 2:                        fragment =new Fragment3();                        break;                    case 3:                        fragment =new Fragment4();                        break;                }                return fragment;            }            @Override            public int getCount() {                return 4;            }        });        rg.setOnCheckedChangeListener(this);    }    @Override    public void onCheckedChanged(RadioGroup radioGroup, int i) {        switch (i) {            case R.id.rb1:                vp.setCurrentItem(0);                break;            case R.id.rb2:                vp.setCurrentItem(1);                break;            case R.id.rb3:                vp.setCurrentItem(2);                break;            case R.id.rb4:                vp.setCurrentItem(3);                break;        }    }}

这样就可以实现完整的效果还是很简单的。最后附上效果图：

0 0