Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Android SDK: Tạo Một Ứng Dụng Vẽ - Tương Tác Touch

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Create a Drawing App on Android.
Android SDK: Create a Drawing App - Interface Creation
Android SDK: Create a Drawing App - Essential Functionality

Vietnamese (Tiếng Việt) translation by Na Dang (you can also view the original English article)

Trong loạt bài này, chúng ta sẽ tạo một ứng dựng finger-painting (dùng ngón tay để vẽ) cho Android với cách thức touch interaction (tương tác chạm). Người dùng sẽ có thể chọn từ một bảng màu, chọn kích thước brush (nét cọ), xoá, tạo một hình vẽ mới, hoặc lưu hình vẽ hiện thời vào bộ ảnh của thiết bị.


Cấu trúc của loạt bài viết:

Loạt bài về Tạo một ứng dụng vẽ sẽ có ba phần:


Kết quả sau cùng (xem trước)

Drawing App

Trong phần đầu của loạt bài, chúng ta đã tạo ra giao diện người dùng. Trong phần thứ hai này, chúng ta sẽ triển khai phần vẽ trên canvas và chọn màu sắc. Trong phần cuối của loạt bài, chúng tôi sẽ giới thiệu khả năng để xoá, để tạo ra những bức vẽ mới và sao lưu một hình vẽ vào bộ ảnh trên thiết bị của người dùng. Chúng ta sẽ xem các chọn lựa bạn có thể sử dụng để cải tiến ứng dụng này trong các bài hướng dẫn tiếp theo, gồm có tô màu theo mẫu, độ mờ đục và các tương tác khác ngoài màn hình cảm ứng.


1. Chuẩn bị vẽ

Bước 1

Lần trước chúng ta đã tạo một class tên là DrawingView, có vai trò là môt View để thực hiện các chức năng vẽ (chứa các function để vẽ). Chúng tôi đã tạo ra phần outline của phần khai báo class và một method tên "setupDrawing" - chúng tôi sẽ khai triển ngay bây giờ. Trong lớp DrawingView, bổ sung vào phần import dưới đây:

TIếp theo thêm vào các biến trên cùng trong class:

Khi người dùng chạm vào màn hình và di chuyển ngón tay để vẽ, chúng tôi sẽ dùng một Path để truy nguyên hành động vẽ trên canvas. Cả canvas và hình vẽ nằm trên canvas được đại diện bởi các đối tượng Paint. Màu vẽ ban đầu tương ứng với màu đầu tiên trong bảng màu chúng ta đã tạo ra lúc đầu, nó sẽ được chọn ban đầu khi ứng dụng khởi động. Sau cùng, chúng tôi khai báo các biến cho canvas và bitmap - các đường path được vẽ với drawPaint sẽ được vẽ trên canvas, canvas được vẽ bằng canvasPaint.

Bước 2

Trong phương thức setupDrawing, hãy khởi tạo vài biến ngay để thiết lập class để vẽ. Đầu tiên khởi tạo đối tượng vẽ Path và Paint:

Tiếp theo thiết lập màu ban đầu:

Bây giờ thiết lập các thuộc tính ban đầu của path:

Chúng tôi sẽ thay đổi phần mã nguồn này trong bài hướng dẫn tiếp theo khi chúng ta triển khai khả năng chọn kích thước cọ bút, bây giờ chúng ta sẽ thiết lập kích thước cọ vẽ. Thiết lập chống răng cưa, đường viền và phong cách chữ in sẽ làm những hình vẽ trở nên trơn tru hơn.

Hoàn tất phương thức setupDrawing bằng cách khởi tạo đối tượng canvas Paint:

Lần này chúng ta chọn dithering (độ rung) bằng cách truyền một tham số cho constructor.

Bước 3

Chúng ta cần override một vài phương thức để thay đổi hàm View như là một View đang vẽ. Trước tiên, ở là class DrawingView, override phương thức onSizeChanged, nó sẽ được gọi khi View được gán một kích thước:

Bên trong phương thức này, đầu tiên gọi phương thức từ superclass:

Bây giờ khởi tạo canvas vẽ và bitmap với giá trị chiều dài và chiệu cao:

Bước 4

Để cho phép class thực hiện chức năng là một View vẽ tuỳ biến, chúng tôi cũng cần override phương thức onDraw, vì thế bổ sung vào class thế nay:

Bên trong phương thức, vẽ canvas và vẽ path:

Chúng tôi vẫn chưa khai triển khả năng cho dùng vẽ Path sử dụng Paint, nhưng khi chúng tôi thực hiện, nó sẽ được thể hiện trong View. Mỗi lần người dùng vẽ bằng tương tác chạm, chúng ta sẽ vô hiệu View, cho phương thức onDraw xử lý.


2. Đơn giản hoá Drawing

Bước 1

