BottomGroup

前言

还有一年毕业，在北京实习，每天除了工作之外就比较闲了，闲来无事就想搞个博客，刚好写了一个简单的自定义控件，类似于QQ和微信那样的底部按钮组，之前一直用RadioGroup和RadioButton来实现这个功能，加上不同的选择器实现这个功能，但写的多了，就感觉很麻烦，就尝试自己封装一下，实现起来也不是很难，就拿来讲一讲，算是第一篇技术博客（技术？？？）。

闲话不多说，让我们开始吧。

效果图

---

实现了以下的效果：
1.为每个按钮设置监听
2.按下按钮后改变按钮的颜色和字体的颜色

---

使用

这个自定义控件使用起来也非常的简单，只需要我们传入一些必要的参数就可以使用了。

在XML中：
因为是继承于RadioGroup，所有我们使用RadioGroup的方法就可以了。

<com.example.olay.downview.View.BottomGroup
    android:id="@+id/bottomGroup"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_below="@id/image"
    android:layout_centerVertical="true"
    android:orientation="horizontal" />

在Activity中：

    bottomGroup.setId(id);//按钮id
    bottomGroup.setText(text);//按钮文本
    bottomGroup.setNormal_img(normal_img);//按钮自然的图片
    bottomGroup.setPress_img(press_img);//按钮被按下时的图片
    bottomGroup.setColor(color);//按钮文本平常和被按下时的颜色
    bottomGroup.setOnButtonListener(new BottomGroup.OnButtonListener() {
        @Override
        public void OnClick(int which) {

        }
    });//监听
    bottomGroup.start();//开始初始化

完成以上的操作，就可以得到一个底部按钮组了。

实现

---

之前说过是RadioGroup和RadioButton，那么这个自定义控件无非就是重写RadioGroup，在里面动态的添加RadioButton就是了。
我们先自定义一个BottomGroup来继承RadioGroup，并且实现它的构造函数。

public class BottomGroup extends RadioGroup {
 public BottomGroup(Context context) {
    this(context, null);
}

public BottomGroup(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
}
}

之后，我们需要使用者传入一些参数，来帮助我们完成初始化。

//每个按钮的id
private int[] id;
//每个按钮的文本
private String[] text;
//平常的图片
private int[] normal_img;
//按下的图片
private int[] press_img;
//文字的平常和按下时的颜色
private int[] color;
private Context context;

在直接通过setXXX方法完成初始化后，我们就要通过传入的参数初始化RadioButton了，我们要明白我们需要动态的去完成哪些个功能。

1.设置DrawingTop（文字上方的图片）

2.为每个RadioButton添加权重

3.每个按钮居中处理

4.去掉RadioButton自带的小圆点

那我们一个一个的完成它们

设置DrawingTop
Drawable drawable = getResources().getDrawable(normal_img[i]);
drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
//四个参数分别为left,top,right,bottom不同方向的图片
radioButton.setCompoundDrawables(null, drawable, null, null);
//设置权重,默认均等分
LayoutParams layoutParams = new LayoutParams
(0, ViewGroup.LayoutParams.MATCH_PARENT, 1.0f);
radioButton.setLayoutParams(layoutParams);
 //居中
radioButton.setGravity(Gravity.CENTER);
 //去掉左边的小圆点
radioButton.setButtonDrawable(new BitmapDrawable());

最后我们需要为每个RadioButton设置监听，使用监听来改变它们本点击时的文本和图标，同时回调我们的自己实现的监听事件。

radioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    //改变字体颜色和图片状态
                    Drawable drawable = getResources().getDrawable(press_img[finalI]);
                    drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
                    radioButton.setCompoundDrawables(null, drawable, null, null);
                    radioButton.setTextColor(color[0]);

                } else {
                    Drawable drawable = getResources().getDrawable(normal_img[finalI]);
                    drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
                    radioButton.setCompoundDrawables(null, drawable, null, null);
                    radioButton.setTextColor(color[1]);
                }
            }
        });

按钮被点击后要实现我们自己需要的逻辑，需要一个监听接口来设置，在RadioButton的监听中实现。

//监听接口
public interface OnButtonListener {
    void OnClick(int which);
}

private OnButtonListener listener;

public void setOnButtonListener(OnButtonListener listener) {
    this.listener = listener;
}

这样我们就实现我们所有需要的功能

---

完整代码

public class BottomGroup extends RadioGroup {
//每个按钮的id
private int[] id;
//每个按钮的文本
private String[] text;
//平常的图片
private int[] normal_img;
//按下的图片
private int[] press_img;
//文字的平常和按下时的颜色
private int[] color;
private Context context;

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

public BottomGroup(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
}

public void setColor(int[] color) {
    this.color = color;
}

//设置按钮参数
public void start() {
    for (int i = 0; i < id.length; i++) {
        final RadioButton radioButton = new RadioButton(context);
        radioButton.setId(id[i]);
        radioButton.setText(text[i]);

        //设置drawingTop
        Drawable drawable = getResources().getDrawable(normal_img[i]);
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        radioButton.setCompoundDrawables(null, drawable, null, null);

        //设置权重,默认均等分
        LayoutParams layoutParams = new LayoutParams
                (0, ViewGroup.LayoutParams.MATCH_PARENT, 1.0f);
        radioButton.setLayoutParams(layoutParams);
        //居中
        radioButton.setGravity(Gravity.CENTER);

        final int finalI = i;
        radioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    //改变字体颜色和图片状态
                    Drawable drawable = getResources().getDrawable(press_img[finalI]);
                    drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
                    radioButton.setCompoundDrawables(null, drawable, null, null);
                    radioButton.setTextColor(color[0]);
                    listener.OnClick(finalI);
                } else {
                    Drawable drawable = getResources().getDrawable(normal_img[finalI]);
                    drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
                    radioButton.setCompoundDrawables(null, drawable, null, null);
                    radioButton.setTextColor(color[1]);
                }
            }
        });
        //去掉左边的小圆点
        radioButton.setButtonDrawable(new BitmapDrawable());
        if (i == 0)
            radioButton.setChecked(true);
        addView(radioButton);
    }
}

public void setId(int[] id) {
    this.id = id;
}

public void setText(String[] text) {
    this.text = text;
}

public void setNormal_img(int[] normal_img) {
    this.normal_img = normal_img;
}

public void setPress_img(int[] press_img) {
    this.press_img = press_img;
}

//监听接口
public interface OnButtonListener {
    void OnClick(int which);
}

private OnButtonListener listener;

public void setOnButtonListener(OnButtonListener listener) {
    this.listener = listener;
}

}

结束语

文章到这里就差不多结束了，毕竟是第一篇博客，缺少各种各样的经验，讲的可能也不是很好，望各位海涵。附上Github源码地址。

https://github.com/Hyyzt/BottomGroup
也可以直接添加依赖

dependencies {
        compile 'com.github.Hyyzt:BottomGroup:1.0.0'
}