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

转自：http://blog.csdn.net/yissan/article/details/51429281

前言

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

实现分析

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

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

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

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

<code class="hljs java has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CouponDisplayView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">LinearLayout</span> {</span>

    <span class="hljs-keyword">private</span> Paint mPaint;
    <span class="hljs-javadoc">/**
     * 圆间距
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> gap = <span class="hljs-number">8</span>;
    <span class="hljs-javadoc">/**
     * 半径
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> radius = <span class="hljs-number">10</span>;
    <span class="hljs-javadoc">/**
     * 圆数量
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> circleNum;

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> remain;


    <span class="hljs-keyword">public</span> <span class="hljs-title">CouponDisplayView</span>(Context context) {
        <span class="hljs-keyword">super</span>(context);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">CouponDisplayView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword">super</span>(context, attrs);
        mPaint = <span class="hljs-keyword">new</span> Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(<span class="hljs-keyword">true</span>);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onSizeChanged</span>(<span class="hljs-keyword">int</span> w, <span class="hljs-keyword">int</span> h, <span class="hljs-keyword">int</span> oldw, <span class="hljs-keyword">int</span> oldh) {
        <span class="hljs-keyword">super</span>.onSizeChanged(w, h, oldw, oldh);
        <span class="hljs-keyword">if</span> (remain==<span class="hljs-number">0</span>){
            remain = (<span class="hljs-keyword">int</span>)(w-gap)%(<span class="hljs-number">2</span>*radius+gap);
        }
        circleNum = (<span class="hljs-keyword">int</span>) ((w-gap)/(<span class="hljs-number">2</span>*radius+gap));
    }


    <span class="hljs-keyword">public</span> <span class="hljs-title">CouponDisplayView</span>(Context context, AttributeSet attrs, <span class="hljs-keyword">int</span> defStyleAttr) {
        <span class="hljs-keyword">super</span>(context, attrs, defStyleAttr);
    }
</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li></ul>

上面定义了圆的半径和圆间距，同时初始化了这些值并且获取了需要画的圆数量。

接下来只需要一个一个将圆画出来就可以了。

<code class="hljs java has-numbering"> <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onDraw</span>(Canvas canvas) {
        <span class="hljs-keyword">super</span>.onDraw(canvas);
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> i=<span class="hljs-number">0</span>;i<circleNum;i++){
            <span class="hljs-keyword">float</span> x = gap+radius+remain/<span class="hljs-number">2</span>+((gap+radius*<span class="hljs-number">2</span>)*i);
            canvas.drawCircle(x,<span class="hljs-number">0</span>,radius,mPaint);
            canvas.drawCircle(x,getHeight(),radius,mPaint);
        }
    }</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

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

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

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

这样就实现了。

看看效果

<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">FrameLayout
</span>    <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
    <span class="hljs-attribute">android:paddingLeft</span>=<span class="hljs-value">"16dp"</span>
    <span class="hljs-attribute">android:paddingRight</span>=<span class="hljs-value">"16dp"</span>
    <span class="hljs-attribute">android:paddingTop</span>=<span class="hljs-value">"20dp"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">com.qiangyu.test.view.CouponDisplayView
</span>        <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"horizontal"</span> <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
        <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@color/indicator_color"</span>
        <span class="hljs-attribute">android:padding</span>=<span class="hljs-value">"20dp"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">ImageView
</span>            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"120dp"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:src</span>=<span class="hljs-value">"@drawable/goods_test"</span>
            <span class="hljs-attribute">android:scaleType</span>=<span class="hljs-value">"centerCrop"</span>/></span>
        <span class="hljs-tag"><<span class="hljs-title">LinearLayout
</span>            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
            <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
            <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>
            <span class="hljs-attribute">android:paddingLeft</span>=<span class="hljs-value">"16dp"</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">TextView
</span>                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:textSize</span>=<span class="hljs-value">"18dp"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"美食劵"</span>
                /></span>
            <span class="hljs-tag"><<span class="hljs-title">TextView
</span>                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:textSize</span>=<span class="hljs-value">"12dp"</span>
                <span class="hljs-attribute">android:padding</span>=<span class="hljs-value">"5dp"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"编号:11223124123213131"</span>
                /></span>
            <span class="hljs-tag"><<span class="hljs-title">TextView
</span>                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:textSize</span>=<span class="hljs-value">"12dp"</span>
                <span class="hljs-attribute">android:padding</span>=<span class="hljs-value">"5dp"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"编号:11223124123213131"</span>
                /></span>
            <span class="hljs-tag"><<span class="hljs-title">TextView
</span>                <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
                <span class="hljs-attribute">android:textSize</span>=<span class="hljs-value">"12dp"</span>
                <span class="hljs-attribute">android:paddingLeft</span>=<span class="hljs-value">"5dp"</span>
                <span class="hljs-attribute">android:paddingTop</span>=<span class="hljs-value">"5dp"</span>
                <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"截止日期:2001-09-07"</span>
                /></span>
        <span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">com.qiangyu.test.view.CouponDisplayView</span>></span>
<span class="hljs-tag"></<span class="hljs-title">FrameLayout</span>></span>
</code><ul style="" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li><li>54</li><li>55</li></ul>

效果图:

源码下载