Tìm hiểu 2D graphic trong android qua ví dụ

Có 2 cách phổ thông nhất để vẽ 2d lên android:

• Vẽ tới một Canvas
• Vẽ tới một view

Canvas là gì?

Theo ý mình hiểu thì nó kiểu như một cái để mình vẽ lên chẳng hạn như bảng, giấy hoặc bất cứ thứ gì mà khi mình cầm bút or phấn vẽ lên đó thì có thể nhìn thấy. Có giấy phải cung cấp bút mới vẽ được. Android cung cấp cho chúng ta class Paint quy định style cho đường vẽ.

Tiếp theo đây chúng ta sẽ cùng làm một ví dụ để hiểu hơn về chúng. Chúng ta sẽ cùng nhau thử vẽ một cái gì đó tới một Canvas trong android.

1. Tạo project Tạo project android tên: GraphicReport với package name: com.framgia.graphicreport.
2. Class MainActivity.java Tạo một class DrawView trong class MainActivity với nội dung sau:

 public class DrawView extends View {
        public DrawView(Context context) {
             super(context);
        }

        @Override
        protected void onDraw(Canvas canvas) {
           // TODO Auto-generated method stub
           super.onDraw(canvas);
       }
    }

Để vẽ được chúng ta cần khởi tạo Paint và set style, màu cho nó trong method onDraw:

           Paint paint = new Paint();
           paint.setStyle(Paint.Style.FILL);
           paint.setColor(Color.WHITE);
           canvas.drawPaint(paint);

Okie khởi tạo đã xong, giờ chúng ta thử vẽ một hình đơn giản như một Rect: Khởi tạo thông số left, top, right, bottom cho Rect:

           int left = 100;
           int top = left;
           int right = 200;
           int bottom = right;

Định nghĩa màu HTML:

paint.setColor(Color.parseColor("#CD5CD5"));

Tiến hành vẽ RECT:

canvas.drawRect(new Rect(left, top, right, bottom), paint);

Để hiển thị được hình vừa vẽ trên app chúng ta sẽ quay trở lại MainActivity class và setContentView là View mà chúng ta vừa tạo:

setContentView(new DrawView(this));

Chạy thử và xem kết quả bạn nhé.

Tiếp theo chúng ta sẽ cùng làm ví dụ về vẽ 2d trên một view của android thông qua Canvas. Cách này cũng không có gì khác biệt lắm so với cách trên. Tại file activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_awidth="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/drawer">
</LinearLayout>

Tại method onCreate :

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#CD5CD5"));
        Bitmap bg = Bitmap.createBitmap(300,300, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bg);
        int left = 100;
        int top = left;
        int right = 200;
        int bottom = right;
        canvas.drawRect(left, top, right, bottom, paint);
        LinearLayout ll = (LinearLayout) findViewById(R.id.drawer);
        ll.setBackgroundDrawable(new BitmapDrawable(bg));

//        setContentView(new DrawView(this));
    }

Chạy và xem kết quả.