Hướng dẫn cơ bản về 9-patch cho Android UI

Trong quá trình tìm hiểu và phát triển ứng dụng cho Android. Tôi được biết tới 9-patch image. Ban đầu chưa làm gì tới nên tôi bỏ qua. Giờ đây có một dự án liên quan tới nó nên tôi phải đi tìm hiểu xem nó là gì, làm việc như thế nào và tạo ra bằng cách nào.

Về cơ bản, 9-patch sử dụng png transparency để tạo một dạng tiên tiến của 9-slice hoặc scale9. Guild map, là các đoạn thẳng đen 1-pixel vẽ trên cạnh của hình, nó định nghĩa vùng lặp lại (scaleable area) và vùng phủ lấp (fill area) của ảnh. Bằng cách đặt tên file ảnh là name.9.png, Android sẽ nhận ra được định dạng 9.png và sử dụng đường hướng dẫn đen để lặp (scale) và phủ lấp (fill) ảnh bitmap.

Dưới đây là một guild map cở bản:

Image

Trong hình trên, ta có các đường hướng dẫn (guild) ở mỗi cạnh của hình. Các guild bên TRÊN (TOP) và bên TRÁI (LEFT) ảnh định nghĩa vùng có thể lặp lại (scaleable area) của ảnh, các guild bên PHẢI (RIGHT) và bên DƯỚI (BOTTOM) định nghĩa vùng phủ lấp (fill area) của ảnh.

– Các đường hướng dẫn màu đen sẽ bị loại khỏi ảnh – chúng sẽ không xuất hiện trong ứng dụng.

– Các đường hướng dẫn phải là các đường có độ rộng 1 pixel. Nếu như một nút nhấn kích thước 48×48 thì 9-patch png của nó sẽ có kích thước thật là 50×50.

– Các đường hướng dẫn phải là màu đen hoàn toàn (#000000). Thậm chí chỉ một sự khác biệt nhỏ trong thuộc tính màu sắc (color) hoặc độ trong suốt (alpha) cũng sẽ là nguyên nhân khiến nó thể hiện không đúng và bị căng ra (stretch) theo cách thông thường.

– Cũng phải luôn ghi nhớ rằng, vùng còn lại của đường viền 1-pixel phải hoàn toàn trong suốt. Như vậy là bao gồm cả 4 góc của ảnh.

Image

Các đường hướng dẫn bên TRÊN và bên TRÁI được sử dụng để định nghĩa vùng lặp lại của ảnh – Bên TRÁI là định nghĩa vùng lặp theo chiều cao, bên TRÊN định nghĩa vùng lặp theo chiều rộng. Sử dụng hình ảnh một nút nhấn làm ví dụ, như vậy có nghĩa là nút nhấn có thể căng theo chiều ngang và dọc bên trong vùng màu đen và mọi thứ khác như các  góc, sẽ được giữ nguyên kích thước. Điều này cho phép nút nhấn có thể mở rộng tới bất kỳ kích thước nào mà vẫn duy trì sự thống nhất về hình ảnh.

Ghi nhớ một điều quan trọng là các ảnh 9-patch không thu hẹp được, chúng chỉ có thể mở rộng ra. Vì vậy hãy tạo ảnh có kích thước nhỏ nhất có thể.

Ngoài ra, ta có thể bỏ đi một vài phần ở giữa của đường hướng dẫn vùng lặp. Ví dụ, nếu ta có một nút nhấn với một cạnh bóng láng xuyên qua giữa của nút nhấn, ta có thể bỏ đi một vài pixel ở giữa của đường hướng dẫn bên TRÁI. Trung tâm trục ngang của ảnh sẽ không được lặp, chỉ có các phần bên trên và bên dưới của nó được lặp lại, như vậy hình của của sẽ không bị răng cưa và mờ.

Image

Các đường hướng dẫn lấp đầy là tùy chọn và cung cấp một cách thức để xác định vùng sản phẩm như text label. Vùng phủ lấp xác định bao nhiêu vị trí trong ảnh để đặt text, icon, hoặc các thứ khác, 9-patch không chỉ cho các nút nhấn, nó cũng còn được dùng như các ảnh nền.

Ví dụ về button và label bên trên được phóng đại để giải thích ý tưởng về sự phủ lấp (fill). Thực tế mà nói, tôi không có kinh nghiệm về cách mà Android làm việc với multi-line label. Thông thường, một nút nhấn hoặc label chỉ bao gồm một dòng text.

Cuối cùng, dưới đây là một demo tốt cho thấy cách mà các đường hướng dẫn mở rộng và phủ lấp làm việc, chẳng hạn như một LinearLayoit với một hình nền và các góc bo tròn.

Image

Với ví dụ này, đường hướng dẫn bên TRÁI không được sừ dụng, nhưng chúng ta vẫn buộc phải có. Ảnh nền không lặp theo chiều dọc; Nó chỉ lặp theo chiều ngang (dựa vào đường hướng dấn TRÊN). Hãy chú ý tới các đường hướng dẫn phủ lấp bên PHẢI và DƯỚI, mỏ rộng ra ngoài cho tới khi gặp các cạnh cong của ảnh. Việc này cho phép ta đặt các nút tròn gần với các cạnh của hình nền cho một cảm giác nhìn chặt chẽ và khít.

9-patch thật đơn giản đúng không! ^^

Để hiểu rõ hơn về 9 patch image và cách tạo ra nó như thế nào, xin hãy nhẫn vào link bên dưới:

Android 9 Patch Image Tutorial

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s