CANVAS TRONG ANDROID

Android May 26, 2021

Trong Android nói chung thì tất cả các View như EditText, ImageView,.. đều được vẽ bằng canvas. Về cơ bản thì Canvas là một bề mặt phẳng giống như một tờ giấy nhưng có thể tự vẽ lên dựa trên các phương thức có sẵn.

Trong Android nếu bạn muốn tạo một view với và tự vẽ lại tất cả các thành phần của view đó thì một điều chắc chắn rằng bạn phải sử dụng canvas.

Đi thẳng vào một bài toán cụ thể như sau.

Chẳng hạn dự án chúng ta nhận được một hình ảnh là một bảng điện có các chi tiết như hình sau



Hình 1: Bảng điện A.

Vậy bây giờ chúng ta có những cách nào để tạo nên bảng điện này

  1. Sử dụng thẳng hình ảnh mà KH đưa :))) .
  2. Sử dụng View trong Android kết hợp với ConstraintLayout.
  3. Sử dụng canvas :>.

Cùng bắt đầu với 2 cách trước:

Cách một: dùng thẳng hình ảnh kh đưa và import vào app => cách này quá đơn giản nhưng nếu chỉ một bóng đèn hay cầu chì đổi vị trí thì chúng ta lại phải import lại ảnh và set lại cho chúng.

Cách hai:  sử dụng ConstraintLayout và các view để tạo nên chúng => điều này cũng ko sao. miễn là chúng ta quản lý view tốt nhưng có lẽ mọi người quên rằng trong Android nói chung và Mobile nói riêng Một màn hình chỉ có tối đa 50 view trong khi bảng điện này có vô số cầu chì hay bóng đèn. Hoặc chỉ một điều đơn giản thế này, không có view nào hình tròn từ đầu cho chúng ta cả khi đó chúng ta sẽ phải tạo một drawable shape và set radius cho chúng.
Vậy cả 2 cách trên đều mang lại nhiều hại hơn là lợi. Chúng ta cùng nghĩ đến cách số 3.

Sử dụng canvas

Câu hỏi đặt ra là Canvas có những gì để có thể tạo nên cái bảng điện trên mà không gây ra những rắc rối về sau mà chỉ gây ra khó khăn cho dev mới tiếp cận :))).

Câu trả lời: Canvas có nhiều method hỗ trợ vẽ view nhưng cũng rất khó để bắt đầu với một dev bất kỳ :)).

Để có thể sử dụng canvas và vẽ theo ý thích của mình thì dev phải học canvas rất vất vả vì canvas sử dụng nhiều yếu tố để tạo nên 1 đường thẳng chứ không đơn giản là set width hay height.

Vậy chúng ta cùng thử sức với bản vẽ trên nhé

Trước tiên chúng ta sẽ tạo 1 View chống cho bản vẽ này và đặt tên là Electrical Panel View

và override lại hàm onDraw


Lúc này View của chúng ta chỉ là một mặt phẳng trắng

Trước khi bắt đầu chúng ta cần làm quen với Paint


Paint được sử dụng để xác định color, style, kích thước,... của đối tượng sắp được vẽ. Chúng ta có thể hiểu như sau nếu canvas là một chiếc bút thì Paint đóng vai trò là mực của chiếc bút đó



Tiếp theo chúng ta hãy bắt đầu vẽ 2 đường màu xanh và đỏ đại diện cho 2 đường điện.

Ở đây canvas cung cấp cho chúng ta method như sau

Hinh 3: method drawLine


Method drawLine dùng để vẽ một đường thẳng. Cách hoạt động như sau

Đầu tiên chúng ta cần cung cấp 2 điểm nối là 2 đầu đoạn thẳng dựa trên giao cắt của trục X vs Y.

2 điểm startXstartY được đánh dấu bằng màu xanh tạo nên 1 giao cắt A

2 điểm stopX va stopY được đánh dấu bằng màu tím tạo nên 1 giao cắt B