Khi View drawing ở trên màn hình ứng dụng, chúng ta muốn người dùng chạm vào nó để đăng ký cho các hành động vẽ. Để thực hiện điều này, chúng tôi cần lắng các sự kiện touch. Trong class drawingView của bạn, bổ sung vào phương thức sau:

Bên trong phương thức, lấy vị trí X và Y của cái chạm của người dùng:

Bước 2

Tham số MotionEvent đến phương thức onTouchEvent sẽ để chúng ta phản hồi đến các sự kiện chạm đặc trưng. Các hoạt động chúng ta hứng khởi để triển khai hình vẽ là down, moveup. Thêm switch vào phương thức để hồi đáp cho từng trường hợp:

Dành thời gian để nhìn vào đoạn mã này: Khi người dùng chạm vào View, chúng ta di chuyển đến vị trí đó để bắt đầu vẽ. Khi họ chuyển ngón tay trên View, chúng ta vẽ đường path cùng với vùng chạm của họ. Khi họ nâng ngón tay lên, rời khỏi View, chúng ta sẽ vẽ đường Path và reset nó để chờ hành động vẽ tiếp theo.

Bước 3

Sau phần khai báo switch, hoàn tất phương thức bằng cách vô hiệu hoá View và trả về giá tri true (đúng):

Gọi invalidate sẽ làm phương onDraw xử lý.


3. Chọn các màu

Bước 1

Hãy triển khai khả  năng cho người dùng chọn màu từ bảng màu. Trong ứng dụng, phần Activity, bổ sung các phần import sau:

Thêm vào những giá trị biến dưới đây vào class:

Phần này đại diện cho giá trị của View tuỳ biến mà chúng ta đã bổ sung vào layout. Bên trong onCreate, sau mã nguồn có sẵn, khởi trị biến này bằng cách lấy một tham chiếu đến nó từ layout.

Giờ chúng ta có View được hiển thị trong Activity, chúng ta có thể gọi các phương thức trong class DrawingView.

Bước 2

Chúng ta thiết lập màu ban đầu trong class hình vẽ View, bây giờ hãy cài đặt giao diện người dùng để phản ánh và quản lý điều đó. Trong class chính Activity, bổ sung một giá trị biến khác để đại diện cho button màu vẽ trong bảng màu:

Bên trong onCreate, chúng ta muốn lấy nút màu vẽ đầu tiên trong khu vực bảng màu, sẽ được chọn ngay lúc ban đầu khi vẽ. Đầu tiên hãy gọi Linear Layout nếu nó nằm bên trong:

Lấy button đầu tiên và lưu nó là giá trị biến khởi tạo:

Chúng tôi sẽ dùng một hình vẽ được khác trên button để hiển thị cái đang được chọn:

Thêm tập tin này vào các phác thảo của ứng dụng, cho nó một các tên là "paint_pressed.xml" và nhập vào những phần dưới đây:

Điều này tương tự như "paint.xml" phác thảo mà chúng ta tạo ra lần trước, nhưng với màu tối hơn xung quanh hình vẽ.

Bước 3

Bây giờ chúng ta có thể cho người dùng chọn các màu vẽ. Khi chúng ta tạo ra layout lần trước, chúng ta đã liệt kê một thuộc tính onClick cho các button của bảng màu - bổ sung phương thức vào class Activity của bạn:

Bên trong phương thức này, đầu tiên kiểm tra người dùng đã cllck vào một màu vẽ, màu này không phải là màu đang được chọn:

Bên trong block If, lấy tag chúng ta đã thiết lập cho mỗi button trong phần layout, đại diện cho màu được chọn:

Chúng tôi cần dùng class View tuỳ biến để chọn màu. Di chuyển class DrawingView và bổ sung phương thức sau:

Bên trong phương thức, bắt đầu bằng việc vô hiệu View.

Tiếp theo, phân tích và thiết lập màu để vẽ:

Trở lại class chính Activity, trong phương thức paintClicked sau lấy tag color, gọi một phương thức trên đối tượng tuỳ biến View.

Giờ cập nhật UI (giao diện người dùng) để phản ánh phần vẽ mới chọn và đưa phần trước đó trở về trạng thái bình thường:


Tổng Kết

Giờ bạn có thể chạy ứng dụng và vẽ trên canvas, chọn màu để vẽ. Bạn nên xem bảng màu phản ánh màu đang được chọn. Trong bài viết này chúng tôi đi qua những tính năng thiết yếu của bất ký ứng dụng chạm-để-vẽ cho Android, vì thế bạn nên có kỹ năng cơ bản để thao tác các chức năng vẽ trên những ứng dụng khác. Trpng phần cuối của loạt bài, chúng ta sẽ triển khai phần xoá, chọn cọ vẽ và kích thước công cụ xoá, sao lưu hình vẽ bắt đầu bức vẽ mới.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.