Trong bài viết hôm nay, mình sẽ chia sẻ trải nghiệm của mình về khóa học đầu tiên Android Basics: User Interface. Khóa học được ước tính học trong 2 tuần, nhưng mình nghĩ nếu có thời gian, các bạn có thể hoàn thành nó trong khoảng 1-3 ngày (mình học trong 1 buổi và làm project trong 1 buổi, còn thời gian cụ thể từng buổi thì mình không nhớ chính xác). Nội dung của khóa học chủ yếu là về những khái niệm cơ bản trong UI: Views, Layout và XML.

View

Bên trên là ảnh chụp màn hình từ app Paper của Dropbox. Một Android app bao gồm nhiều “màn hình” tương tự như vậy - hay còn gọi là layout. Mỗi layout thường gắn liền với một chức năng của app, ví dụ như trong hình là màn hình hiển thị các files của app Paper. Layout chính là nơi xảy ra tương tác giữa người dùng với app của chúng ta thông qua các thao tác chạm, kéo thả, …. Mỗi Layout bao gồm nhiều View với các kích thước và vị trí khác nhau. Để sử dụng View trong Android Studio, chúng ta có 2 cách:

  • Sử dụng công cụ Design trong Android Studio

  • Sử dụng code XML

Cả 2 cách này đều có những ưu điểm và nhược điểm riêng. Cá nhân mình thích sử dụng Design mode hơn vì nó trực quan hơn là dùng XML code. Tất nhiên, các bạn nên kết hợp cả 2 cách để có thể thiết kế UI một cách tối ưu.

Mỗi View trong Android có nội dung đa dạng: TextView, ImageView, Button, … và có thể chứa thêm nhiều View khác bên trong nó. Đối với mỗi View, chúng ta có thể tùy chỉnh các đặc tính của nó như kích thước, màu sắc, …. Smartphone Android rất đa dạng, về cấu hình, kích thước, kiểu dáng, tính năng. Sự đa dạng đó cung cấp nhiều lựa chọn cho người dùng nhưng lại đặt ra một bài toán cho người phát triển làm sao để tối ưu cho các thiết bị mà không phải viết lại code. Sự khác biệt rõ ràng nhất giữa các điện thoại Android (và điện thoại với máy tính bảng) chính là kích thước của màn hình. Vậy khi thiết kế UI cho app, chúng ta phải làm sao để những kích thước, vị trí của những View trong đó không phải phụ thuộc vào kích thước cụ thể nào. Đó là lí do tại sao trong Android, chúng ta nên sử dụng dp (device-independent pixel) làm đơn vị đo kích thước thay cho px (pixel).

#Layout

Để xây dựng một UI hoàn thiện, ngoài View, chúng ta cần một Layout để chứa những View đó. Có 2 loại Layout được giới thiệu trong khóa học là LinearLayout và RelativeLayout.

  • LinearLayout: Đối với LinearLayout, vị trí của các View sẽ được đặt theo hàng hoặc theo cột.

  • RelativeLayout: Các view sẽ được xác định vị trí dựa vào vị trí của các view khác hoặc vị trí của layout. Một số đặc tính của của nó là : toRightOf, toLeftOf, above , below, …. Mỗi View sẽ có một ID do người dùng khai báo trong code XML. Thông qua ID đó, các View khác có thể xác định vị trí.

Ở phần này, mình khá tiếc vì trong khóa không có dạy về ConstraintLayout được Google giới thiệu lần đầu trong Google I/O 2016 (có lẽ vì vậy mà khóa học không có, khóa này bắt đầu từ 2015). ConstraintLayout giúp cải thiện về performance và quan trọng hơn, bạn có thể tạo một layout phức tạp mà không cần phải dùng nhiều LinearLayout và RelativeLayout lồng vào nhau. Nó cũng tận dụng tối ưu được Design Mode trong thiết kế UI. Mình sẽ có một bài viết riêng về ConstraintLayout và những ứng dụng của nó.

Kết quả

Sau khi kết thúc khóa học đầu tiên, thành quả của mình chính là 2 app: Cả 2 app rất đơn giản, chỉ bao gồm 1 layout, người dùng vẫn chưa có thể tương tác gì. Nhưng nó đã đáp ứng được mục đích của khóa là về User Interface.

Nếu các bạn có thể để ý thì ở app thứ 2 , màu sắc và bố cục chưa thật sự ổn lắm. Thật sự là vậy, mình khá tệ trong việc lựa chọn màu sắc, kiểu dáng cũng như là kích thước các view. Mỗi khi thiết kế một UI, mình muốn có một guideline để dựa vào, như vậy UI mình sẽ cân đối về màu sắc và bố cục hơn. Nếu các bạn cũng gặp vấn đề như mình thì có thể xem Material Design của Google. Ở đây, các bạn có thể tìm thấy các quy ước về màu sắc, kích cỡ, vị trí để app của bạn nhìn đơn giản nhưng đẹp mắt. Như vậy thì mình đã hoàn thành khóa học đầu tiên. Tóm lại, trong khóa này mình đã học thêm được:

  • XML: syntax và attributes
  • Một số loại Views: TextView, ImageView, Button,…
  • Hai loại layout: LinearLayout và RelativeLayout

và đã hoàn thành được 2 app. Mình sẽ dành riêng cho ConstraintLayout trong một bài viết khác vì ConstraintLayout đã thực sự thay đổi các mình thiết kế UI, thay vì code XML thì giờ mình chỉ cần kéo thả một cách rất trực quan. Như mọi lần, mình là một thằng Noob và sẵn sằng tiếp nhận những ý kiến của mọi người.

Nếu các bạn thắc mắc tại sao mình lại chọn Monkey In Black để đưa vào trong app của mình thì MIB chính là quán cafe đầu tiên mà mình đi khi mới vào Sài Gòn học. Mình rất thích Monkey In Black vì những con người, nguồn năng lượng, chất điên mà quán gửi vào từng sản phẩm. Đơn giản vậy thôi :D (Mình không PR giúp quán đâu :D)