关闭

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

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

效果展示




原理分析


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>


效果展示




原理分析


效果其实是个合成布局,红色为我们的自定义的部分,而下面白色内容部分为LinearLayout


实现步骤


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

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);
        }
    }
}
2、布局中使用
<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
查看评论

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

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

Android实现边缘凹凸的View

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

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

本篇文章讲的是自定义View之边缘凹凸的优惠券效果,之前有见过很多优惠券的效果都是使用了边缘凹凸的样式,碰巧也看到这么一篇文章:http://blog.csdn.net/yissan/article/details/51429281,感谢^_^!和往常一样,主要总结一下在自定义View的开发过程中需...
  • qq_20785431
  • qq_20785431
  • 2016-09-27 17:01
  • 1211

如何让button点一下凹进去效果

<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&...
  • make1828
  • make1828
  • 2011-03-16 12:27
  • 9400

android自定义的边缘凹凸的View

  • 2016-05-18 20:56
  • 21.87MB
  • 下载

Android带你实现门票布局效果

今天带给大家一个门票布局的效果。直接看图吧: 上图展示了一个门票列表的界面,可以发现每个Item的四个角都是凹下去的。并且图片左边上下两个角也是凹下去的。我们该如何实现这种效果呢? 有朋友可能会说UI肯定会给一个这样的背景图片的。嗯,使用这样的图片肯定没问题,缺点就是加在多了占据内存而已。可是P...
  • u013718120
  • u013718120
  • 2016-07-27 22:15
  • 942

自定义View学习笔记(4)->凹凸的View

转载:http://blog.csdn.net/yissan/article/details/51429281 前言 最近做项目的时候遇到一个卡劵的效果,由于自己觉得用图片来做的话可以会出现适配效果不好,再加上自己自定义view方面的知识比较薄弱,所以想试试用自定义View来实现。但是由于自...
  • snow_Lu
  • snow_Lu
  • 2016-06-12 13:55
  • 335

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

本篇文章讲的是自定义View之边缘凹凸的优惠券效果,之前有见过很多优惠券的效果都是使用了边缘凹凸的样式。和往常一样,主要总结一下在自定义View的开发过程中需要注意的一些地方。 按照惯例,我们先来看看效果图 这里写图片描述 一、写代码之前,我们先弄清楚view的启动过程: 之所以想要弄清楚这个...
  • xuanhg221
  • xuanhg221
  • 2016-10-19 16:21
  • 430

底部导航栏(自定义View+ViewPager实现) android项目详解

主要实现底部导航栏和viewpager以及顶部导航栏的标题联动改变
  • q849340003
  • q849340003
  • 2015-05-06 11:09
  • 1138

Android自定义View--简单实现凹凸优惠券效果

一、简述 或多或少老哥们都了解自定义View是啥,本篇文章选了一个比较简单的例子来当做示例,希望大佬们能够喜欢。 知识点:自定义属性attrs的简单使用,通过继承View重写onDraw方法使用Canvas来绘制,关于Canvas的用法和View基础可以看我前面写的文章。 二、重写onDraw方法在...
  • qq_29504877
  • qq_29504877
  • 2017-05-10 16:35
  • 330
    个人资料
    • 访问:536387次
    • 积分:7297
    • 等级:
    • 排名:第3640名
    • 原创:162篇
    • 转载:0篇
    • 译文:0篇
    • 评论:779条
    座右铭
    你不努力,谁也给不了你想要的生活
    关于我
    友情链接
    博客专栏
    最新评论
    去除广告