关闭

Android自定义控件3——边缘凹凸的卡劵效果View

标签: android自定义View锯齿
10387人阅读 评论(28) 收藏 举报
分类:

前言

最近做项目的时候遇到一个卡劵的效果,由于自己觉得用图片来做的话可以会出现适配效果不好,再加上自己自定义view方面的知识比较薄弱,所以想试试用自定义View来实现。但是由于自己知识点薄弱,一开始居然想着用画矩形来设置边缘实现,后面一个哥们指导了我,在这里感谢他。
这里写图片描述

实现分析

上面的图片其实和普通的Linearlayout,RelativeLayout一样,只是上下两边多了类似于半圆锯齿的形状。那么只需要处理不同地方。可以在上下两条线上画一个个白色的小圆来实现这种效果。

假如我们上下线的半圆以及半圆与半圆之间的间距是固定的,那么不同尺寸的屏幕肯定会画出不同数量的半圆,那么我们只需要根据控件的宽度来获取能画的半圆数。

大家观察图片,很容易发现,圆的数量总是圆间距数量-1,也就是,假设圆的数量是circleNum,那么圆间距就是circleNum+1。

所以我们可以根据这个计算出circleNum.
circleNum = (int) ((w-gap)/(2*radius+gap));
这里gap就是圆间距,radius是圆半径,w是view的宽。
看代码

public class CouponDisplayView extends LinearLayout {

    private Paint mPaint;
    /**
     * 圆间距
     */
    private float gap = 8;
    /**
     * 半径
     */
    private float radius = 10;
    /**
     * 圆数量
     */
    private int circleNum;

    private float remain;


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

    public CouponDisplayView(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);
        if (remain==0){
            remain = (int)(w-gap)%(2*radius+gap);
        }
        circleNum = (int) ((w-gap)/(2*radius+gap));
    }


    public CouponDisplayView(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;i++){
            float x = gap+radius+remain/2+((gap+radius*2)*i);
            canvas.drawCircle(x,0,radius,mPaint);
            canvas.drawCircle(x,getHeight(),radius,mPaint);
        }
    }

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

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

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

这样就实现了。

看看效果

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="20dp">
    <com.qiangyu.test.view.CouponDisplayView
        android:orientation="horizontal" android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/indicator_color"
        android:padding="20dp">
        <ImageView
            android:layout_width="120dp"
            android:layout_height="match_parent"
            android:src="@drawable/goods_test"
            android:scaleType="centerCrop"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="16dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18dp"
                android:text="美食劵"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12dp"
                android:padding="5dp"
                android:text="编号:11223124123213131"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12dp"
                android:padding="5dp"
                android:text="编号:11223124123213131"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12dp"
                android:paddingLeft="5dp"
                android:paddingTop="5dp"
                android:text="截止日期:2001-09-07"
                />
        </LinearLayout>
    </com.qiangyu.test.view.CouponDisplayView>
</FrameLayout>

效果图:
这里写图片描述

源码下载

28
3
查看评论

安卓自定义控件卡券CouponView

package com.example.couponview; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android...
  • qq787207389
  • qq787207389
  • 2016-07-18 00:38
  • 507

【Android 进阶】Android自定义系列:边缘凹凸的卡劵效果

所谓前人栽树,后人乘凉,在此感谢博主的贡献。 原文:边缘凹凸的卡劵效果 先上效果图: 我实现的效果和原博主实现的效果是不一样的,我是左右边缘凹凸,而博主是上下边缘凹凸。其实理解了原理,哪个边缘实现这个效果都是可以的。 实现原理: 直接在view边缘上画一个个白色的小圆来实现这...
  • leaf_130
  • leaf_130
  • 2017-02-20 16:54
  • 241

Android自定义View——简单实现边缘凹凸电子票效果

自定义View简单实现边缘凹凸卡片效果 效果一: 项目思路:查看效果图,该View继承LinearLayout,可以发现在View的上下边缘为圆心,画出的白色圆形即可。 这里只要计算出圆的个数和其循环的规律即可,下面请看分析: 步骤一:分析实现的过程 通过分析图:我们取卡片的前2...
  • qq_30379689
  • qq_30379689
  • 2016-08-29 20:12
  • 3631

Android实现边缘凹凸的View

转载最近做项目的时候遇到一个卡劵的效果,由于自己觉得用图片来做的话可以会出现适配效果不好,再加上自己自定义view方面的知识比较薄弱,所以想试试用自定义View来实现。但是由于自己知识点薄弱,一开始居然想着用画矩形来设置边缘实现,后面一个哥们指导了我,在这里感谢他。 实现分析上面的图片其实和普通的L...
  • whuhan2013
  • whuhan2013
  • 2016-05-21 10:37
  • 2311

android Shape Drawable创建两边半圆的按钮背景

android:shape="rectangle">                        ...
  • ThunderRong
  • ThunderRong
  • 2016-03-01 12:59
  • 3150

Android用平铺方式实现锯齿类布局

现在很多界面都喜欢带个锯齿类下边宽,如果没有其他好方法,可以试试我这种平铺方式实现。 1.首先需要切一个小三角的图片,背景透明,顶部和左右不能有间隙   ,(图片有点小,在这加个背景色突出) 2.在drawable写一个xml (关键代码标红)     ...
  • qq498654921com
  • qq498654921com
  • 2015-07-02 22:59
  • 542

Android自定义卡片式View左右滑动

  • 2015-06-09 15:51
  • 3.08MB
  • 下载

android textview实现前后边缘文字淡化的效果

最近在使用textview跑马灯的效果时发现,文字在滚动的时候,Textview的边缘部分文字会有淡化的效果,最终跟踪源码发现是view中实现的该效果,经过分析实现了这样的功能,代码如下: public class TextViewEx extends TextView { private ...
  • xadlovezy
  • xadlovezy
  • 2015-08-26 14:20
  • 1333

Android自定义View——自由定制优惠券背景

1、功能介绍现在购物类的APP真的是数不甚数啊,经常可以在这些APP中看到优惠券的影子,今天我们就来实现一下优惠券的背景效果。实际开发中,如果我们想偷懒,直接用一张背景图作为优惠劵背景就OK了,今天我们手动来实现一下,其实实现起来还是比较简单的。效果图如下:边缘的样式可以自由定制,有两种边缘类型:半...
  • shakespeare001
  • shakespeare001
  • 2016-07-11 08:00
  • 11430

Android 自定义View之边缘凹凸的优惠券效果

本篇文章讲的是自定义View之边缘凹凸的优惠券效果,之前有见过很多优惠券的效果都是使用了边缘凹凸的样式,碰巧也看到这么一篇文章:http://blog.csdn.net/yissan/article/details/51429281,感谢^_^!和往常一样,主要总结一下在自定义View的开发过程中需...
  • qq_20785431
  • qq_20785431
  • 2016-09-27 17:01
  • 1207
    个人资料
    • 访问:185404次
    • 积分:2520
    • 等级:
    • 排名:第17205名
    • 原创:48篇
    • 转载:5篇
    • 译文:0篇
    • 评论:194条
    技术交流

    Android技术讨论群

    Java Android开发技术讨论
    博客专栏
    最新评论
    百度统计