最近在做一個項目，一個界面的按鈕UI給畫成了這樣（默認(rèn)狀態(tài)是藍(lán)色的然后觸摸后變成灰色的）
UI效果
然后本著給低版本系統(tǒng)APP適配的職業(yè)素養(yǎng)（其實是不想畫這種按鈕），想讓UI兄弟給將圖標(biāo)改成整個按鈕效果的圖片，可是。。。人說人也很忙不給俺做咋辦。。。。沒辦法只好自己寫了一個滿足這種需求的按鈕了。。。
職業(yè)素養(yǎng)
整體流程如下
實現(xiàn)流程
下面說一下主要功能的實現(xiàn)代碼
○動態(tài)的修改控件大小，這里沒什么難處，主要是動態(tài)修改控件大小的代碼要放在onLayout方法里，之前試了onMeasure方法里設(shè)置然并卵。
@Override
protected 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，實現(xiàn)點擊效果，這里是通過判斷按下、抬起來動態(tài)的設(shè)置顯示效果
@Override
public 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;
}
○添加點擊事件，這里選擇在抬起的時候執(zhí)行點擊事件
//點擊事件接口
public interface MyStateButtonClickListener {
void onClick(View view);
}
@Override
public 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);
}
//抬起時執(zhí)行點擊事件
if(myStateButtonClickListener!=null){
myStateButtonClickListener.onClick(view);
}
break;
}
return true;
}
○通過代碼添加邊框，并添加自定義屬性（默認(rèn)圖片、點擊圖片、默認(rèn)文字顏色、點擊文字顏色、邊框?qū)挾?、邊框圓角大小、默認(rèn)邊框顏色、點擊邊框顏色）
○attrs文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyStateButton">
<attr name="defaultImage" format="reference"/>
<attr name="pressImage" format="reference"/>
<attr name="text" format="string"/>
<attr name="defaultTextColor" format="color"/>
<attr name="pressTextColor" format="color"/>
<attr name="defaultBorderColor" format="color"/>
<attr name="pressBorderColor" format="color"/>
<attr name="cornerRadius" format="float"/>
<attr name="borderWidth" format="integer"/>
</declare-styleable>
</resources>
○獲取屬性值
// 初始化GradientDrawable用于顯示邊框
defaultDrawable = new GradientDrawable();
pressDrawable = new GradientDrawable();
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyStateButton);
if(typedArray!=null){
// 默認(rèn)圖片
defaultImage = typedArray.getResourceId(R.styleable.MyStateButton_defaultImage, R.mipmap.one);
// 點擊圖片
pressImage = typedArray.getResourceId(R.styleable.MyStateButton_pressImage, R.mipmap.one_press);
// 設(shè)置文字
String text = typedArray.getString(R.styleable.MyStateButton_text);
// 默認(rèn)文字顏色
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);
// 默認(rèn)邊框顏色
borderColorDefault = typedArray.getColor(R.styleable.MyStateButton_defaultBorderColor, Color.parseColor("#567DBF"));
// 點擊邊框顏色
borderColorPress = typedArray.getColor(R.styleable.MyStateButton_pressBorderColor, Color.parseColor("#BFBFBF"));
// 邊框?qū)挾? 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);
}
最終效果
最終效果
