欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-03-14 10:47:15
概述 在平时开发过程中经常会碰到需要使用圆角button的情况,一般也会包括很多其他小功能,比如要在里面添加img,设置不同的圆角大小等。 针对这样的场景,直接使用创建多个sh...

概述

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

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

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

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

demo

主要实现功能:

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

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

源码

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

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效果的实例代码,希望对大家有所帮助