栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 移动开发 > Android

Android自定义边缘凹凸的卡劵效果

Android 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Android自定义边缘凹凸的卡劵效果

所谓前人栽树,后人乘凉,在此感谢博主的贡献。

原文:边缘凹凸的卡劵效果

先上效果图:

我实现的效果和原博主实现的效果是不一样的,我是左右边缘凹凸,而博主是上下边缘凹凸。其实理解了原理,哪个边缘实现这个效果都是可以的。

实现原理:

直接在view边缘上画一个个白色的小圆来实现这种效果,这个view:CouponView
可以让它继承LinearLayout,通过重写onDraw()方法实现重新绘制的效果。最后在布局文件中使用该自定义CouponView即可。
画圆的个数如何确定:

(这是原博主的经验,总结的的确很好)

假如我们上下线的半圆以及半圆与半圆之间的间距是固定的,那么不同尺寸的屏幕肯定会画出不同数量的半圆,那么我们只需要根据控件的宽度来获取能画的半圆数。
大家观察图片,很容易发现,圆的数量总是圆间距数量-1,也就是,假设圆的数量是circleNum,那么圆间距就是circleNum+1。
所以我们可以根据这个计算出
circleNum. circleNum = (int) ((w-gap)/(2*radius+gap));
这里gap就是圆间距,radius是圆半径,w是view的宽。

自定义LinearLayout:CouponView



public class CouponView extends LinearLayout {

 private Paint mPaint;  //画笔
 private float gap = 8;  //圆间距 
 private float radius = 10; //半径 
 private int circleNum;  //圆数量
 private float remain;
 private float width;  //视图宽


 public CouponView(Context context) {
  super(context);
 }

 public CouponView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//设置是否使用抗锯齿功能,会消耗较大资源,绘制图形速度会变慢。
  mPaint.setDither(true);//设定是否使用图像抖动处理,会使绘制出来的图片颜色更加平滑和饱满,图像更加清晰
  mPaint.setColor(Color.WHITE);
  mPaint.setStyle(Paint.Style.FILL);
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  width = w;
  if (remain==0){
   //计算不整除的剩余部分
   remain = (int)(h-gap)%(2*radius+gap);
  }
  circleNum = (int) ((h-gap)/(2*radius+gap)); //计算圆的数量
 }


 public CouponView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
 }

 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //循环在左右两个边上画出凹凸效果
  for (int i=0;i

简单的根据circleNum的数量进行了圆的绘制。

这里remain/2是因为,可能一些情况,计算出来的可以画的数量不是刚好整除的。这样就会出现右边最后一个间距会比其它的间距都要宽。

所以我们在绘制第一个的时候加上了余下的间距的一半,即使是不整除的情况。至少也能保证第一个和最后一个间距宽度一致。

布局文件使用该自定义LinearLayout:CouponView

里面的具体布局就看业务需求了



 
  
  
   
   
   
   
  
 



源码:

案例Demo

觉得不错,欢迎点个Star 哈!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/158644.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号