Android基础篇-Android底部导航Tabbar -[ViewPager+RadioGroup+RadioButton+Fragment]实现

先看看效果图吧【可手势滑动】

上面是一种样式，对于中间是个很大的按钮的，就换一个风格，仅提供参考

第一种风格的布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/mainBackground1"
    android:orientation="vertical">

    <com.wzq.light_or_night.widget.NoScrollViewPager
        android:id="@+id/vp_Main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="-12dp"
        android:layout_weight="1"
        android:background="?attr/mainBackground1"/>

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/bg_main_bottom"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingTop="@dimen/dp_5"
        android:paddingBottom="@dimen/dp_5">

        <RadioButton
            android:id="@+id/rb_todo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_weight="1"
            android:background="@color/translate"
            android:button="@null"
            android:drawableTop="@drawable/db_todo_bg"
            android:drawablePadding="@dimen/dp_5"
            android:gravity="center"
            android:text="xxx"
            android:checked="true"
            android:textColor="@drawable/db_main_text_color"
            android:textSize="10sp" />

        <RadioButton
            android:id="@+id/rb_model"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_weight="1"
            android:background="@color/translate"
            android:button="@null"
            android:drawableTop="@drawable/db_model_bg"
            android:drawablePadding="@dimen/dp_5"
            android:gravity="center"
            android:text="xxx"
            android:textColor="@drawable/db_main_text_color"
            android:textSize="10sp" />

        <RadioButton
            android:id="@+id/rb_electrification"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_1"
            android:layout_weight="1"
            android:background="@color/translate"
            android:button="@null"
            android:drawableTop="@drawable/db_electrification_bg"
            android:drawablePadding="@dimen/dp_5"
            android:gravity="center"
            android:text="xxxxx"
            android:textColor="@drawable/db_main_text_color"
            android:textSize="10sp" />

        <RadioButton
            android:id="@+id/rb_consulting"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_weight="1"
            android:background="@color/translate"
            android:button="@null"
            android:drawableTop="@drawable/db_consulting_bg"
            android:drawablePadding="@dimen/dp_5"
            android:gravity="center"
            android:text="xxx"
            android:textColor="@drawable/db_main_text_color"
            android:textSize="10sp" />

        <RadioButton
            android:id="@+id/rb_mine"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_weight="1"
            android:background="@color/translate"
            android:button="@null"
            android:drawableTop="@drawable/db_mine_bg"
            android:drawablePadding="@dimen/dp_5"
            android:gravity="center"
            android:text="xxx"
            android:textColor="@drawable/db_main_text_color"
            android:textSize="10sp" />
    </RadioGroup>


</LinearLayout>

第二种风格的布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".style3.Style3Activity">

    <FrameLayout
        android:id="@+id/fragment_container"
        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/db_todo_bg"
            android:text="今日" />

        <RadioButton
            android:id="@+id/record_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/db_model_bg"
            android:text="记录" />

        <View style="@style/Custom.TabRadioButton"
            />

        <RadioButton
            android:id="@+id/contact_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/db_todo_bg"
            android:text="通讯录" />

        <RadioButton
            android:id="@+id/settings_tab"
            style="@style/Custom.TabRadioButton"
            android:drawableTop="@drawable/db_mine_bg"
            android:text="设置" />
    </RadioGroup>

    <ImageView
        android:id="@+id/sign_iv"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@android:color/transparent"
        android:src="@drawable/default_head"/>
</RelativeLayout>

NoScrollViewPager代码：

