RadioGroup+FrameLayout实现底部导航页面

 

这是非常常见的底部导航页面，以前写的时候非常流畅的就能写出来，但是今天用的时候居然写了好长时间，所以感觉还是写到csdn上吧，别过几个月再用再忘得一干二净的；

 

首先说下布局，下面是RadioGroup，设置横向排序，里面放四个RadioButton，宽度设置等分；

里面放一个背景图片，然后设置状态选择器，然后设置文字，仍然设置一个状态选择器；

 

    <!--主页RadioButton的样式-->
    <style name="sytle_RadioButton">

        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@null</item>
        <item name="android:button">@null</item>
        <item name="android:drawablePadding">3dp</item>
        <item name="android:gravity">center_horizontal</item>

    </style>

 

 

上面就是一个FrameLayout,通过点击下面的RadioButton用不同的Fragment替换FrameLayout布局；

activity的布局就不粘了，因为里面都是抽取的样式，和@string @color 就算粘出来也看不清，到最后会提供免费的源码，需要的朋友们可以免费下载

 

这里我们先看下activity的代码：

 

public class MainActivity extends BaseActivity implements RadioGroup.OnCheckedChangeListener {

    private RadioGroup mRadioGroup;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {

        mRadioGroup= (RadioGroup) findViewById(R.id.radioGroup);

        mRadioGroup.setOnCheckedChangeListener(this);

        //默认第一个为选中
        mRadioGroup.check(R.id.btn_home);
    }

    @Override
    /**
     * 响应选择改变的监听
     * @ checkedId 是当前选中的RadioButton的ID值
     */
    public void onCheckedChanged(RadioGroup group, int checkedId) {

        Fragment fragment= FragmentFactory.createFragment(checkedId);

        //使用指定的fragment切换当前页面
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.frameLayout,fragment)
                .commit();

    }
}

是不是也非常非常的简单，但是就是这么简单的东西愣是卡了好长时间，看着网上很多哥们的代码真心看不懂，各种选择各种判断；

 

对了，最后给大家说下RadioButton里面图片的问题，其实上次一口气写完是不假，为什么印象不深呢？

因为当时图标切的比较大，写RadioButton里面直接把字压到屏幕外面了，所以哥们当时就想把图片宽高设置的小一点，结果各种搜，各种问，到最后都不能实现...

到最后还特意打电话请教了一位姓马的大神，给我说没办法设置，让UI把图切的小点，当时想：这么坑，不用这种方式了；

今天终于找到方法破解了，就是将图片放到xhdip或者xxhdip中，图标就能变小；

点击打开链接免费下载源码