android UI绘制加减号按钮
更新时间:2021年6月30日 00:00 点击:1934
本文实例为大家分享了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,修改加减号颜色,就该布局大小,这些都是可以通过代码来实现的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- 这篇文章主要介绍了c#从数据库里取得数据并异步更新ui的方法,大家参考使用吧...2020-06-25
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
这篇文章主要介绍了No module named ‘win32gui‘ 的解决方法(踩坑之旅),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
- 这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15
- 下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02