package com.wzq.light_or_night.widget;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class NoScrollViewPager extends ViewPager {
    private boolean isScroll;
    public NoScrollViewPager(Context context, AttributeSet attrs){
        super(context, attrs);
    }
    public NoScrollViewPager(Context context) {
        super(context);
    }
    /**
     * 1.dispatchTouchEvent一般情况不做处理
     *,如果修改了默认的返回值,子孩子都无法收到事件
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        return super.dispatchTouchEvent(ev);   // return true;不行
    }
    /**
     * 是否拦截
     * 拦截:会走到自己的onTouchEvent方法里面来
     * 不拦截:事件传递给子孩子
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // return false;//可行,不拦截事件,
        // return true;//不行,孩子无法处理事件
        //return super.onInterceptTouchEvent(ev);//不行,会有细微移动
        if (isScroll){
            return super.onInterceptTouchEvent(ev);
        }else{
            return false;
        }
    }
    /**
     * 是否消费事件
     * 消费:事件就结束
     * 不消费:往父控件传
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        //return false;// 可行,不消费,传给父控件
        //return true;// 可行,消费,拦截事件
        //super.onTouchEvent(ev); //不行,
        //虽然onInterceptTouchEvent中拦截了,
        //但是如果viewpage里面子控件不是viewgroup,还是会调用这个方法.
        if (isScroll){
            return super.onTouchEvent(ev);
        }else {
            return true;// 可行,消费,拦截事件
        }
    }

    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {

        super.setCurrentItem(item, smoothScroll);
    }
    @Override
    public void setCurrentItem(int item) {

        super.setCurrentItem(item, false);
    }
    public void setScroll(boolean scroll) {
        isScroll = scroll;
    }
}

drawble里部分代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"     //点击选择是的样式
        android:drawable="@drawable/select_electrification" />
    <item
        android:state_pressed="true"   //按压时候的样式
        android:drawable="@drawable/select_electrification"/>
    <item android:drawable="@drawable/unselect_electrification"/>
</selector>
····
其他功能模块类似这么写

MainActivity代码：

  public class MainActivity extends BaseActivity {
  private NoScrollViewPager vpMain;
    private RadioButton rbTodo;
    private RadioButton rbModel;
    private RadioButton rbElectrification;
    private RadioButton rbConsulting;
    private RadioButton rbMine;
    private CheckBox mineLight;
    private DrawerLayout drawerLayout1;
    private int index = -1;
    private List<BaseFragment> fragments;
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    private Fragment3 fragment3;
    private Fragment4 fragment4;
    private Fragment5 fragment5;



    @Override
    protected int attachLayoutRes() {
        return R.layout.activity_main;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
//        ChangeModeController.getInstance().init(this,R.attr.class).setTheme(this, 				R.style.AppTheme, R.style.NightAppTheme);
        super.onCreate(savedInstanceState);
    }

    @Override
    protected void initView() {
        vpMain = (NoScrollViewPager) findViewById(R.id.vp_Main);
        rbTodo = (RadioButton) findViewById(R.id.rb_todo);
        rbModel = (RadioButton) findViewById(R.id.rb_model);
        rbElectrification = (RadioButton) findViewById(R.id.rb_electrification);
        rbConsulting = (RadioButton) findViewById(R.id.rb_consulting);
        rbMine = (RadioButton) findViewById(R.id.rb_mine);
    //初始化fragment模块
        initFragments();
        MyPageFragmentAdapter pageFragmentAdapter = new       MyPageFragmentAdapter(getSupportFragmentManager(), fragments);
        vpMain.setAdapter(pageFragmentAdapter);
        vpMain.setOffscreenPageLimit(5);
        vpMain.setScroll(false);//手势滑动切换功能模块
        vpMain.addOnPageChangeListener(new MyOnPageListener() {
            @Override
            public void onMyPageSelected(int position) {
                switch (position) {
                    case 0:
                        rbTodo.setChecked(true);
                        break;
                    case 1:
                        rbModel.setChecked(true);
                        break;
                    case 2:
                        rbElectrification.setChecked(true);
                        break;
                    case 3:
                        rbConsulting.setChecked(true);
                        break;
                    case 4:
                        rbMine.setChecked(true);
                        break;
                }
            }
        });
        changeCurrentViewPage(rbTodo, 0);
        changeCurrentViewPage(rbModel, 1);
        changeCurrentViewPage(rbElectrification, 2);
        changeCurrentViewPage(rbConsulting, 3);
        changeCurrentViewPage(rbMine, 4);

    }
    private void initFragments() {
        if (fragment1 == null) {
            fragment1 = new Fragment1();
        }
        if (fragment2 == null) {
            fragment2 = new Fragment2();
        }
        if (fragment3 == null) {
            fragment3 = new Fragment3();
        }
        if (fragment4 == null) {
            fragment4 = new Fragment4();
        }
        if (fragment5 == null) {
            fragment5 = new Fragment5();
        }

        fragments.add(fragment1);
        fragments.add(fragment2);
        fragments.add(fragment3);
        fragments.add(fragment4);
        fragments.add(fragment5);
    }


    private void changeCurrentViewPage(RadioButton rb, final int pos) {
        rb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    vpMain.setCurrentItem(pos);
                    index = pos;
                }
            }
        });
    }

以上是部分代码，理解的同学就可以自己写了

当然我会贴上我的github 项目地址：https://github.com/KuoLuoC/AndroidDemo1
这个demo东西不止这个，还有抽屉效果、夜间模式等等，希望能帮助到您！觉得不错就给点个赞和star吧！！！！感谢