background

Multimedia development, including pictures, audio, video and other areas. Recently, I participated in a new project, which just involves multimedia development on the Android client, through which I tried to learn and sort out materials step by step.

The first step is to get started with the simplest image presentation: Try presenting images in three different ways – ImageView, Custom View, and SurfaceView.

implementation

ImageView

You can specify SRC as the corresponding image when defining an ImageView in a Layout file. The image can also be set in Java code through the ImageView setImageDrawable or setImageBitmap for display.

The code is too simple to go into detail here.

The custom View

Custom View, is to customize the View of the three methods, onMeasure, onLayout, onDraw, the first two methods used to define the size and position of the View, the last onDraw is the specific implementation of the drawing, so custom View drawing pictures, I’m going to draw it in onDraw.

public class MyView extends View {
    private Bitmap mBitmap;
    private Paint mPaint;

    public MyView(Context context) {
        super(context);
        // Read images as bitmap instances
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
        //Paint allows you to define the thickness of a brush for drawing lines, shapes, etc., but not for drawing pictures, so you just need to create a new instance
        mPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Canvas means "canvas", which is the drawable area of the View
        canvas.drawBitmap(mBitmap, 0.0, mPaint); }}Copy the code

OnDraw will be called after the View is initialized to draw the image onto the View.

In addition, the View’s postInvalidate method also causes a redraw, calling onDraw.

SurfaceView

SurfaceView is a bit more complex on Android, and it’s a bit different from View. The big difference is that a View can only render in the main thread, whereas SurfaceView can customize the render thread. We know that if we do too much time on the main thread, more than 16ms, we will drop frames and even ANR. The SurfaceView can render without the main thread, so using the SurfaceView to do time-consuming operations such as rendering video can not affect the main thread rendering.

public class SurfaceMainActivity extends Activity implements Callback {
    private SurfaceView mSurfaceView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.mSurfaceView = new SurfaceView(this);
        setContentView(mSurfaceView);
        // The SurfaceView has its own life cycle and cannot be used directly. The SurfaceView can only be drawn on the Surface by listening to it through callback after create and destroy
        mSurfaceView.getHolder().addCallback(this);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        // The Surface has been created and is ready to draw our image
        drawBitmap(holder);
    }

    private void drawBitmap(SurfaceHolder holder) {
        Bitmap bitmap = null;
        try {
        // Create a bitmap instance by reading test.png from assets
            bitmap = BitmapFactory.decodeStream(getAssets().open("test.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
        // Get the canvas
        Canvas canvas = holder.lockCanvas();
        // Draw a big red background (empty the canvas)
        canvas.drawColor(Color.RED);
        if(bitmap ! =null) {
            // Draw the image onto the canvas
            canvas.drawBitmap(bitmap,0.0.new Paint());
        }
        // Finish drawing
        holder.unlockCanvasAndPost(canvas);
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}@Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        // The Surface is destroyed, after which the canvas can no longer be drawn}}Copy the code

While surfaceCreated, a separate thread is created to render the video frame-by-frame to the Canvas, creating a video player. For example, if the SurfaceView is surfaceCreated, a separate thread will render the video frame-by-frame to the Canvas.