canvas sẽ dựa vào 2 giao cắt này vẽ 1 đường nối 2 giao cắt lại.

và canvas sử dụng Paint để tô màu, tăng kích thước,... cho đường vẽ nó giống như mực của một chiếc bút vậy

tiếp theo chúng ta vẽ 2 điểm tròn màu xanh và đỏ trên bảng điện

trường hợp này thì canvas sử dụng method mới đó là drawCircle

cx cy ở đây giao với nhau tại điểm A và điểm A được xác định là tâm hình tròn

radius: là bán kính khi canvas vẽ đường tròn đó

paint: là mực để vẽ hình tròn đó :))

Hinh 6: Cách hoạt động của drawCircle

Tiếp theo trong bảng điện chúng ta có một hình chữ nhật chính là cầu chì

Canvas cung cấp method để vẽ một hình chữ nhật đó là drawRect

Hinh 7: method drawRect

drawRect sẽ tạo nên 4 đường thẳng giao nhau tại 4 điểm từ đó tạo nên hình chữ nhật, nếu vì lý do nào đó 4 điểm này ko đối xứng nhau, canvas sẽ không vẽ chúng

method drawRect vẽ hình chữ nhật dựa trên các params

left : đường thẳng màu đỏ cách trục y 1 khoảng

top: đường thẳng màu xanh đậm cách trục Y một khoảng

right: đường thẳng màu xanh nhạt cách trục X một khoảng

bottom: đường thẳng màu xanh lam cách trục X một khoảng

khi 4 đường thẳng này cắt nhau và các điểm đối xứng nhau Paint sẽ vẽ hình chữ nhật

các mũi tên đại diện cho khoảng cách từ các đường thẳng đến 2 trục X vs Y

Hinh 8: Cách hoạt động của drawRect



cùng với tất cả các method trên chúng ta có thể triển khai vẽ bảng điện như sau


Hinh 9:full code




Hinh 10: final bang dien


Ngay khi tạo xong Electrical Panel View thì chúng ta bắt đầu đưa chúng vào màn hình chúng ta muốn sử dụng.

Cụ thể bài toán ở đây sẽ set cứng giá trị cho View trên là 150dp cho cả width vs height:


Nhưng chúng ta thấy bản vẽ có dấu hiệu không co lại theo chiều dài và rộng của View. Điều này xuất phát từ việc chúng ta override lại hàm onDraw nhưng ko override hàm onMeasure



Vậy chúng ta cần tìm hiểu onMeasure tác động tới view như nào

onMeasure() là cơ hội để bạn nói với Android rằng bạn muốn chế độ xem tùy chỉnh của mình phụ thuộc vào các ràng buộc về bố cục do cha mẹ cung cấp như thế nào

onMeasure có các thuộc tính cơ bản sau:

  • EXACTLY có nghĩa là layout_width hoặc layout_height giá trị đã được đặt thành một giá trị cụ thể.
  • AT_MOST thường có nghĩa là layout_width hoặc layout_height giá trị được đặt thành match_parent hoặc wrap_content ở nơi cần kích thước tối đa (điều này phụ thuộc vào bố cục trong khuôn khổ) và kích thước của thứ nguyên mẹ là giá trị. Bạn không được lớn hơn kích thước này.
  • UNSPECIFIED thường có nghĩa là layout_width hoặc layout_height giá trị được đặt thành wrap_content không có hạn chế. Bạn có thể có bất kỳ kích thước nào bạn muốn. Một số bố cục cũng sử dụng lệnh gọi lại này để tìm ra kích thước mong muốn của bạn trước khi xác định thông số kỹ thuật thực sự sẽ chuyển lại cho bạn trong yêu cầu đo thứ hai.

Tóm lược, Canvas còn rất nhiều phương thức vẽ khác mà chúng ta có thể khám phá, hi vọng qua bài viết này mọi người sẽ có thêm lựa chọn trong việc tìm kiếm giải pháp thiết kế View




Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.