安卓自定义控件卡券CouponView

最新推荐文章于 2024-05-13 09:49:35 发布

wu_bo_lin

最新推荐文章于 2024-05-13 09:49:35 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：安卓自定义控件

本文链接：https://blog.youkuaiyun.com/qq787207389/article/details/51935995

安卓自定义控件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种定制化的卡券视图组件的设计与实现方法。该组件允许通过XML属性自定义边缘小半圆的半径和间距，能够根据屏幕尺寸自动调整布局中的圆形数量，并在控件上绘制特定样式的小半圆，适用于Android应用中卡券展示的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package com.example.couponview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
/**
 * 卡券控件
 * @author wbl
 *
 */
public class CouponView extends RelativeLayout{

	private Paint mPaint;
	//边缘小半圆的半径
	private float radius = 20;
	//小半圆之间的间距
	private float spacing = 20;
	//左右边距
	private float paddingLeft;
	private float paddingRight;
	//半圆的个数
	private int numCircle;
	//控件的高宽度
	private int height;
	private int width;

	private float remain;

	public CouponView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
//		initView(context);
	}

	public CouponView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView(context,attrs);
	}

	public CouponView(Context context) {
		super(context);
//		initView(context);
	}

	private void initView(Context context,AttributeSet attrs) {
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setColor(Color.WHITE);
		
		TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.CouponView);
		float radius = ta.getDimension(R.styleable.CouponView_radius,20);
		float spacing = ta.getDimension(R.styleable.CouponView_spacing, 20);
		setRadius(radius);
		setSpacing(spacing);
		
		ta.recycle();
		
		paddingLeft = paddingRight = spacing;
	}

	
	private void setSpacing(float spacing) {
		this.spacing = spacing;
	}

	private void setRadius(float radius) {
		this.radius = radius;
	}


	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		System.out.println("这里");
		// getWidth在OnCreat的时候得到的是0. 当一个view对象创建时，android并不知道其大小，所以getWidth()和   getHeight()返回的结果是0，真正大小是在计算布局时才会计算.
		width = this.getWidth();
		height = this.getHeight();
		//圆的数量始终比边距数量少一个，所以总长度减去左边距除以2*radius+spacing的值就是圆的数量
		numCircle = (int) ((width-paddingLeft)/(2*radius+spacing));
		//除以所有圆和边距的所余下的长度
		remain = ((width-paddingLeft)%(2*radius+spacing));
		System.out.println("圆的个数=="+numCircle);
		System.out.println("remain=="+remain);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
        //remain/2保证左右两边边距一样
		float cx = (paddingLeft+radius+remain/2);
		for(int i=0;i<numCircle;i++){
			canvas.drawCircle(cx, 0, radius, mPaint);
			canvas.drawCircle(cx, height, radius, mPaint);
			cx = (int) (cx+(2*radius+spacing));
		}
	}



}

在values目录下创建attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CouponView">
        <attr name="radius" format="dimension"/>
        <attr name="spacing" format="dimension"/>      
    </declare-styleable>
</resources>

下面是布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:wbl="http://schemas.android.com/apk/res/com.example.couponview"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:background="@color/white"
    android:paddingTop="20dp"
     >

    <com.example.couponview.CouponView
        android:layout_width="280dp"
        android:layout_height="100dp"
        android:background="@color/blue"
        wbl:radius="10dp"
        wbl:spacing="10dp"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="卡劵"
            android:textColor="@color/white"
            android:textSize="30dp" />
    </com.example.couponview.CouponView>

</RelativeLayout>

以下是运行结果