android 自定义圆角button效果的实例代码（自定义view Demo）

概述

在平时开发过程中经常会碰到需要使用圆角button的情况，一般也会包括很多其他小功能，比如要在里面添加img，设置不同的圆角大小等。

针对这样的场景，直接使用创建多个shape，定义多个xml文件也是可以实现的。但是如果使用非常频繁，那么直接自定义一个就会来的非常方便。

甚至在一些情况下，不是可以用shape定义的规则图形，比如需要用到贝塞尔曲线等。
如果全局需要这样风格的view，那么自定义一个view是非常必要的。

本文主要是个demo记录，如有需要的读者可以借鉴学习。

demo

主要实现功能：

1. 自定义圆角大小
2. 支持设置leftdrawable，和自定义文字内容（文字和img默认居中）
3. 支持点击效果

源码

roundradiusbutton.java

/**
 * author: xujiajia
 * description:
 * 1、drawable只有在设置textstring的时候才会生效(居中效果两个一起测量)
 */
public class roundradiusbutton extends view {
 //data
 private int width = 0;
 private int height = 0;
 private int roundradius = 16;
 private int bgcolor = color.ltgray;
 private boolean istouching = false;
 //img and text
 private drawable leftdrawable = null;
 private int drawablewidth = 20;
 private int drawableheight = 20;
 private int leftdrawablepaddingright = 0;
 private string textstring;
 private int textsize = 30;
 private int textcolor = color.black;
 //ondraw
 paint paint;
 path path;
 rectf rectf;
 rect rect;
 public roundradiusbutton(context context, int width, int height) {
 super(context);
 this.width = width;
 this.height = height;
 this.setlayoutparams(new viewgroup.layoutparams(width, height));
 this.setclickable(true);
 }
 public roundradiusbutton(context context, attributeset attrs) {
 super(context, attrs);
 getdatafromattrs(context, attrs);
 this.setclickable(true);
 }
 public roundradiusbutton(context context, attributeset attrs, int defstyleattr) {
 super(context, attrs, defstyleattr);
 getdatafromattrs(context, attrs);
 this.setclickable(true);
 }
 private void getdatafromattrs(context context, attributeset attrs) {
 if (attrs == null) {
 return;
 }
 typedarray ta = context.obtainstyledattributes(attrs, r.styleable.roundradiusbutton);
 roundradius = ta.getdimensionpixeloffset(r.styleable.roundradiusbutton_roundradius, 16);
 bgcolor = ta.getcolor(r.styleable.roundradiusbutton_bgcolor, color.ltgray);
 leftdrawable = ta.getdrawable(r.styleable.roundradiusbutton_leftdrawable);
 drawablewidth = ta.getdimensionpixeloffset(r.styleable.roundradiusbutton_drawablewidth, 0);
 drawableheight = ta.getdimensionpixeloffset(r.styleable.roundradiusbutton_drawableheight, 0);
 leftdrawablepaddingright =
 ta.getdimensionpixeloffset(r.styleable.roundradiusbutton_leftdrawablepaddingright, 0);
 textstring = ta.getstring(r.styleable.roundradiusbutton_textstring);
 textsize = ta.getdimensionpixeloffset(r.styleable.roundradiusbutton_textsize, 0);
 textcolor = ta.getcolor(r.styleable.roundradiusbutton_textcolor, color.black);
 ta.recycle();
 }
 public void setroundradius(int roundradius) {
 this.roundradius = roundradius;
 invalidate();
 }
 public void setbgcolor(int bgcolor) {
 this.bgcolor = bgcolor;
 invalidate();
 }
 public void setleftdrawable(drawable leftdrawable, int drawablewidth, int drawableheight,
 int paddingright) {
 this.leftdrawable = leftdrawable;
 this.drawablewidth = drawablewidth;
 this.drawableheight = drawableheight;
 this.leftdrawablepaddingright = paddingright;
 invalidate();
 }
 public void settextstring(string textstring) {
 this.textstring = textstring;
 invalidate();
 }
 public void settextcolor(int textcolor) {
 this.textcolor = textcolor;
 invalidate();
 }
 public void settextsize(int textsize) {
 this.textsize = textsize;
 invalidate();
 }
 @override public boolean ontouchevent(motionevent event) {
 if (isclickable()) {
 switch (event.getaction()) {
 case motionevent.action_down:
  istouching = true;
  invalidate();
  break;
 case motionevent.action_up:
  istouching = false;
  invalidate();
  break;
 }
 }
 return super.ontouchevent(event);
 }
 @override protected void ondraw(canvas canvas) {
 super.ondraw(canvas);
 if (width == 0 || height == 0) {
 width = getwidth();
 height = getheight();
 }
 if (paint == null) {
 paint = new paint();
 }
 if (path == null) {
 path = new path();
 }
 if (rectf == null) {
 rectf = new rectf();
 }
 if (rect == null) {
 rect = new rect();
 }
 paint.setcolor(bgcolor);
 paint.setantialias(true);//抗锯齿
 paint.setstrokewidth(0);//线的宽度设为0，避免画圆弧的时候部分圆弧与边界相切
 paint.setstyle(paint.style.fill_and_stroke);
 path.setfilltype(path.filltype.winding);
 //左上圆角
 path.moveto(0, roundradius);
 rectf.set(0, 0, 2 * roundradius,
 2 * roundradius);
 path.addarc(rectf, 180, 90);
 //上边
 path.lineto(width - roundradius, 0);
 //右上圆角
 rectf.set(width - roundradius * 2, 0, width, roundradius * 2);
 path.addarc(rectf, -90, 90);
 //右边
 path.lineto(width, height - roundradius);
 //右下圆角
 rectf.set(width - roundradius * 2, height - roundradius * 2, width,
 height);
 path.addarc(rectf, 0, 90);
 //下边
 path.lineto(roundradius, height);
 //左下圆角
 rectf.set(0, height - roundradius * 2, 2 * roundradius,
 height);
 path.addarc(rectf, 90, 90);
 //左边
 path.lineto(0, roundradius);
 path.close();
 canvas.drawpath(path, paint);
 if (istouching) {
 paint.setcolor(getcontext().getresources().getcolor(r.color.black_tran_30));
 canvas.drawpath(path, paint);
 }
 //填充背景中间空白的部分
 path.moveto(0, roundradius);
 path.lineto(width - roundradius, 0);
 path.lineto(width, height - roundradius);
 path.lineto(roundradius, height);
 path.close();
 canvas.drawpath(path, paint);
 if (istouching) {
 paint.setcolor(getcontext().getresources().getcolor(r.color.black_tran_30));
 canvas.drawpath(path, paint);
 }
 //text, drawable两个一起计算位置
 if (!textutils.isempty(textstring)) {
 paint.setstrokewidth(1.5f);
 paint.setcolor(textcolor);
 paint.settextsize(textsize);
 rect.setempty();
 paint.gettextbounds(textstring, 0, textstring.length(), rect);
 float leftbitmap = 0;
 float topbitmap = 0;
 if (leftdrawable != null) {
 if (leftdrawable != null) {
  leftbitmap = (1.0f * width - drawablewidth - rect.width() - leftdrawablepaddingright) / 2;
  topbitmap = (1.0f * height - drawableheight) / 2;
  leftdrawable.setbounds((int) leftbitmap, (int) topbitmap,
  (int) (leftbitmap + drawablewidth),
  (int) (topbitmap + drawableheight));
  leftdrawable.draw(canvas);
 }
 }
 float textx = 0;
 float texty =
  1.0f * height / 2 + paint.gettextsize() / 2 - paint.getfontmetrics().descent / 2;
 if (leftbitmap == 0 && topbitmap == 0) {
 textx = width / 2 - rect.width() / 2;
 } else {
 textx = leftbitmap + drawablewidth + leftdrawablepaddingright;
 }
 canvas.drawtext(textstring, textx, texty, paint);
 }
 }
}

