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

标签: 控件自定义View卡片边缘凹凸效果
3162人阅读 评论(8) 收藏 举报
分类:

简单实现边缘凹凸电子票效果


效果一:


项目思路:查看效果图,该View继承LinearLayout,可以发现在View的上下边缘为圆心,画出的白色圆形即可。

这里只要计算出圆的个数和其循环的规律即可,下面请看分析:


步骤一:分析实现的过程



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


步骤二:代码编写

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);
        }
    }
}


步骤三:在xml中使用

<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>


效果二:仿饿了么红包


项目思路:该效果其实是个合成布局,红色为我们的自定义的部分,而下面白色内容部分为LinearLayout,相信看过前面的分析后,这次你应该可以自己分析了,我就不再多解释了,直接贴代码:


步骤一:代码编写

public class MyMoneyView extends LinearLayout {
    private int radius = 6;
    private int gap = 6;
    private Paint mPaint;

    public MyMoneyView(Context context) {
        super(context);
        init();
    }

    public MyMoneyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyMoneyView(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);
        for (int i = 1; i <= getWidth() / (radius * 2 + gap * 2); i++) {
            canvas.drawCircle((gap + radius) * (2 * i - 1), radius*2, radius, mPaint);
        }
    }
}
步骤二:在xml中使用
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <com.handsome.app2.View.Custom.MyMoneyView
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:background="#ff0000" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:background="#ffffff"
        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="#ff0000"
            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>
    </LinearLayout>
</LinearLayout>




7
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:444850次
    • 积分:6448
    • 等级:
    • 排名:第4188名
    • 原创:154篇
    • 转载:0篇
    • 译文:0篇
    • 评论:659条
    座右铭
    你不努力,谁也给不了你想要的生活
    我的标签

    看顶置有福利

    强迫症

    帅气

    俊俊俊.apk

    大四

    lol大神

    三等奖福星

    汕尾

    博乐

    广州

    Android

    嘉应大学

    关于我
    友情链接
    博客专栏
    最新评论
    去除广告