Material Design và Coding Convention

Dẫn nhập

Trong các bài học trước, chúng ta đã cùng nhau tìm hiểu về FRAGMENT – một thành phần của giao diện ứng dụng Android, và cách tích hợp nó trong một Activity. Cũng như tìm hiểu về cơ chế Backstack cho Fragment.

Ở bài hôm nay, chúng ta cùng nhau tìm hiểu sơ bộ về Material Design, cách tích hợp Material Design vào ứng dụng Android và các quy chuẩn code Android do... Kteam đặt ra. Thật ra không có quy chuẩn nào được quy định cho lập trình viên. Nhưng nếu các bạn quản lý code tốt, rõ ràng, thì việc bảo trì, tìm kiếm và sửa lỗi code sẽ nhanh hơn rất nhiều.

Nào, khởi hành!

Nội dung

Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:

• CÁCH TẠO MỘT PROJECT ANDROID.
• Cấu trúc của một project Android.
• Một ít thẩm mỹ, không thì nên hỏi tham khảo bạn nữ nào đó, hoặc ai đó thích hội họa.

Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:

• Material Design trong Android.
• Quy chuẩn viết code đẹp.

Do đặc thù của bài học này là toàn lý thuyết, gần như không có thực hành nên các bạn hoàn toàn có thể bỏ qua. Nhưng theo mình, nếu bỏ qua là các bạn cũng đã bỏ qua luôn một trong những xu hướng thiết kế tốt nhất hiện nay, cũng như quy chuẩn code Android ngăn nắp sau này.

Material Design

Trước khi dông dài, chúng ta chốt hạ luôn một số điểm về Material Design là…

• Một ngôn ngữ thiết kế.
• Một tập các quy chuẩn thiết kế mà các nhà thiết kế, lập trình viên nên tuân theo để mang lại trải nghiệm tốt nhất cho người dùng, cũng như thẩm mỹ trong ứng dụng.
• Xu hướng phẳng hóa hiện thực

Giao diện Material Design nhắm đến việc mang lại cho người dùng cảm giác “thực” như ngoài đời qua việc tương tác với các nội dung số. Việc này có vẻ cao siêu nhưng thật ra khi mổ xẻ thì ta sẽ có những thành phần chính:

• Xử lý hoạt họa (animation).
• Các thành phần rõ ràng, mang tính minh họa cao.
• Các thành phần được xếp theo hệ tọa độ X-Y-Z. Với Z chiều dương hướng về phía mắt người dùng.

Ví dụ minh họa: Ứng dụng YouTube:

Như các bạn đã thấy, việc ứng dụng trục Z tạo cho người dùng cảm giác có chiều sâu về giao diện. Cũng như cho phép nhiều thao tác phức tạp khác. Cụ thể ở trên ta sẽ có:

• Khung hình video là một layer (lớp).
• Khung tìm kiếm video là một lớp khác, nằm phía dưới khung hình video.
• Thao tác vuốt kéo đi kèm hiệu ứng chuyển động giúp ứng dụng mô tả ý định rõ ràng hơn. (Vuốt ngang khung video thu nhỏ thì video sẽ được bỏ đi, không phát nữa).

Ví dụ minh họa: Ứng dụng Google Keep: Các thành phần chính của ứng dụng được ẩn dần khi cuộn lên xuống, nhằm tạo ra nhiều không gian hơn cho nội dung chính.

Thêm nữa, như các bạn thấy, fragment The Stone Roses được đưa đè lên mục Recommended for you, và có thể quay lại bất cứ khi nào.

Màu sắc

Các màu sắc trong Material Design được đi kèm theo các bộ màu. Các bộ màu có các sắc thái từ đậm đến nhạt và phân bố như sau:

Các bạn có thể xem bộ màu đầy đủ và lấy code màu Hexa tại đây.

Các thành phần cũng nên được sắp xếp màu sắc hợp lý để phân biệt rõ cái nào với cái nào. Ví dụ:

• Tốt: Các màu sắc được xếp tương phản, dễ nhìn, dễ phân biệt.

• Không tốt: Màu sắc của thanh công cụ trùng màu với nút dấu + , khó phân biệt.

Như các bạn đã thấy, giao diện của các ví dụ trên khá dễ nhìn, sạch sẽ và có tính rõ ràng cao. Về tổng quan, Material Design sẽ có các đặc điểm:

