jump to navigation

Draw 9-patch Tutorial – Sử dụng nine patch 31/08/2011

Posted by hnb1988 in Android Development.
Tags: , , , , , , ,
trackback

Tool Draw 9-patch cho phép bạn tạo ảnh 9 patch dễ dàng hơn với WYSIWYG 

Tạo ảnh 9 -patch không phải quá khó, nhưng để sử dụng tools này có hiệu quả, vào tùy biến áp dụng được cho nhiều hình thì cũng có nhiều điều chúng ta cần quan tâm.

1. Sử dụng cơ bản:

Chúng ta cần một ảnh PNG

Mở tool draw9patch trong thư mục SDK /tools

Rồi bạn chỉ việc kéo thả ảnh ( mở ảnh png) để tiếp tục chỉnh sửa.

Bạn vẽ những pixel ở những vùng trên ảnh mà bạn muốn nơi nó ảnh được co giãn khi phóng to thu nhỏ mà không làm vỡ ảnh ở những chi tiết khác.

Sau khi vẽ xong bạn lưu lại với format 9.png

Chú ý: Khi bạn mở một ảnh thì chương trình xuất hiện thêm đường viền 1 pixel để bạn chấm những điểm mà bạn muốn ảnh của bạn co giản không bị vỡ.

draw9patch

draw9patch

 

2. Một số option trong tool:

  • Zoom: Zoom vùng ảnh bạn đang chỉnh sửa vẽ 9.patch.
  • Patch scale: scale vùng ảnh để xem kết quả pre-view của ảnh sau khi chấm 9.patch.
  • Show lock: lock vùng ảnh đang chỉnh sửa khi move chuột qua vùng ảnh.
  • Show patches: Hiển thị vùng ảnh stretchable.
  • Show content: Highlight vùng ảnh hiển thị  kết quả (purple is the area in which content is allowed).
  • Show bad patches: Hiển thị vùng ảnh được chọn để scale.
Optional controls include
Optional controls include
3.Vẽ nâng cao
Vẽ button
Dưới đây là hỉnh ảnh của một button đơn giản, để 9patch cho button thì chúng ta có thể để ý là không cho co giãn những góc của button. Như vậy ta có thể chọn 9.patch như sau.
9patch button

9patch button

Vẽ Spiner button
Với spiner chúng ta không muốn vỡ phần hình dấu mũi tên lựa chọn, thì chúng ta chỉ có thể cho giãn phần giữa của spiner. Có thể vẽ như sau.
9patch spiner button
9patch spiner button
Vẽ Search Edittext
Tương tự như spiner, chúng ta chỉ có thể co giãn ở phần giữa,
9patch search edittext
9patch search edittext
Nếu có hình bạn chỉ muốn co giãn phần ngoài, giữ nội dung ở giữa thì bạn chỉ chọn những pixel ở bên ngoài để co giãn phần ngoài.
test_9patch_patched

test_9patch_patched

Kết quả thu được.
Kết quả
Kết quả
Sử dụng thuần thục cách vẽ 9patch các bạn sẽ có thể custom dễ dàng hơn những control trong android. Chúc các bạn thành công!
————————————————————-
bloghnb
Tham khảo thêm: http://android10.org, higherpass.com

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: