Android自定义View——自由定制优惠券背景
1、功能介绍
2、实现思路
/** * 计算垂直方向需要画圆或三角形的数量和初始偏移量 * @param gapSize 每个圆形或三角形之间的间距 */private void calculateVerticalCount(float gapSize){ mVerticalCount = (int) ((mHeight - gapSize) / (2 * mRadius + gapSize)); mVerticalInitSize = (int) ((mHeight - (2 * mRadius * mVerticalCount + (mVerticalCount + 1) * gapSize)) / 2);} /** * 计算水平方向上圆或三角形的数量和初始偏移量 * @param gapSize 每个圆形或三角形之间的间距 */private void calculateHorizontalCount(float gapSize) { mHorizontalCount = (int) ((mWidth - gapSize) / (2 * mRadius + gapSize)); mHorizontalInitSize = (int) ((mWidth - (2 * mRadius * mHorizontalCount + (mHorizontalCount + 1) * gapSize)) / 2);}
上面这个计算方式画个图就出来了,假设有n个半圆,那就会有n+1个圆间距,因此控件宽度mWidth = n * 2 * radius + (n-1) * gapSize,由此可以求出半圆的个数,由于边的宽度或高度在这个半径radius和圆间距gapsize下不一定能够完整平分,为了让两边留出的距离相等,我们计算了一个初始偏移值。
@Overrideprotected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); if(vertical_style == 1){//如果垂直方向是半圆形 drawVerticalCircle(canvas); }else if(vertical_style == 2){//垂直方向是三角形 drawVerticalTriangle(canvas); } if(horizontal_style == 1){//如果水平方向是半圆形 drawHorizontalCircle(canvas); }else if(horizontal_style == 2){//如果水平方向是三角形 drawHorizontalTriangle(canvas); }} /** * 在水平方向上绘制三角形 * @param canvas */private void drawHorizontalTriangle(Canvas canvas) { //先计算出水平方向上的数量 calculateHorizontalCount(0); Path path = new Path(); float x = 0; //绘制上面部分 for(int i = 0; i < mHorizontalCount; i++){ path.reset(); x = mHorizontalInitSize + i * 2 * mRadius; path.moveTo(x, 0); x += mRadius; path.lineTo(x, mRadius); x += mRadius; path.lineTo(x, 0); path.close(); canvas.drawPath(path, mPaint); } //绘制下面部分 x = 0; for(int i = 0; i < mHorizontalCount; i++){ path.reset(); x = mHorizontalInitSize + i * 2 * mRadius; path.moveTo(x, mHeight); x += mRadius; path.lineTo(x, mHeight - mRadius); x += mRadius; path.lineTo(x, mHeight); path.close(); canvas.drawPath(path, mPaint); }} /** * 在水平方向上绘制圆形 * @param canvas */private void drawHorizontalCircle(Canvas canvas) { //先计算出水平方向上的数量 calculateHorizontalCount(mGapSize); float x = mHorizontalInitSize + mGapSize + mRadius; //先绘制上面部分 for(int i = 0; i < mHorizontalCount; i++){ canvas.drawCircle(x, 0, mRadius, mPaint); x += 2 * mRadius + mGapSize; } //再绘制下面部分 x = mHorizontalInitSize + mGapSize + mRadius; for(int i = 0; i < mHorizontalCount; i++){ canvas.drawCircle(x, mHeight, mRadius, mPaint); x += 2 * mRadius + mGapSize; }} /** * 在垂直方向绘制三角形 * @param canvas */private void drawVerticalTriangle(Canvas canvas) { //计算一下三角形的数量和初始距离 calculateVerticalCount(0); Path path = new Path(); float y = 0; //先画左边 for(int i = 0; i < mVerticalCount; i++){ path.reset(); y = mVerticalInitSize + i * 2 * mRadius; path.moveTo(0, y); y += mRadius; path.lineTo(mRadius, y); y += mRadius; path.lineTo(0, y); path.close(); canvas.drawPath(path, mPaint); } //再画右边 y = 0; for(int i = 0; i < mVerticalCount; i++){ path.reset(); y = mVerticalInitSize + i * 2 * mRadius; path.moveTo(mWidth, y); y += mRadius; path.lineTo(mWidth - mRadius, y); y += mRadius; path.lineTo(mWidth, y); path.close(); canvas.drawPath(path, mPaint); }} /** * 在垂直方向绘制半圆形 * @param canvas */private void drawVerticalCircle(Canvas canvas) { //计算一下圆形的数量和初始偏移距离 calculateVerticalCount(mGapSize); //这次使用画弧来绘制出圆形 RectF rectF = new RectF(); //先画左边 for(int i = 0; i < mVerticalCount; i++){ rectF.left = -mRadius; rectF.top = mVerticalInitSize + mGapSize * (i + 1) + i * 2 * mRadius; rectF.right = mRadius; rectF.bottom = rectF.top + 2 * mRadius; canvas.drawArc(rectF, -90, 180, false, mPaint); } //再画右边 for(int i = 0; i < mVerticalCount; i++){ rectF.left = mWidth - mRadius; rectF.top = mVerticalInitSize + mGapSize * (i + 1) + i * 2 * mRadius; rectF.right = rectF.left + 2 * mRadius; rectF.bottom = rectF.top + 2 * mRadius; canvas.drawArc(rectF, 90, 180, false, mPaint); }}
3、使用方法
<declare-styleable name="CouponStyle"> <attr name="vertical_style"> <enum name="none" value="0"/> <enum name="circle" value="1" /> <enum name="triangle" value="2"/> </attr> <attr name="horizontal_style"> <enum name="none" value="0"/> <enum name="circle" value="1" /> <enum name="triangle" value="2"/> </attr></declare-styleable>
那在xml布局中就可以自己自由指定了,如下:
<com.scu.lly.couponbgdemo.view.CouponBgView android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:orientation="horizontal" android:background="#47BDBD" android:gravity="center_vertical" coupon:horizontal_style="circle" <!-- 指定水平方向边缘的类型 --> coupon:vertical_style="triangle"> <LinearLayout android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" android:padding="30dp" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white" android:textSize="18sp" android:text="顺旺基优惠券"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FC4A36" android:layout_marginTop="15dp" android:textSize="16sp" android:text="全场五折优惠"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white" android:layout_marginTop="15dp" android:textSize="15sp" android:text="券编号:2016070920160720"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white" android:layout_marginTop="15dp" android:textSize="15sp" android:text="有效期:2016-07-09至2016-07-20"/> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="20dp" android:src="@mipmap/iv_coupon" android:layout_gravity="center"/></com.scu.lly.couponbgdemo.view.CouponBgView>
点击下载
使用起来是不是很简单呢?
在翻看购物类APP时,看到了很多APP在添加购物车时有很多添加动画,那么下一篇就实现一下购物车添加动画玩玩。
Android自定义View——自由定制优惠券背景相关推荐
- Android自定义View精品(CustomCalendar-定制日历控件)
版权声明:本文为openXu原创文章[openXu的博客],未经博主允许不得以任何形式转载 目录: 文章目录 1.分析 2.自定义属性 3.onMeasure() 4.onDraw() ①.绘制月份 ...
- Android 自定义view完全解析--带你通透了解自定义view
参考转自郭霖博客带你一步步深入了解View系列 Android LayoutInflater原理分析 相信接触Android久一点的朋友对于LayoutInflater一定不会陌生,都会知道它主要是用 ...
- Android 自定义View合集
http://blog.csdn.net/u011507982/article/details/51199644 自定义控件学习 https://github.com/GcsSloop/Androi ...
- android代码实现手机加速功能,Android自定义View实现内存清理加速球效果
Android自定义View实现内存清理加速球效果 发布时间:2020-09-21 22:21:57 来源:脚本之家 阅读:105 作者:程序员的自我反思 前言 用过猎豹清理大师或者相类似的安全软件, ...
- android view 渐变动画,Android自定义view渐变圆形动画
本文实例为大家分享了Android自定义view渐变圆形动画的具体代码,供大家参考,具体内容如下 直接上效果图 自定义属性 attrs.xml文件 创建一个类 ProgressRing继承自 view ...
- android 自定义 child,Android自定义View
前言 Android自定义View的详细步骤是我们每一个Android开发人员都必须掌握的技能,因为在开发中总会遇到自定义View的需求.为了提高自己的技术水平,自己就系统的去研究了一下,在这里写下一 ...
- Android自定义view详解,使用实例,自定义属性,贝塞尔曲线
//只会触发执行onDraw方法,只会改变绘制里面的内容,条目的绘制 invalidate(); //只会触发执行onDraw方法,但是可以在子线程中刷新 postInvalidate(); //vi ...
- android 自定义view滚动条,Android自定义View实现等级滑动条的实例
Android自定义View实现等级滑动条的实例 实现效果图: 思路: 首先绘制直线,然后等分直线绘制点: 绘制点的时候把X值存到集合中. 然后绘制背景图片,以及图片上的数字. 点击事件down的时候 ...
- 精通Android自定义View(十九)自定义圆形炫彩加载转圈效果
1 效果 2 源码 public class JiondongView extends View {private Paint mBackgroundPaint;private float mScal ...
最新文章
- WEB前端开发的思考与感悟
- 烂泥:nginx、php-fpm、mysql用户权限解析
- mysql不停止重启服务器_不停止MySQL服务增加从库的两种方式
- linux centos7 安装使用 惠普 hp 打印机
- mysql 添加时间戳列
- Spring Boot实现热部署
- Java中的观察者设计模式
- VS2010SP1安装失败解决方法
- FlyWeight(享元)
- NSIS 安装打包安装程序
- katalon studio基础使用教程
- Dell笔记本降低Bios版本简单而可靠的方法(1.15亦成功降级)
- 实验5、D/A转换实验
- php html ubb,php UBB 解析实现代码
- html内嵌式的语言,html嵌入窗口
- WPF x:Key标签
- 使用Fiddler对手机APP抓包渗透测试实战
- Fabric 环境搭建时bootstrap.sh帮我们做了什么?
- dell服务器安装系统不识别键鼠,戴尔电脑八代CPU装win7鼠标键盘不能用|win10改win7鼠标键盘用不了...
- The Tomcat server configuration at\...详细步骤