创建 Android MATRIX EFFECT CANVAS 教程中的自定义视图

引言

这是一个在Android中创建自定义视图的快速教程。自定义视图创建矩阵雨滴效果。

这是发布在 http://www.androidlearner.com/上的教程。

背景

这里有一些关于它是如何工作的背景介绍

自定义视图

View是代表用户界面组件的基本构建块的类。有时，没有人想使用Android提供的默认小部件，而是想要一些花哨的组件。

那么如何获得自定义组件呢？ 构建您自己的。 但是，我想尝试一下画布。 所以我决定创建矩阵雨滴效果。 以下是矩阵效果的简要说明。

矩阵雨滴效果

矩阵效果是一种流行的效果，其中随机字符从顶部落下，形成雨滴效果。“简短描述”并不适用。

让我解释一下如何设计矩阵雨滴效果

现在在用画布编写视图代码之前，让我解释一下画布矩阵效果的设计将如何工作。 看看下面的图片

设置Android Studio

首先，让我们设置Android Studio。 我不会在这里解释如何设置Android Studio。 外部已经有很多资源了。

1. 所以首先，让我们创建一个空活动项目。
2. 构建并运行应用程序以检查一切是否正常工作。

Using the Code

1. 创建一个扩展View的矩阵效果类

public class MatrixEffect extends View {

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

2. 让我们设置一些必要的初始变量

int width = 1000000;     //default initial width
int height = 100;        //default initial height
Canvas canvas =null;     //default canvas
Bitmap canvasBitmap;     //Bitmap used to create the canvas
int fontSize = 15;       //font size of the text which will fall
int columnSize = width/fontSize;      //column size ; no of digit required to fill the screen
int parentWidth;
String text = "MATRIXRAIN";           // Text which need to be drawn
char[] textChar = text.toCharArray(); // split the character of the text
int textLength = textChar.length;     //length of the length text
Random rand = new Random();           //random generater

int[]  textPosition;                  // contain the position which will help to draw the text

3. 现在让我们创建一个函数来在我们的画布位图上绘制文本

void drawText()
{
    //Set up the paint
    Paint paint = new Paint();
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(Color.GREEN);
    paint.setTextSize(15);


    //loop and paint
    for(int i =0 ;i<textposition .length="" at="" bottom="" canvas.drawtext="" 
        check="" draw="" fontsize="" has="" i="" 
        if="" not="" or="" paint="" 
        position="" rand.nextint="" random="" 
        reached="" text="" textchar="" 
        textlength="" textposition="" the=""> height && Math.random() > 0.975)
            textPosition[i] = 0;   // change text position to zero when 0 when text is at the bottom

        textPosition[i]++; //increment the position array
    }
}

上面的函数负责从顶部在随机位置绘制文本到画布上，让它们落下并检查文本是否已到达其底部位置。 然后更改文本位置到顶部。

4. 现在要在带有Alpha组件的位图上绘制此文本

public void canvasDraw()
{
    //set the paint for the canvas
    Paint paint = new Paint();
    paint.setColor(Color.BLACK);
    paint.setAlpha(5);
    paint.setStyle(Paint.Style.FILL);
    canvas.drawRect(0, 0, width, height, paint);//draw rect to clear the canvas

    drawText(); // draw the canvas
}

为了获得轨迹效果，我们向位图添加alpha组件，因此当一个位图绘制在另一个位图之上时，将出现轨迹效果。

5. 现在是主要绘制函数，它将使绘制完成绘制周期并使其位图在视图上可见。 我们已经重写了View类的Draw()函数。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

Paint paint = new Paint();
    paint.setColor(Color.BLACK);

    canvas.drawBitmap(canvasBitmap,0,0,paint); //draw the bitmap to canvas

    canvasDraw(); // call the draw command
    //Redraw the canvas
    invalidate();
}

在这里，invalidate(); 函数使绘制一次又一次地调用。 因此，我们的位图在画布上一次又一次地绘制。

6. 仍然存在问题，即如何使视图以不同的尺寸运行。 为了做到这一点，对我来说有效的解决方案是覆盖视图的onSizeChange方法。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    width= w;
    height = h;
    super.onSizeChanged(w, h, oldw, oldh);
    //create a Bitmap
    canvasBitmap =  Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    canvas = new Canvas(canvasBitmap); //set the canvas
    // init paint with black rectangle
    Paint paint = new Paint();
    paint.setColor(Color.BLACK);
    paint.setAlpha(255); //set the alpha
    paint.setStyle(Paint.Style.FILL);
    canvas.drawRect(0, 0, width, height, paint);

    columnSize = width/fontSize;
    //initalise the textposiotn to zero
    textPosition = new int[columnSize+1]; //add one more drop
    for(int x = 0; x < columnSize; x++)
        textPosition[x] = 1;
}

此方法创建屏幕大小的画布。

7. 现在我们的自定义视图已准备就绪。 让我们将其添加到布局中。

1. 打开您的主活动布局文件并添加视图

   <scrap.app.skd.matrixeffect.MatrixEffect    android:layout_width="match_parent"
       android:layout_height="match_parent" />

   scrap.app.skd.matrixeffect.MatrixEffect 是视图的类。

8. 现在运行该应用程序，并在您的手机上看到矩阵雨滴。

从github获取画布的完整源代码

• https://github.com/sapandang/Android-Custom-View-Matrix-Rain-Effect

关注点

那么本教程对您有什么帮助呢？ 很有可能没什么用。 但是，您可以使用画布来创建动态壁纸。 :P