• Sử dụng các màu nổi bật, một màu chủ đạo (primary) thường nằm ở phía thanh ở trên ứng dụng.
• Các biểu tượng phẳng, đơn giản, nhưng dễ hiểu, có một số thuộc tính như đổ bóng.
• Các menu, nút nhấn, chữ viết rõ ràng, nhiều khoảng trắng. Khoảng trắng có độ lớn vừa phải, phù hợp với kích cỡ ngón tay.
• Các hiệu ứng chuyển động mang tính tự nhiên, có gia tốc. Nhằm gợi ý một tính năng nào đó.

Tích hợp Material Design vào ứng dụng Android

Trước đây khi Material Design được giới thiệu, chỉ các thiết bị Android 5.0 trở lên mới có. Tuy nhiên Google đã cho ra mắt App Compat Library, giúp các thiết bị chạy phiên bản Android cũ hơn cũng có được giao diện Material Design (dù rằng còn một số hạn chế).

Để “sử dụng” (mình xin nhấn mạnh là sử dụng) thư viện Material Design cho các máy chạy Android cũ hơn 5.0 thì chúng ta cần thêm cho nó thư viện Support Library của Google, bằng cách thêm các dependencies cho project vào file build.gradle:

build.gradle (trong thư mục /app):

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "24.0.2"
    defaultConfig {
        applicationId "com.howkteam.helloworld"
        minSdkVersion 14
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:support-v4:24.2.1'
    compile 'com.android.support:design:24.2.1'
    testCompile 'junit:junit:4.12'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Trong phần cuối đoạn code chính là dependencies cần thiết từ thư viện Support Library như sau:

compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:support-v4:24.2.1'
compile 'com.android.support:design:24.2.1'

Ngoài ra để sử dụng một số loại View /component khác thì chúng sẽ có dependency riêng như FloatingActionButton, RecyclerView,…

apply plugin: 'com.android.application'

android {
    compileSdkVersion 24
    buildToolsVersion "24.0.2"
    defaultConfig {
        applicationId "com.howkteam.helloworld"
        minSdkVersion 14
        targetSdkVersion 24
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:support-v4:24.2.1'
    compile 'com.android.support:design:24.2.1'

    compile 'com.android.support:cardview-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    compile 'com.android.support:palette-v7:24.2.1'

    testCompile 'junit:junit:4.12'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Và khi sử dụng thì chúng ta dùng một theme nào đó, hoặc tự tạo, nhưng theme đó phải có parent là Theme.AppCompat. Xem theme ở đâu thì các bạn mở file /res/values/styles.xml là thấy:

Để xem trước các thành phần giao diện như nút, các Radiobox, nút đánh dấu,… trông như thế nào ở mỗi theme thì các bạn vào Tools > Android > Theme Editor:

Tab Theme Editor sẽ hiện ra, các bạn có thể xem các view component ở đây. Muốn đổi sang theme khác, các bạn chọn phần Show all themes như hình:

Cửa sổ Select Theme hiện ra, các bạn chọn All ở cột trái và chọn lần lượt từng cái ở cột phải để xem theme trông ra sao. Ví dụ phiên bản Android 4 thì các theme Holo là theme chủ đạo, còn theme Material là các theme có chữ Material hoặc AppCompat:

Và khi sử dụng các component thì chú ý sử dụng trong package android.support. Ví dụ như toolbar chẳng hạn:

package com.howkteam.helloworld;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    // Toolbar support, hỗ trợ Material Design.
    android.support.v7.widget.Toolbar supportToolbar;
    // Toolbar thường, tùy theo phiên bản Android mà trông sẽ khác.
    android.widget.Toolbar regularToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Quy chuẩn code trong Android Studio

Quy chuẩn về file .gitignore:

Các bạn có thể copy hết phần nội dung màu vàng đậm dưới đây cho file .gitignore. Nếu như gặp lỗi trong quá trình lưu file thì có thể bỏ các dòng có dấu # ở đầu.

Để tạo ra file .gitignore (lưu ý: có dấu chấm ở đầu file) trên Windows, bình thường thì các bạn không thể chuột phải > New mà chúng ta sẽ tạo file có tên gitignore.txt, sau đó:

Bước 1: Trên thanh địa chỉ thư mục, gõ CMD để mở Command Prompt.

Bước 2: Sử dụng lệnh sau để đổi tên file:

ren gitignore.txt .gitignore

Hình minh họa:

# Các file APK đã build
*.apk
*.ap_

# File cho máy ảo Dalvik
*.dex

# File Java được tạo ra sau khi biên dịch
*.class

# File được sinh ra
bin/
gen/
out/

# Các file gradle
.gradle/
build/

# Các file tùy chỉnh nội bộ trong máy
local.properties

# Các file Proguard sinh ra bởi Eclipse
proguard/

# Các file log
*.log

# Các file tạm của Android Studio Navigation
.navigation/

# Android Studio captures folder
captures/

# Intellij
*.iml
.idea/workspace.xml
.idea/libraries

# Keystore file
*.jks
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Cuối cùng, bạn nên thêm một file có tên README.md, viết dạng markdown để upload lên git sau này khi cần. File README.md này chính là file giới thiệu về project của bạn.

Quy định đặt tên file:

Tên các class:

• Tên class đặt liền nhau, bắt đầu mỗi chữ viết hoa. Ví dụ: DownloadObject.java.
• Nếu tên class có chứa thành phần của Android, thì tên thành phần đó chính là phần cuối của tên file. Ví dụ: SignInActivity.

Tên các file resources:

• Viết thường, cách nhau bởi dấu gạch dưới _ .
• Phần đầu tên là viết tắt của thành phần.

Tên các file drawable:

Với các icon các kích thước icon khác nhau sắp xếp vào các thư mục hdpi, xhdpi tương ứng và cùng tên:

Các thuộc tính nếu có, đặt ở cuối file trước phần mở rộng: Ví dụ: btn_buy_focused.png

Các file layout:

Giống như các file drawable nhưng thay vì để tên component ở cuối, ta để tên component lên đầu:

• Với các Adapter View: các item (giả sử dùng trong Custom List View) thì mở đầu bằng item_ .
• Với các layout con sử dụng lồng (con) trong các layout khác, để prefix là partial_ hoặc child_.

Các file menu:

Các file menu đặt trong thư mục /menu, cùng tên với layout/activity.

Thống nhất: Nên hay không nên đặt tiền tố menu_ trước file xml menu.

Phân loại các class:

• Các class Adapter phải đặt trong package Adapters.
• Các class Fragment phải đặt trong package Fragments.
• Các class model (hoặc kiểu dữ liệu – DataTypes) phải được đặt trong package Models.
• Các class chứa phương thức tính toán, kết nối database, xử lý,… đặt trong package Utilities.
• Các class activity phải được đặt trong package Activities.
• Tên các class tuân thủ theo quy ước đặt tên chung.

Quy định về Code

Quy định chung khi sử dụng Java:

Không được “nuốt” Exception:

• Không được “nuốt” exception (bắt exception nhưng không thao tác gì). Thay đổi thông số an toàn trong phần catch, hoặc giữ nguyên nhưng phải có chú thích rõ ràng. Ví dụ:

void setServerPort(String value) {
    try {
        serverPort = Integer.parseInt(value);
    } catch (NumberFormatException e) { }
}
1
2
3
4
5
6

• Luôn bắt lỗi ở mỗi method / function gọi ra. Ví dụ:

void setServerPort(String value) {
    try {
        serverPort = Integer.parseInt(value);
    } catch (NumberFormatException e) {
        serverPort = 80;  // default port for server
    }
}
1
2
3
4
5
6
7
8

Không bắt lỗi chung chung dạng như:

Import đủ package, không thừa, không thiếu:

• Được: import com.howkteam.spellchecker;
• Không được: import com.howkteam.*;

Cung cách code

Cách đặt tên các biến:

• Tất cả các biến đều được khai báo ở đầu class.
• Các biến thông thường bắt đầu bằng chữ cái thường, đầu mỗi từ sau đó viết hoa. Ví dụ: ageOfMember.
• Các biến hằng, constant viết hoa hết, cách nhau giữa các từ bởi dấu gạch dưới _ .
  Ví dụ: public static final int LOGIN_INDICATOR = 1;
• Các component có trạng thái (normal, pressed, focused, disabled, selected) sẽ được ghi ở cuối và trước đấu _ (underscore).
  Ví dụ: btnRegister_disabled.

• Các prefix (tiếp đầu ngữ) hằng đặc biệt:

Sử dụng comment hợp lý:

Dùng comment dạng đơn  // với các khối code (code block).

Dùng comment dạng khối khi nội dung comment có nhiều dòng. Sử dụng với các code block.

Dùng comment dạng Javadoc với:

• Class.
• Các method tự viết.
• Các biến hằng (constant).

Dùng các từ viết tắt như từ thường

​​Quy ước đặt tên biến cho các widget component:

• Các prefix lấy từ loại của component, ví dụ button là btn, textview là tv…
• Liền sau là tên tiếng Anh mang hàm ý tác dụng của component đó: Ví dụ radio box chọn giới tính sẽ là rbGender.
• Các component có trạng thái (normal, pressed, focused, disabled, selected) sẽ được ghi ở cuối và trước đấu _ (underscore). Ví dụ: btnRegister_disabled.

Các prefix (tiếp đầu ngữ) hằng đặc biệt:

Hạn chế phạm vi biến cục bộ:

Các biến cục bộ phải hạn chế phạm vi tối đa, khai báo ngay trước khi nó được sử dụng. Khi chưa có đủ thông tin khai báo thì khi nào sử dụng mới khai báo.

Import package theo thứ tự:

• Android.
• Các package cùng project.
• Java và Javax.
• Từ hãng thứ ba

Tất cả các package ưu tiên thứ tự trên trước, thứ tự sau đó là sắp xếp theo bảng chữ cái. Có thể tự động format bằng Ctrl+Shift+F và Ctrl+Shift+O.

Căn lề biểu thức và đặt annotation:

Sử dụng space để căn lề (không phải dùng tab).

Đặt các annotation và ở các method cần thiết. Override khi method đang dùng override method từ lớp cha.

Phải sử dụng Space để căn lề, không sử dụng Tab.

Sử dụng cách ôm khối code / phương thức chuẩn:

class MyClass {
    int func() {
        if (something) {
            // ...
        } else if (somethingElse) {
            // ...
        } else {
            // ...
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

Nếu câu lệnh hoặc biểu thức quá dài, ngắt dòng trước dấu biểu thức. Ví dụ:

int longName = anotherVeryLongVariable + anEvenLongerOne - thisRidiculousLongOne
        + theFinalOne;
1
2

Tương tự với các method lồng nhau:

Picasso.with(context)
        .load("http://microbenri.vn/images/dump.jpg")
1
2

Quy định sắp xếp parameter trong method:

• Context (nếu có) phải đặt lên đầu tiên.
• Callback phải đặt cuối cùng.

Quy định sắp xếp các thành phần của Class:

• Hằng.
• Biến khai báo.
• Constructor.
• Các override method và callback.
• Các method public.
• Các method private.
• Các class lồng nhau.
• Interface.

Nếu như class đang dung extend activity hay fragment, các hàm override phải để theo đúng thứ tự vòng đời của activity/fragment, ví dụ:

public class MainActivity extends Activity {

    @Override
    public void onCreate() {}

    @Override
    public void onResume() {}

    @Override
    public void onPause() {}

    @Override
    public void onDestroy() {}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Các đặc điểm riêng cho project:

Static constant viết bằng chữ hoa, cách nhau giữa các chữ bằng dấu gạch dưới (_).

Quy ước đặt tên biến cho các widget component:

• Các prefix lấy từ loại của component, ví dụ button là btn, textview là tv…
• Liền sau là tên tiếng Anh mang hàm ý tác dụng của component đó: Ví dụ radio box chọn giới tính sẽ là rbGender.

Các component có trạng thái (normal, pressed, focused, disabled, selected) sẽ được ghi ở cuối và trước đấu _ (underscore). Ví dụ: btnRegister_disabled.

Ghi log: Tất cả các hàm, khối, phương thức phức tạp, dễ phát sinh lỗi đều phải ghi lại log. Lấy class name làm 1 tag static final ở đầu:

private static final String TAG = myClass.class.getName();

Quy định sắp xếp parameter trong method:

• Context (nếu có) phải đặt lên đầu tiên.
• Callback phải đặt cuối cùng.

Ví dụ:

public void loadUserAsync(Context context, int userId, UserCallback callback);
1

Quy định về code XML:

Bảng màu:

• Chỉ sử dụng bảng màu thuộc material design:

https://www.google.com/design/spec/style/color.html

• Ba bảng màu chính là Amber, Orange, Deep Orange.
• Mã màu primary: #ffa726
• Mã màu primary đậm: #ff9800

Với XML: Các element không có nội dung phải dùng thẻ tự đóng. Ví dụ:

<TextView
    android:id="@+id/text_view_profile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
1
2
3
4
5

Đặt id: Tất cả id đều viết thường, cách nhau bởi dấu gạch dưới _ .

Đặt tên Theme: Viết liền, chữ đầu tiên viết hoa (AppCompatTheme).

Sắp xếp thuộc tính theo thứ tự sau:

• View id.
• Style.
• Layout height và layout width.
• Các thuộc tính khác, viết theo thứ tự alphabet.

Kết luận

Qua bài này chúng ta đã nắm được Material Design là gì. Một số đặc tính sơ bộ của nó, và tiêu chuẩn code “đẹp” trong Android.

Bài sau chúng ta sẽ tìm hiểu về một loại View đặc biệt trong Android. View này có thể chứa nhiều phần tử View khác: LISTVIEW & CUSTOM ADAPTER

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Material Design và Coding Convention dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK