一. 简介

1.1 原理

就是用RadioButton实现一组导航栏的布局，然后处理点击事件，动态替换Fragment

1.2 用到东西

RadioButton

StateListDrawable

1.3 注意事项

图片不能太大，太大会导致效果不好，如图

图标太大的导航栏

二. 实现

编写布局

activity_main.xml

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="cn.foxnickel.radiobuttonnavigation.MainActivity">

android:id="@+id/radio_group"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="@android:color/white"

android:orientation="horizontal">

android:id="@+id/rb_home"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

android:background="@null"

android:button="@null"

android:checked="true"

android:drawableTop="@drawable/radiobutton_bg_home"

android:gravity="center"

android:padding="8dp"

android:text="Home"

android:textSize="16sp"/>

android:id="@+id/rb_like"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

android:background="@null"

android:button="@null"

android:drawableTop="@drawable/radiobutton_bg_like"

android:gravity="center"

android:padding="8dp"

android:text="Like"

android:textSize="16sp"/>

android:id="@+id/rb_location"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

android:background="@null"

android:button="@null"

android:drawableTop="@drawable/radiobutton_bg_location"

android:gravity="center"

android:padding="8dp"

android:text="Location"

android:textSize="16sp"/>

android:id="@+id/rb_me"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content"

android:background="@null"

android:button="@null"

android:drawableTop="@drawable/radiobutton_bg_me"

android:gravity="center"

android:padding="8dp"

android:text="Me"

android:textSize="16sp"/>

android:layout_width="match_parent"

android:layout_height="2dp"

android:background="#eeeeee"

android:layout_above="@id/radio_group"/>

其中用到的drawableTop为StateListDrawable

content_main.xml

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:tools="http://schemas.android.com/tools"

android:orientation="vertical"

tools:showIn="@layout/activity_main">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/app_name"

android:textSize="24sp"

android:textColor="@color/colorPrimary"/>

处理逻辑

MainActivity

package cn.foxnickel.radiobuttonnavigation;

import android.os.Bundle;

import android.support.v4.content.ContextCompat;

import android.support.v7.app.AppCompatActivity;

import android.widget.RadioButton;

import android.widget.RadioGroup;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{

RadioButton mHome,mLike,mLocation,mMe;

RadioGroup mRadioGroup;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

}

private void initView(){

mHome = (RadioButton) findViewById(R.id.rb_home);

mLike = (RadioButton) findViewById(R.id.rb_like);

mLocation = (RadioButton) findViewById(R.id.rb_location);

mMe = (RadioButton) findViewById(R.id.rb_me);

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

mRadioGroup.setOnCheckedChangeListener(this);

}

/*RadioGroup点击事件*/

@Override

public void onCheckedChanged(RadioGroup group, int checkedId) {

switch (checkedId) {

case R.id.rb_home:

// TODO: 2017/4/9 进行fragment的替换

Toast.makeText(MainActivity.this,"Home",Toast.LENGTH_SHORT).show();

break;

case R.id.rb_location:

// TODO: 2017/4/9 进行fragment的替换

Toast.makeText(MainActivity.this,"Location",Toast.LENGTH_SHORT).show();

break;

case R.id.rb_like:

// TODO: 2017/4/9 进行fragment的替换

Toast.makeText(MainActivity.this,"Like",Toast.LENGTH_SHORT).show();

break;

case R.id.rb_me:

// TODO: 2017/4/9 进行fragment的替换

Toast.makeText(MainActivity.this,"Me",Toast.LENGTH_SHORT).show();

break;

}

setTabState();//每次点击之后设置RadioButton的颜色状态

}

private void setTabState() {

setHomeState();

setLocationState();

setLikeState();

setMeState();

}

/*设置HomeRadioButton的状态*/

private void setHomeState() {

if (mHome.isChecked()) {

mHome.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary));

} else {

mHome.setTextColor(ContextCompat.getColor(this, R.color.black));

}

}

/*设置LocationRadioButton的状态*/

private void setLocationState() {

if (mLocation.isChecked()) {

mLocation.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary));

} else {

mLocation.setTextColor(ContextCompat.getColor(this, R.color.black));

}

}

/*设置LikeRadioButton的状态*/

private void setLikeState() {

if (mLike.isChecked()) {

mLike.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary));

} else {

mLike.setTextColor(ContextCompat.getColor(this, R.color.black));

}

}

/*设置MeRadioButton的状态*/

private void setMeState() {

if (mMe.isChecked()) {

mMe.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary));

} else {

mMe.setTextColor(ContextCompat.getColor(this, R.color.black));

}

}

}