android 自定义圆角button效果的实例代码(自定义view Demo)
程序员文章站
2022-03-14 10:47:15
概述
在平时开发过程中经常会碰到需要使用圆角button的情况,一般也会包括很多其他小功能,比如要在里面添加img,设置不同的圆角大小等。
针对这样的场景,直接使用创建多个sh...
概述
在平时开发过程中经常会碰到需要使用圆角button的情况,一般也会包括很多其他小功能,比如要在里面添加img,设置不同的圆角大小等。
针对这样的场景,直接使用创建多个shape,定义多个xml文件也是可以实现的。但是如果使用非常频繁,那么直接自定义一个就会来的非常方便。
甚至在一些情况下,不是可以用shape定义的规则图形,比如需要用到贝塞尔曲线等。
如果全局需要这样风格的view,那么自定义一个view是非常必要的。
本文主要是个demo记录,如有需要的读者可以借鉴学习。
demo
主要实现功能:
- 自定义圆角大小
- 支持设置leftdrawable,和自定义文字内容(文字和img默认居中)
- 支持点击效果
源码
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效果的实例代码,希望对大家有所帮助
上一篇: vue中实现高德定位功能
下一篇: vue实现浏览器全屏展示功能
推荐阅读
-
Android自定义view实现太极效果实例代码
-
Android中的Button自定义点击效果实例代码
-
android自定义进度条渐变色View的实例代码
-
Android自定义view仿QQ的Tab按钮动画效果(示例代码)
-
Android自定义View实现简单炫酷的球体进度球实例代码
-
android自定义进度条渐变色View的实例代码
-
android 自定义圆角button效果的实例代码(自定义view Demo)
-
Android之自定义View实现带4圆角或者2圆角的效果
-
Android自定义view仿QQ的Tab按钮动画效果(示例代码)
-
Android自定义View实现简单炫酷的球体进度球实例代码