Android 底部导航栏

运用技术:RadioGroup + ViewPager

RadioGroup :选项控件,由RadioGroupRadioButton两部分组成,前者为单选按钮组,后者为单选按钮。

RadioGroup时,RadioButton可全被选中;
多个RadioButtonRadioGroup包含时,RadioButton只可选择一个,从而达到单选的目的。并用setOnCheckChangeLinstener()来监听单选按钮。

ViewPager
这是一种比较常见了的,下面 4 个 tab 的导航按钮,可以切换不同的页面,这里页面使用了 ViewPager + Fragment 的组合,实现了滑动的页面效果,也可以不使用 ViewPager,这个根据产品的定义来使用即可。

1.布局文件

<android.support.v4.view.ViewPager
    android:id="@+id/fragment_vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tabs_rg" />

<RadioGroup
    android:id="@+id/tabs_rg"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:background="#dcdcdc"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/today_tab"
        style="@style/Custom.TabRadioButton"
        android:checked="true"
        android:drawableTop="@drawable/tab_sign_selector"
        android:text="首页" />

    <RadioButton
        android:id="@+id/record_tab"
        style="@style/Custom.TabRadioButton"
        android:drawableTop="@drawable/tab_record_selector"
        android:text="生活" />

    <RadioButton
        android:id="@+id/contact_tab"
        style="@style/Custom.TabRadioButton"
        android:drawableTop="@drawable/tab_contact_selector"
        android:text="商城" />

    <RadioButton
        android:id="@+id/settings_tab"
        style="@style/Custom.TabRadioButton"
        android:drawableTop="@drawable/tab_setting_selector"
        android:text="业务" />
</RadioGroup>
  1. Activity 类

public class Style2Activity extends AppCompatActivity {
private ViewPager mViewPager;
private RadioGroup mTabRadioGroup;

private List<Fragment> mFragments;
private FragmentPagerAdapter mAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_style2);
    initView();
}

private void initView() {
    // find view
    mViewPager = findViewById(R.id.fragment_vp);
    mTabRadioGroup = findViewById(R.id.tabs_rg);
    // init fragment
    mFragments = new ArrayList<>(4);
    mFragments.add(BlankFragment.newInstance("今日"));
    mFragments.add(BlankFragment.newInstance("记录"));
    mFragments.add(BlankFragment.newInstance("通讯录"));
    mFragments.add(BlankFragment.newInstance("设置"));
    // init view pager
    mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
    mViewPager.setAdapter(mAdapter);
    // register listener
    mViewPager.addOnPageChangeListener(mPageChangeListener);
    mTabRadioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
}

@Override
protected void onDestroy() {
    super.onDestroy();
    mViewPager.removeOnPageChangeListener(mPageChangeListener);
}

private ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        RadioButton radioButton = (RadioButton) mTabRadioGroup.getChildAt(position);
        radioButton.setChecked(true);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
};

private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        for (int i = 0; i < group.getChildCount(); i++) {
            if (group.getChildAt(i).getId() == checkedId) {
                mViewPager.setCurrentItem(i);
                return;
            }
        }
    }
};

private class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> mList;

    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.mList = list;
    }

    @Override
    public Fragment getItem(int position) {
        return this.mList == null ? null : this.mList.get(position);
    }

    @Override
    public int getCount() {
        return this.mList == null ? 0 : this.mList.size();
    }
}
} 

这里唯一注意点的就是两个监听事件,要实现底部导航按钮和页面的联动。

参考原文地址:https://blog.csdn.net/afei__/article/details/80950288

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值