最近在做一个项目，一个界面的按钮UI给画成了这样（默认状态是蓝色的然后触摸后变成灰色的）

UI效果

然后本着给低版本系统APP适配的职业素养（其实是不想画这种按钮），想让UI兄弟给将图标改成整个按钮效果的图片，可是。。。人说人也很忙不给俺做咋办。。。。没办法只好自己写了一个满足这种需求的按钮了。。。

职业素养

整体流程如下

实现流程

下面说一下主要功能的实现代码

○动态的修改控件大小，这里没什么难处，主要是动态修改控件大小的代码要放在onLayout方法里，之前试了onMeasure方法里设置然并卵。

@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {    super.onLayout(changed, l, t, r, b);    int width = getWidth();    LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) imageView.getLayoutParams();    layoutParams.width= (int) (width*0.5);    layoutParams.height=(int) (width*0.5);    layoutParams.topMargin=(int) (width*0.05);    textView.setTextSize((float) (width*0.09));}

○重写onTouchEvent，实现点击效果，这里是通过判断按下、抬起来动态的设置显示效果

@Overridepublic boolean onTouchEvent(MotionEvent event) {    switch (event.getAction()){        case MotionEvent.ACTION_DOWN:;            if(pressImage!=0){                imageView.setImageResource(pressImage);            }            break;        case MotionEvent.ACTION_UP:            textView.setTextColor(textcolorDefault);            if(defaultImage!=0){                imageView.setImageResource(defaultImage);            }            break;    }    return true;}

○添加点击事件，这里选择在抬起的时候执行点击事件

//点击事件接口public interface MyStateButtonClickListener {    void onClick(View view);} @Overridepublic boolean onTouchEvent(MotionEvent event) {    switch (event.getAction()){        case MotionEvent.ACTION_DOWN:;            textView.setTextColor(textcolorPress);            if(pressImage!=0){                imageView.setImageResource(pressImage);            }            break;        case MotionEvent.ACTION_UP:            textView.setTextColor(textcolorDefault);            if(defaultImage!=0){                imageView.setImageResource(defaultImage);            }            //抬起时执行点击事件            if(myStateButtonClickListener!=null){                myStateButtonClickListener.onClick(view);            }            break;    }    return true;}

○通过代码添加边框，并添加自定义属性（默认图片、点击图片、默认文字颜色、点击文字颜色、边框宽度、边框圆角大小、默认边框颜色、点击边框颜色）

○attrs文件

○获取属性值

//        初始化GradientDrawable用于显示边框    defaultDrawable = new GradientDrawable();    pressDrawable = new GradientDrawable();    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyStateButton);    if(typedArray!=null){//            默认图片        defaultImage = typedArray.getResourceId(R.styleable.MyStateButton_defaultImage, R.mipmap.one);//            点击图片        pressImage = typedArray.getResourceId(R.styleable.MyStateButton_pressImage, R.mipmap.one_press);//            设置文字        String text = typedArray.getString(R.styleable.MyStateButton_text);//            默认文字颜色        textcolorDefault = typedArray.getColor(R.styleable.MyStateButton_defaultTextColor, Color.parseColor("#567DBF"));//            点击文字颜色        textcolorPress = typedArray.getColor(R.styleable.MyStateButton_pressTextColor, Color.parseColor("#BFBFBF"));        imageView.setImageResource(defaultImage);        textView.setTextColor(textcolorDefault);        textView.setText(text);//            默认边框颜色        borderColorDefault = typedArray.getColor(R.styleable.MyStateButton_defaultBorderColor, Color.parseColor("#567DBF"));//            点击边框颜色        borderColorPress = typedArray.getColor(R.styleable.MyStateButton_pressBorderColor, Color.parseColor("#BFBFBF"));//            边框宽度        borderWidth = typedArray.getInteger(R.styleable.MyStateButton_borderWidth, 2);//            边框圆角大小        cornerRadius = typedArray.getFloat(R.styleable.MyStateButton_cornerRadius, 8);        defaultDrawable.setStroke(borderWidth,borderColorDefault);        pressDrawable.setStroke(borderWidth,borderColorPress);        defaultDrawable.setCornerRadius(cornerRadius);        pressDrawable.setCornerRadius(cornerRadius);        setBackground(defaultDrawable);    }

最终效果

最终效果

附上源码地址

个人博客