mainactivity.java

public class mainactivity extends appcompatactivity {
 private linearlayout llcontainer;
 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 setcontentview(r.layout.activity_main);
 initview();
 }
 private void initview() {
 llcontainer = findviewbyid(r.id.ll_container);
 roundradiusbutton roundradiusbutton = new roundradiusbutton(this, 500, 200);
 roundradiusbutton.setbgcolor(color.ltgray);
 roundradiusbutton.setroundradius(40);
 //text
 roundradiusbutton.settextstring("testtesttest");
 roundradiusbutton.settextcolor(color.white);
 roundradiusbutton.settextsize(40);
 //drawable
 roundradiusbutton.setleftdrawable(getresources().getdrawable(r.mipmap.ic_launcher), 60, 60, 80);
 roundradiusbutton.setonclicklistener(new view.onclicklistener() {
 @override public void onclick(view v) {
 toast.maketext(mainactivity.this, "testest", toast.length_long).show();
 }
 });
 roundradiusbutton.setclickable(false);
 llcontainer.addview(roundradiusbutton);
 }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/ll_container"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#868684"
 android:gravity="center"
 android:orientation="vertical"
 tools:context=".mainactivity"
 >
 <com.example.newbuttiontest.roundradiusbutton
 android:layout_width="300dp"
 android:layout_height="200dp"
 app:bgcolor="#ffeb3b"
 app:drawableheight="18dp"
 app:drawablewidth="18dp"
 app:leftdrawable="@mipmap/ic_launcher"
 app:leftdrawablepaddingright="5dp"
 app:roundradius="30dp"
 app:textcolor="#ff4329"
 app:textsize="16dip"
 app:textstring="testtesttest"
 />
</linearlayout>

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="roundradiusbutton">
 <attr name="roundradius" format="dimension" />
 <attr name="bgcolor" format="color" />
 <attr name="leftdrawable" format="reference" />
 <attr name="leftdrawablepaddingright" format="dimension" />
 <attr name="drawablewidth" format="dimension" />
 <attr name="drawableheight" format="dimension" />
 <attr name="textstring" format="string" />
 <attr name="textsize" format="dimension" />
 <attr name="textcolor" format="color" />
 </declare-styleable>
</resources>

colors.xml

<resources>
 <color name="black_tran_30">#30000000</color>
</resources>

总结

以上所述是小编给大家介绍的android 自定义圆角button效果的实例代码，希望对大家有所帮助