android自定义底部导航

之前做android底部导航一般有两种思路：

1、用LinearLayout做容器，里面嵌套其它的view作为item，这样做必须每个item都设置点击事件监听，还要每次点击都清空所有item中的子view（一般有图片和文字）的选中状态，让后再设置当前item的状态为选中，感觉很麻烦

2、使用RadioGroup，相对来说简洁一点，只要设置setCheckedChangeListener就可以了，缺点是里面只能放RadioButton，很不灵活

于是自己琢磨，参照RadioGroup做了一个自己的底部导航控件，源码如下：

 

 

package com.feng.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.IdRes;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import com.feng.myproject.R;

/**
 * Created by feng on 2017/6/11.
 */

public class SurperRadioGroup extends LinearLayout {
    private int selectedId = -1;
    private OnCheckedChangeListener checkedChangeListener;

    public SurperRadioGroup(Context context) {
        this(context, null);
    }

    public SurperRadioGroup(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SurperRadioGroup(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray attributes = context.obtainStyledAttributes(
                attrs, R.styleable.SurperRadioGroup);
        int value = attributes.getResourceId(R.styleable.SurperRadioGroup_selectedId, View.NO_ID);
        if (value != -1) {
            selectedId = value;
        }
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (selectedId != -1) {
            View selectedView = findViewById(selectedId);
            if (selectedView != null) {
                selectedView.setSelected(true);
            }
        }
        addClickListener(child);
        super.addView(child, index, params);
    }

    private void addClickListener(final View child) {
        if (child != null) {
            child.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (v.isSelected()) {
                        return;
                    }
                    int count = getChildCount();
                    for (int i = 0; i < count; i++) {
                        View child = getChildAt(i);
                        cleanSelectStatus(child);
                    }
                    setSelected(v, true);
                    if (checkedChangeListener != null) {
                        checkedChangeListener.onCheckedChanged(SurperRadioGroup.this, child.getId());
                    }
                }
            });
        }
    }

    private void cleanSelectStatus(View v) {
        setSelected(v, false);
    }

    private void setSelected(View view, boolean selected) {
        selectedId = view.getId();
        view.setSelected(selected);
        if (view instanceof ViewGroup) {
            int count = ((ViewGroup) view).getChildCount();
            for (int i = 0; i < count; i++) {
                View child = ((ViewGroup) view).getChildAt(i);
                if (child instanceof ViewGroup) {
                    setSelected(child, selected);
                } else {
                    child.setSelected(selected);
                }
            }
        }
    }

    public int getSelectedId() {
        return selectedId;
    }

    public void setCheckedChangeListener(OnCheckedChangeListener checkedChangeListener) {
        this.checkedChangeListener = checkedChangeListener;
    }

    public interface OnCheckedChangeListener {
        void onCheckedChanged(SurperRadioGroup group, @IdRes int checkedId);
    }
}

 

 

 

values目录下新建一个attrs.xml文件，内容如下：

 

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="SurperRadioGroup">
        <attr name="selectedId" format="reference"/>
    </declare-styleable>
</resources>

 

 

 

布局文件：

 

<?xml version="1.0" encoding="utf-8"?>
<com.feng.view.SurperRadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:selectedId="@+id/contacts"
    android:orientation="horizontal">

    <RelativeLayout
        android:id="@+id/contacts"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/icon1"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/contacts_img_bg" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/icon1"
            android:layout_centerHorizontal="true"
            android:text="联系人"
            android:textColor="@drawable/contacts_tv_color" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/icon2"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/message_img_bg" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/icon2"
            android:textColor="@drawable/message_tv_color"
            android:layout_centerHorizontal="true"
            android:text="信息" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/news"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/icon3"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/news_img_bg" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/icon3"
            android:textColor="@drawable/news_tv_color"
            android:layout_centerHorizontal="true"
            android:text="新闻" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/icon4"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:background="@drawable/setting_img_bg" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/icon4"
            android:layout_centerHorizontal="true"
            android:textColor="@drawable/setting_tv_color"
            android:text="设置" />
    </RelativeLayout>

</com.feng.view.SurperRadioGroup>

 

 

 

 

 

MainActivity中如下调用：

 

SurperRadioGroup surperRadioGroup = (SurperRadioGroup) findViewById(R.id.bottom_nav);
surperRadioGroup.setCheckedChangeListener(new SurperRadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(SurperRadioGroup group, @IdRes int checkedId) {
        switch (checkedId) {
            case R.id.contacts:
                Log.e("radio", "联系人");
                break;
            case R.id.message:
                Log.e("radio", "信息");
                break;
            case R.id.news:
                Log.e("radio", "新闻");
                break;
            case R.id.setting:
                Log.e("radio", "设置");
                break;
        }
    }
});

 

 

 

联系人item的图标background：

 

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

    <item android:state_selected="true" android:drawable="@mipmap/contacts_selected"/>
    <item android:state_selected="false" android:drawable="@mipmap/contacts_unselected"/>
</selector>

 

 

 

联系人item的文字color：

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/holo_blue_bright" android:state_selected="true"/>
    <item android:color="#000000" android:state_selected="false"/>
    <item android:color="#000000"/>
</selector>

 

 

 

第一次写博客，写的不好请谅解！