Android Canvas实现等级图片

这种需求一般会在一些电商或者带评分系统的项目中出现.

一下是我写的一个用Canvas 实现的工具类以及使用方法

具体思想就是使用BitmapFactory 创建出一个需要大小的Bitmap对象 然后循环将需要的等级图片Draw进去就可以了 (注意一定要回收废弃的Bitmap 对象)

LevelUtil:

package com.haoren.levelandgrade;

import android.graphics.Bitmap;
import android.graphics.Canvas;

/**
 * 级别 绘制工具类
 * Created by Hh on 2017/3/20.
 */
public class LevelUtil {

    /**
     * 一般样式  多少级别 就画多少张图片
     *
     * @param level 当前级别
     * @param bmp   图片资源
     * @return
     */
    public static Bitmap drawLevelStyleOne(int level, Bitmap bmp) {

        Bitmap bitmap = Bitmap.createBitmap(bmp.getWidth() * level, bmp.getHeight(), Bitmap.Config.ARGB_8888);
        //创建需要大小的画布对象
        Canvas canvas = new Canvas(bitmap);
        for (int i = 0; i < level; i++) {
            //每次向右移动一个宽度
            canvas.drawBitmap(bmp, bmp.getWidth() * i, 0, null);
        }
        recycleBitmap(bmp);
        return bitmap;
    }

    /**
     * 样式2
     *
     * @param level    当前级别
     * @param maxLevel 最高级别
     * @param bmp1     当时级别显示图片
     * @param bmp2     未达到级别显示的图片
     * @return
     */
    public static Bitmap drawLevelStyleTwo(int level, int maxLevel, Bitmap bmp1, Bitmap bmp2) {
        Bitmap bitmap = Bitmap.createBitmap(bmp1.getWidth() * level + bmp2.getWidth() * maxLevel - level, bmp1.getHeight(),
                Bitmap.Config.ARGB_8888);
        //创建需要大小的画布对象
        Canvas canvas = new Canvas(bitmap);
        for (int i = 0; i < maxLevel; i++) {
            if (i > (level-1)) { //大于当前级别就画第二种图片
                //每次向右移动一个宽度
                canvas.drawBitmap(bmp2, (i - level) * bmp2.getWidth() + level * bmp1.getWidth(), 0, null);
            } else {
                canvas.drawBitmap(bmp1, i * bmp1.getWidth(), 0, null);
            }
        }

        recycleBitmap(bmp1);
        recycleBitmap(bmp2);
        return bitmap;
    }


    /**
     * 回收Bitmap 对象
     **/
    private static boolean recycleBitmap(Bitmap bitmap) {
        if (bitmap != null) {
            if (!bitmap.isRecycled()) {
                bitmap.recycle();
            }
            System.gc();
            return true;
        }
        return false;
    }

}

使用方法

package com.haoren.levelandgrade;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView mLevelImg1; //用来显示等级的图片
    private ImageView mLevelImg2; //用来显示等级的图片
    private EditText levelNow, levelMax; //当前级别和级别上限


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mLevelImg1 = (ImageView) findViewById(R.id.levelImg);
        mLevelImg2 = (ImageView) findViewById(R.id.levelImg2);
        levelNow = (EditText) findViewById(R.id.levelNow);
        levelMax = (EditText) findViewById(R.id.levelMax);
        findViewById(R.id.btn1).setOnClickListener(this);
        findViewById(R.id.btn2).setOnClickListener(this);

    }

    /**
     * 生成样式一
     */
    public void createStyleOne() {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.diamond_yellow);
        if (!levelNow.getText().toString().equals("")) {
            int level = Integer.parseInt(levelNow.getText().toString());
            //传入当前级别和对应图片
            mLevelImg1.setImageBitmap(LevelUtil.drawLevelStyleOne(level, bitmap));
        }

    }

    /**
     * 生成样式二
     */
    public void createStyleTwo() {
        Bitmap bmp1 = BitmapFactory.decodeResource(getResources(), R.mipmap.star_true);
        Bitmap bmp2 = BitmapFactory.decodeResource(getResources(), R.mipmap.star_false);

        if (!levelNow.getText().toString().equals("") && !levelMax.getText().toString().equals("")) {
            int levelN = Integer.parseInt(levelNow.getText().toString());
            int levelM = Integer.parseInt(levelMax.getText().toString());
            //传入当前级别和对应图片
            mLevelImg2.setImageBitmap(LevelUtil.drawLevelStyleTwo(levelN, levelM, bmp1, bmp2));
        }

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn1:
                createStyleOne();
                break;
            case R.id.btn2:
                createStyleTwo();
                break;
        }
    }
}

布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:padding="15dp">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <EditText
            android:id="@+id/levelNow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="当前级别"
            android:inputType="number"
            android:textSize="14sp" />

        <EditText
            android:id="@+id/levelMax"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="级别上限"
            android:inputType="number"
            android:textSize="14sp" />

    LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical">

        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Creat Style One"
            android:textAllCaps="false" />

        <ImageView
            android:id="@+id/levelImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp" />

    LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:gravity="center_vertical">

        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Creat Style Two"
            android:textAllCaps="false" />

        <ImageView
            android:id="@+id/levelImg2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp" />

    LinearLayout>


LinearLayout>