Android自定义View之奖券效果

Android自定义View之奖券

2016-08-14 Android学习交

自定义View一直都是android进阶征途上必须要攻克的一关，很多初学者初接触自定义View时心中都会充满恐惧，有种不知如何下手的感觉。

今天讲解的这个小例子十分简单，却十分有用和有趣，本文大家可以学习到以下知识点：

1. 自定义View回调方法：onSizeChanged()
   

2. 自定义View回调方法：onDraw()

3. 如何在布局文件中引入自定义View

废话不多说，首先看一下自定义View的代码如下：

LotteryView.java：

public class LotteryView extends LinearLayout {

    private Paint mPaint;
    private float mGap = 6;//半圆距离
    private float mRadius = 8;//半径
    private int mCircleNumX, mCircleNumY;//半圆数量

    public LotteryView(Context context) {
        super(context);
    }

    public LotteryView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
    }

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

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCircleNumX = (int) ((w - mGap) / (2 * mRadius + mGap));
        mCircleNumY = (int) ((h - mGap) / (2 * mRadius + mGap));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mCircleNumX; i++) {
            float x = mGap + mRadius + ((mGap + mRadius * 2) * i);//圆心x坐标
            float y = mGap + mRadius  + ((mGap + mRadius * 2) * i);//圆心坐标
            canvas.drawCircle(x, 0, mRadius, mPaint);//券上部半圆
            canvas.drawCircle(0, y, mRadius, mPaint);//券左部半圆
            canvas.drawCircle(x, getHeight(), mRadius, mPaint);//券下部半圆
            canvas.drawCircle(getWidth(), y, mRadius, mPaint);//券右部半圆

        }
    }
}

定义了几个成员变量，在onSizeChanged方法中计算出半圆的数量，在onDraw方法中根据半圆的数量循环画出所有半圆。

其中用到了Canvas的drawCircle方法，这个方法非常常用，传入了四个参数，分别是：

x轴坐标

y轴坐标

圆半径

Paint对象

这里我们用到了ListView进行展示奖券，每一个item中包含了一个LotteryView，在布局中引入代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="20dp">

    <com.yayun.lotteryviewdemo.LotteryView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#45b734"
        android:orientation="horizontal"
        android:padding="20dp">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/food" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="16dp">

            <TextView
                android:id="@+id/name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="美食劵"
                android:textSize="18dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="编号:9527"
                android:textSize="12dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="地址：和平饭店"
                android:textSize="12dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="5dp"
                android:paddingTop="5dp"
                android:text="截止日期:2016-08-17"
                android:textSize="12dp" />
        </LinearLayout>
    </com.yayun.lotteryviewdemo.LotteryView>

</FrameLayout>

activity_main.xml中引入一个ListView：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    android:background="#Ffffff"
    tools:context="com.yayun.lotteryviewdemo.MainActivity">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:dividerHeight="0dp"
        android:divider="#Ffffff">

    </ListView>
</RelativeLayout>

MainActivity.java：

public class MainActivity extends Activity {

    private ListView mListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        mListView = (ListView) findViewById(R.id.list);
        BaseAdapter arrayAdapter = new ArrayAdapter(this, 
                R.layout.item_list, R.id.name,
                Arrays.asList("美食劵", "外卖劵", "美食劵", "美食劵", "外卖劵"));
        mListView.setAdapter(arrayAdapter);
    }
}

运行项目如下：

觉得文章有用，请转发至朋友圈，在此感谢。