一. 简介
1.1 原理
就是用RadioButton实现一组导航栏的布局，然后处理点击事件，动态替换Fragment
1.2 用到东西
- RadioButton
- StateListDrawable
1.3 注意事项
- 图片不能太大，太大会导致效果不好，如图
图标太大的导航栏
二. 实现
- 编写布局
- activity_main.xml
<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="cn.foxnickel.radiobuttonnavigation.MainActivity">
<include layout="@layout/content_main"/>
<RadioGroup
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">
<RadioButton
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"/>
<RadioButton
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"/>
<RadioButton
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"/>
<RadioButton
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"/>
</RadioGroup>
<!--导航栏顶部的阴影-->
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#eeeeee"
android:layout_above="@id/radio_group"/>
</RelativeLayout>
其中用到的drawableTop为StateListDrawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/home_fill" android:state_checked="true"/>
<item android:drawable="@drawable/home"/>
</selector>
- content_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
tools:showIn="@layout/activity_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textSize="24sp"
android:textColor="@color/colorPrimary"/>
</LinearLayout>
- 处理逻辑
- 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));
}
}
}
具体替换fragment逻辑就不再写了，参见Android底部导航栏之BottomNavigationBar
网友评论