android UI绘制加减号按钮
程序员文章站
2022-07-09 13:29:15
本文实例为大家分享了android ui绘制加减号按钮的具体代码,供大家参考,具体内容如下在项目中我们常常会用到这么一个view。这时候我们会选择使用两个图片来相互切换。其实,只要会基本的2d绘图这样...
本文实例为大家分享了android ui绘制加减号按钮的具体代码,供大家参考,具体内容如下
在项目中我们常常会用到这么一个view。
这时候我们会选择使用两个图片来相互切换。其实,只要会基本的2d绘图这样简单的图片自己绘制出来不在话下。
先给出我做出来的效果图:
接下来,我将给出加号减号绘制的代码以供大家参考:
以下是关键代码
/** * +号 */ public class addview extends view { protected paint paint; protected int hstartx, hstarty, hendx, hendy;//水平的线 protected int sstartx, sstarty, ssendx, ssendy;//垂直的线 protected int paintwidth = 2;//初始化加号的粗细为10 protected int paintcolor = color.black;//画笔颜色黑色 protected int padding = 3;//默认3的padding public int getpadding() { return padding; } //让外界调用,修改padding的大小 public void setpadding(int padding) { ssendy = hendx = width - padding; sstarty = hstartx = padding; } //让外界调用,修改加号颜色 public void setpaintcolor(int paintcolor) { paint.setcolor(paintcolor); } //让外界调用,修改加号粗细 public void setpaintwidth(int paintwidth) { paint.setstrokewidth(paintwidth); } public addview(context context, attributeset attrs) { super(context, attrs); initview(); } private void initview() { paint = new paint(); paint.setcolor(paintcolor); paint.setstrokewidth(paintwidth); } @override protected void onmeasure(int widthmeasurespec, int heightmeasurespec) { int widthsize = measurespec.getsize(widthmeasurespec); int widthmode = measurespec.getmode(widthmeasurespec); int width; if (widthmode == measurespec.exactly) { // measurespec.exactly表示该view设置的确切的数值 width = widthsize; } else { width = 60;//默认值 } sstartx = ssendx = hstarty = hendy = width / 2; ssendy = hendx = width - getpadding(); sstarty = hstartx = getpadding(); //这样做是因为加号宽高是相等的,手动设置宽高 setmeasureddimension(width, width); } @override protected void ondraw(canvas canvas) { super.ondraw(canvas); //水平的横线 canvas.drawline(hstartx, hstarty, hendx, hendy, paint); //垂直的横线 canvas.drawline(sstartx, sstarty, ssendx, ssendy, paint); } }
/** * -号 */ public class removeview extends addview { public removeview(context context, attributeset attrs) { super(context, attrs); } @override protected void ondraw(canvas canvas) { //水平的横线,减号不需要垂直的横线了 canvas.drawline(hstartx, hstarty, hendx, hendy, paint); } }
其中主要的是计算横线和竖线的位置。获得view的宽度后,将view设置成正方形,然后就如如所示:
这样,最主要的加减号做完了,其他的都是小意思了。
我把主要的xml文件贴出来:
主视图:layout_add_remove.xml
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="3dp" android:padding="2dp" android:background="@drawable/bg_add_remove_view" android:orientation="horizontal"> <com.android.ui.textview.addview android:id="@+id/add_view" android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_vertical" android:background="@drawable/bg_add_view" /> <edittext android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_margin="3dp" android:background="@null" android:inputtype="number" android:text="0" /> <com.android.ui.textview.removeview android:id="@+id/remove_view" android:layout_width="50dp" android:layout_height="50dp" android:layout_gravity="center_vertical" android:background="@drawable/bg_remove_view" /> </linearlayout>
主视图背景:bg_add_remove_view.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 设置圆角矩形 --> <corners android:radius="5dp" /> <!-- 文本框里面的颜色 --> <solid android:color="@android:color/white" /> <!-- 边框的颜色 --> <stroke android:width="0.5dp" android:color="@android:color/darker_gray" /> </shape>
加号背景:bg_add_view.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bg_add_true" android:state_pressed="true" /> <item android:drawable="@drawable/bg_add_false" android:state_pressed="false" /> </selector>
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 边框的颜色 --> <item> <shape> <solid android:color="@android:color/darker_gray" /> </shape> </item> <item android:bottom="0dp" android:left="0dp" android:right="0.5dp" android:top="0dp"> <!--设置只有底部有边框--> <shape> <!-- 主体背景颜色值 --> <solid android:color="@android:color/darker_gray" /> </shape> </item> </layer-list>
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 边框的颜色 --> <item> <shape> <solid android:color="@android:color/darker_gray" /> </shape> </item> <item android:bottom="0dp" android:left="0dp" android:right="0.5dp" android:top="0dp"> <!--设置只有底部有边框--> <shape> <!-- 主体背景颜色值 --> <solid android:color="@android:color/white" /> </shape> </item> </layer-list>
减号的背景色配置和加号一样,只不过竖线的位置不同而已:
<item android:bottom="0dp" android:left="0.5dp" android:right="0dp" android:top="0dp">
我们可以在完全不用图片的情况下完成这个ui。
当然,还有很多可以优化的地方。比如设置padding,修改加减号颜色,就该布局大小,这些都是可以通过代码来实现的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: python中取绝对值简单方法总结