简单自定义View让圆角和边框更方便

发表于 | 分类于 |

自定义view，利用Drawable类给View设置背景，不用再去写一大堆shape、selector.xml文件了

1. 定义属性

1
2
3
4
5
6
7
8
9
10
11
12
<!--自定义View属性,背景颜色、按压颜色、边框和圆角等，可以自己扩展-->
<declare-styleable name="SimpleShapeText">
     <attr name="bgColor" format="color"/>
     <attr name="pressColor" format="color"/>
     <attr name="borderColor" format="color"/>
     <attr name="borderWidth" format="dimension"/>
     <attr name="cornerRadius" format="dimension"/>
     <attr name="leftTopRadius" format="dimension"/>
     <attr name="rightTopRadius" format="dimension"/>
     <attr name="leftBottomRadius" format="dimension"/>
     <attr name="rightBottomRadius" format="dimension"/>
</declare-styleable>

2. 初始化属性

1
2
3
4
5
6
7
8
9
10
11
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SimpleShapeText);
bgcolor = ta.getColor(R.styleable.SimpleShapeText_bgColor, Color.TRANSPARENT);
pressColor = ta.getColor(R.styleable.SimpleShapeText_pressColor, Color.TRANSPARENT);
borderColor = ta.getColor(R.styleable.SimpleShapeText_borderColor, Color.TRANSPARENT);
borderWidth = ta.getDimensionPixelOffset(R.styleable.SimpleShapeText_borderWidth, 0);
cornerRadius = ta.getDimensionPixelOffset(R.styleable.SimpleShapeText_cornerRadius, 0);
leftTopRadius = ta.getDimensionPixelOffset(R.styleable.SimpleShapeText_leftTopRadius, 0);
leftBottomRadius = ta.getDimensionPixelOffset(R.styleable.SimpleShapeText_leftBottomRadius, 0);
rightTopRadius = ta.getDimensionPixelOffset(R.styleable.SimpleShapeText_rightTopRadius, 0);
rightBottomRadius = ta.getDimensionPixelOffset(R.styleable.SimpleShapeText_rightBottomRadius, 0);
ta.recycle();

3. 生成背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//生成背景
private Drawable createBgDrawable() {
  if (pressColor != Color.TRANSPARENT) {//StateListDrawable实现按压效果
         StateListDrawable stateListDrawable = new StateListDrawable();
         stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, 				getDrawable(pressColor));
         stateListDrawable.addState(new int[]{}, getDrawable(bgcolor));
          return stateListDrawable;
        } else {
            return getDrawable(bgcolor);
        }
    }
//获取drawable
private GradientDrawable getDrawable(int color) {
        GradientDrawable drawable = new GradientDrawable();
        //边框
        if (borderWidth != 0 && borderColor != Color.TRANSPARENT) {
            drawable.setStroke(borderWidth, borderColor);
        }
        //填充色
        drawable.setColor(color);
        //圆角
        if (cornerRadius != 0) {
            drawable.setCornerRadius(cornerRadius);
        } else {
            drawable.setCornerRadii(new float[]{leftTopRadius, leftTopRadius, rightTopRadius, rightTopRadius,
                    rightBottomRadius, rightBottomRadius, leftBottomRadius, leftBottomRadius});
        }
        return drawable;
    }

4. 构造方法

1
2
3
4
5
6
7
8
9
10
public SimpleShapeText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        //初始化属性
        initCustomAttr(attrs);
        //设置背景
        Drawable bgDrawable = createBgDrawable();
        this.setBackground(bgDrawable);
    }

5. 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<com.song.materialmaster.SimpleShapeText
        android:layout_margin="10dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:bgColor="@color/bg_blue"
        app:borderColor="@color/colorAccent"
        app:borderWidth="5dp"
        app:cornerRadius="50dp"
        android:text="圆形带边框"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        android:gravity="center"/>
<com.song.materialmaster.SimpleShapeText
        app:cornerRadius="10dp"
        android:onClick="press"
        android:layout_margin="10dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:bgColor="@color/bg_blue"
        app:borderColor="@android:color/holo_blue_bright"
        app:borderWidth="5dp"
        app:pressColor="@android:color/holo_green_dark"
        android:text="按压效果"
        android:clickable="true"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        android:gravity="center" />