安卓学习Android那点事我爱编程

Android底部导航栏之RadioButton

2017-04-09  本文已影响562人  NickelFox

一. 简介

1.1 原理

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

1.2 用到东西

1.3 注意事项

图标太大的导航栏

二. 实现

<?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>
<?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>
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

上一篇下一篇

猜你喜欢

热点阅读