Thiết kế giao diện XML - Ứng dụng Android

Giao diện là phần quan trọng nhất để giới thiệu ứng dụng của mình tới tay người dùng, nó chiếm trên 60% nhân tố quyết định thành công của ứng dụng, chiếm tới >80% việc giữ chân người dùng trong lần mở ứng dụng.

Việc thiết kế giao diện có nhiều cách

• Tuỳ chỉnh trong Resouce
• Chỉnh sửa sử dụng Java code
• Kết hợp cả 2 cách trên: customize view call in resouce

Hôm nay mình muốn giới thiệu với mọi người về việc sử dụng thiết kế giao diện trong XML

Với mỗi biến, file trong resource sẽ tạo ra 1 id và mặc định được load khi mở ứng dụng. Vì thế hãy tối ưu nó một cách cẩn thận để không mất quá nhiều thời gian chờ khi mở ứng dụng

1. Cấu trúc

Hẳn như các bạn đã biết khi tạo 1 ứng dụng bằng Eclipse hay Android Studio đã tạo ra các thư mục mặc định, tên thư mục không có gì xa lạ với các bạn nhưng việc sử dụng và tối ưu nó thì không hẳn ai cũng biết

drawable

• Chỉ nên chứa nguyên file .xml customview với shape, selector, custom bitmap
• Không đặt file ảnh có size lớn (Chú ý)
• Không chứa file animation
• Nếu cần thiết có thể để file ảnh dạng .9 path nhưng tốt nhất là không nên dùng

drawable-ndpi -- n: l, m, h, x, xx, xxx

drawable-language-ndpi

• Chỉ chứa file ảnh (hãy đặt chính xác ảnh với độ phân giải tương ứng. VD: icon launcher hdpi là 72px)
• Với cấu trúc ngày trước các thư mục này chứa ảnh và .9path, nhưng với cấu trúc hiện tại nên chỉ chứa nguyên .9path
• Với ứng dụng yêu cầu cao ở multiscreen thì hãy để tất cả các ảnh với độ phân giải vào các resource tương ứng
• Với ứng dụng yêu cầu nhẹ dung lượng mức trung bình: chỉ nên đặt ảnh trong xxhdpi
• Với ứng dụng yêu cầu nhẹ nhất mà vẫn đảm bảo độ tinh xảo thì đặt ảnh trong hdpi
• Với ứng dụng yêu cầu nhẹ nhất mà không yêu cầu cao về độ sắc nét để ảnh trogn mdpi

mipmap-ndpi -- n: l, m, h, x, xx, xxx

mipmap-language-ndpi

• Hãy tận dụng đặt file ảnh (not .9path) ở đây với độ phân giải tương ứng
• Sẽ khá tốt cho việc multi screen

values-n -- n: l, m, h, x, xx, xxx

values-language-n -- n: l, m, h, x, xx, xxx

• Tận dụng việc đặt dimension (dimens.xml) vào trong độ phân giải tương ứng sẽ giúp ích cho bạn rất nhiều trong việc thiết kế multiscreen

layout|land

raw | animation | color | bitmap...

Sử dụng như bình thường

2. Cách sử dụng giá trị dimens

Chú ý quan trọng trong việc sử dụng

• Không sử dụng trực tiếp dimens trong xml, custom shape (10dp, 20dp, ...., 14sp, 16sp, ...) có thể khai báo với dimens nhỏ: 0.4dp, 0.8dp
• Hãy cố gắng khai báo trong dimens tương ứng (hay dùng: phone - values-hdpi tablet - values-large-mdpi) và gọi trong resource
• Với dip có độ lớn lẻ hạn chế sử dụng nên quy đổi về dạng chẵn hoặc 2^n: 16, 32, 48, 64, 72, 96, 114, 196
• Nếu giá trị nằm giữa các khoảng nên dùng 1 số bội nhiều lần của 2: 24, 36, 48

3. Cách thiết kế layout XML

**Chú ý: **

• Hạn chế sử ảnh làm background, nếu có thể sử dụng custom shape thay thế thì hãy cố gắng dùng nó, tốc độ load ứng dụng sẽ nhanh hơn rất nhiều

Nguyên tắc thiết kế

• Không nên đặt id trùng nhau giữa các layout (chắc chắn là không được trùng trong 1 layout rồi)

• Với XML phức tạp hãy cố gắng làm đơn giản nó Ví dụ: Left: textView - Right: Checkbox Như bình thường các bạn phải sử dụng 2 views: TextView và CheckBox thì thay vì thế chỉ cần sử dụng nguyên TextView hoặc CheckBox là đủ và sử dụng thêm thuộc tính: drawableLeft | drawableRight

• Với Group View được sử dụng lại nhiều lần trong layout. Bạn có thể custom nó thành file nhỏ -> Load lên Java code -> Customize -> Sử dụng lại trong layout. Việc này rất hiệu quả trong cách thiết kế XML nó làm giảm số lượng View và cải thiện tốc độ load ngoài ra còn đẹp code

• Với những View , hoặc group view có size lớn một phần nào đó của màn hình, những view cân đối 2 bên hãy sử dụng weight | layout_weight (đừng nên dùng size nhé) sẽ cực kỳ hiệu quả cho multi screen, multi device

• Hạn chế sử dụng độ sâu của View: LinearLayout -> RelativeLayout->LinearLayout->View hay kiểu tương tự, nếu các bạn có thể rút ngắn về độ sâu thì hãy làm nó

• Với những View gần tương tự như nhau hãy thiết kế 1 cái chung nhỏ nhất để sử dụng lại nó (include)

• Chú ý 1: Việc thiết kế layout bội (layout nhiều nhất của 2 layout) xong khi sử dụng cái nào không cần thì gone đi -> Việc đó nên cực kỳ hạn chế, nó sẽ làm cho bạn không quản lý được view và load chậm

• Chú ý 2: Với view phức tạp nên phân tích kỹ trước khi bắt tay vào code

Ở bài viết sau mình sẽ giới thiệu chi tiết hơn và có hình ảnh minh hoạ trong việc gặp phải multi view trong list | scroll | ...

*Nếu gặp view quá phức tạp mà không biết nên thiết kế thế nào đừng ngần ngại mà để lại comment nhé *

Happy coding...