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

最新推荐文章于 2024-03-25 23:46:04 发布

许英俊潇洒

最新推荐文章于 2024-03-25 23:46:04 发布

阅读量6.2k

点赞数 7

分类专栏：自定义View实战文章标签：控件自定义View 卡片边缘凹凸效果

本文链接：https://blog.csdn.net/qq_30379689/article/details/52356145

版权

自定义View实战专栏收录该内容

16 篇文章 35 订阅

订阅专栏

效果展示

原理分析

View继承LinearLayout，在View的上下边缘画出白色的圆形即可，这里只要计算出圆的个数和圆的循环规律即可，下面请看分析

我们取卡片的前2个凹凸来看，将其分为四部分，并且两部分为循环可得到另两部分，其中我们只要计算出圆的半径位置，我们就可以重复的画出第二个圆，因为gap和radius是已知的，并且你可以发现虚线部分为1、2、3，其中圆心的位置就在1、3中，也就是（2i-1）之中，同时圆的个数我们可以用总宽度/（2倍的radius+2倍的gap）即可。

实现步骤

1、初始化变量，并绘制出边缘线上的圆

public class MyCardView extends LinearLayout {
    //圆的半径
    private int radius = 8;
    //圆之间的间距
    private int gap = 8;
    private Paint mPaint;
    
    public MyCardView(Context context) {
        super(context);
        init();
    }
    
    public MyCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setDither(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //圆的个数
        int roundNum = getWidth() / (radius * 2 + gap * 2);
        for (int i = 1; i <= roundNum; i++) {
            canvas.drawCircle((gap + radius) * (2 * i - 1), 0, radius, mPaint);
            canvas.drawCircle((gap + radius) * (2 * i - 1), getHeight(), radius, mPaint);
        }
    }
}

2、布局中使用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    android:padding="16dp">

    <com.handsome.app2.View.Custom.MyCardView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="#5ED6FF"
        android:orientation="horizontal"
        android:padding="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="￥2.3"
            android:textColor="#ffffff"
            android:textSize="30dp" />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="#888888" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="分享红包"
                android:textColor="#90000000"
                android:textSize="16dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="· 满18元可用"
                android:textColor="#80000000"
                android:textSize="12dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="· 限尾号3235手机号可用"
                android:textColor="#80000000"
                android:textSize="12dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="· 2016-08-29 - 2016-08-31"
                android:textColor="#80000000"
                android:textSize="12dp" />
        </LinearLayout>
    </com.handsome.app2.View.Custom.MyCardView>

</LinearLayout>