Hướng dẫn soạn Jetpack – Hướng dẫn từng bước (Phần 1)

Thứ Bảy, 21/11/2020

Tram Ho

Trong series này mình sẽ giới thiệu về Jetpack Compose, một bộ công cụ hiện đại để xây dựng giao diện cho các ứng dụng Android. Chúng ta sẽ học cách để sử dụng các component cơ bản như Text, TextField, Preview, Column, Row, Button, Card, AlertDialog, MaterialDesign, … Series học Jetpack Compose của mình sẽ chia thành 3 phần để các bạn không cảm thấy buồn ngủ và chán nản khi đọc một bài viết quá dài.

Lưu ý: Để sử dụng Jetpack Compose, bạn cần có phiên bản Canary mới nhất của Android Studio 4.2. Vì vậy, bạn có thể chuyển sang trang https://developer.android.com/studio/preview và tải xuống phiên bản Canary mới nhất, sau đó hãy tạo một Empty Compose Activity.

I. Composable Function

Trong Jetpack Compose, Composable Function được sử dụng để định nghĩa tất cả giao diện người dùng của ứng dụng. Vì vậy, bạn không cần sử dụng bất kỳ tệp XML nào, tất cả những gì bạn cần làm chỉ là tạo một composable function bằng cách sử dụng annotation Composable. Cú pháp cơ bản của hàm Composable là:

<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">AnyUiComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// Code for UI element</span>
<span class="token punctuation">}</span>

@Composable

fun AnyUiComponent() {

// Code for UI element

}

Bây giờ, bạn đã biết Composable Function là gì và cách tạo một hàm Composable. Mình sẽ chuyển sang ví dụ về Text.

II. Displaying a Simple Text

Trong phần này, chúng ta sẽ học cách hiển thị một đoạn text đơn giản bằng cách sử dụng Text Composable. Ví dụ:

<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">SimpleText</span><span class="token punctuation">(</span>displayText<span class="token operator">:</span> String<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">Text</span><span class="token punctuation">(</span>text <span class="token operator">=</span> displayText<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

@Composable

fun SimpleText(displayText: String) {

Text(text = displayText)

}

Chúng ta có thể thấy hàm SimpleText() là một Composable Function và bên trong hàm SimpleText() sử dụng Text truyền vào displayText. Bây giờ, bạn có thể gọi hàm SimpleText này từ khối setContent bên trong phương thức onCreate của Acivity.

<span class="token keyword">class</span> SimpleTextActivity <span class="token operator">:</span> <span class="token function">AppCompatActivity</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token operator">:</span> Bundle<span class="token operator">?</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">)</span>
        setContent <span class="token punctuation">{</span>
            <span class="token function">Column</span><span class="token punctuation">(</span>
                modifier <span class="token operator">=</span> Modifier<span class="token punctuation">.</span><span class="token function">fillMaxSize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                verticalArrangement <span class="token operator">=</span> Arrangement<span class="token punctuation">.</span>Center<span class="token punctuation">,</span>
                horizontalAlignment <span class="token operator">=</span> Alignment<span class="token punctuation">.</span>CenterHorizontally<span class="token punctuation">,</span>
            <span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">SimpleText</span><span class="token punctuation">(</span><span class="token function">getString</span><span class="token punctuation">(</span><span class="token string">"I am learning Compose"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

class SimpleTextActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

Column(

modifier = Modifier.fillMaxSize(),

verticalArrangement = Arrangement.Center,

horizontalAlignment = Alignment.CenterHorizontally,

) {

SimpleText(getString("I am learning Compose"))

}

Ở đây, mình đang sử dụng thuộc tính Column để hiển thị một số nội dung theo chiều dọc và bên trong Column mình đang gọi hàm SimpleText.

III. Applying Styles to a Text

Chúng ta có thể áp dụng nhiều style khác nhau cho một đoạn text như tăng cỡ chữ, thay đổi màu, … Cùng theo dõi hàm SetTextStyling của mình bên dưới đây nhé:

<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">SetTextStyling</span><span class="token punctuation">(</span>displayText<span class="token operator">:</span> String<span class="token punctuation">,</span> style<span class="token operator">:</span> TextStyle<span class="token operator">?</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">,</span> maxLines<span class="token operator">:</span> Int<span class="token operator">?</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">Text</span><span class="token punctuation">(</span>
        text <span class="token operator">=</span> displayText<span class="token punctuation">,</span>
        modifier <span class="token operator">=</span> Modifier<span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">.</span>dp<span class="token punctuation">)</span><span class="token punctuation">,</span>
        style <span class="token operator">=</span> style <span class="token operator">?:</span> TextStyle<span class="token punctuation">.</span>Default<span class="token punctuation">,</span>
        overflow <span class="token operator">=</span> TextOverflow<span class="token punctuation">.</span>Ellipsis<span class="token punctuation">,</span>
        maxLines <span class="token operator">=</span> maxLines <span class="token operator">?:</span> Int<span class="token punctuation">.</span>MAX_VALUE
    <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

@Composable

fun SetTextStyling(displayText: String, style: TextStyle? = null, maxLines: Int? = null) {

Text(

text = displayText,

style = style ?: TextStyle.Default,

overflow = TextOverflow.Ellipsis,

maxLines = maxLines ?: Int.MAX_VALUE

)

}

Mình sẽ giải thích các tham số được sử dụng trong hàm trên:

displayText: Đoạn text mà bạn muốn hiển thị
style: Style áp dụng cho đoạn text
maxLines: Quy định số dòng tối đa mà đoạn text có thế hiển thị. Nếu đoạn text được set chiếm số dòng trên màn hình nhiều hơn số dòng chúng ta quy định trong maxLine thì dấu (…) sẽ được hiển thị.

Để thiết đặt size text chúng ta viết như sau:

style <span class="token operator">=</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>
    fontSize <span class="token operator">=</span> <span class="token number">24</span><span class="token punctuation">.</span>sp
<span class="token punctuation">)</span>

style = TextStyle(

fontSize = 24.sp

)

Nếu bạn muốn hiển thị chữ đậm:

style <span class="token operator">=</span> <span class="token function">TextStyle</span><span class="token punctuation">(</span>
    fontWeight <span class="token operator">=</span> FontWeight<span class="token punctuation">.</span>Bold
<span class="token punctuation">)</span>

style = TextStyle(

fontWeight = FontWeight.Bold

)

Tương tự, bạn có thể thay đổi textColor, font-family, underline text, …

IV. Taking inputs using TextField

Cũng giống như EditText, trong Compose chúng ta có thể sử dụng TextField và BaseTextField. BaseTextField vẫn đang trong giai đoạn thử nghiệm và có thể bị xóa hoặc thêm vĩnh viễn bất cứ lúc nào. Vì vậy, để sử dụng BaseTextField, bạn cần thêm annotation ExperimentalFoundationApi.

Sau đây là một ví dụ đơn giản về BaseTextField:

<span class="token annotation builtin">@ExperimentalFoundationApi</span>
<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">SimpleTextFieldComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">Surface</span><span class="token punctuation">(</span>color <span class="token operator">=</span> Color<span class="token punctuation">.</span>LightGray<span class="token punctuation">,</span> modifier <span class="token operator">=</span> Modifier<span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">.</span>dp<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> text <span class="token keyword">by</span> remember <span class="token punctuation">{</span> <span class="token function">mutableStateOf</span><span class="token punctuation">(</span><span class="token function">TextFieldValue</span><span class="token punctuation">(</span><span class="token string">"Enter text here"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
        <span class="token function">BaseTextField</span><span class="token punctuation">(</span>
            value <span class="token operator">=</span> text<span class="token punctuation">,</span>
            modifier <span class="token operator">=</span> Modifier<span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">.</span>dp<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fillMaxWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            onValueChange <span class="token operator">=</span> <span class="token punctuation">{</span>
                text <span class="token operator">=</span> it
            <span class="token punctuation">}</span>
        <span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

@ExperimentalFoundationApi

@Composable

fun SimpleTextFieldComponent() {

Surface(color = Color.LightGray, modifier = Modifier.padding(16.dp)) {

var text by remember { mutableStateOf(TextFieldValue("Enter text here")) }

BaseTextField(

value = text,

modifier = Modifier.padding(16.dp).fillMaxWidth(),

onValueChange = {

text = it

}

)

}

Trong hàm trên, mình khai báo BaseTextField bên trong Surface, sử dụng callback có tên là onValueChange. Callback sẽ được gọi khi có sự thay đổi về text mà người dùng nhập vào và đoạn text thay đổi sẽ được cập nhật giá trị bên trong callback.

Material Design cũng cung cấp một Composable cho EditText đó là TextField. Cách triển khai đơn giản của TextField như sau:

<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">SimpleMaterialTextFieldComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> text <span class="token keyword">by</span> savedInstanceState <span class="token punctuation">{</span> <span class="token string">""</span> <span class="token punctuation">}</span>
    <span class="token function">TextField</span><span class="token punctuation">(</span>
        value <span class="token operator">=</span> text<span class="token punctuation">,</span>
        modifier <span class="token operator">=</span> Modifier<span class="token punctuation">.</span><span class="token function">padding</span><span class="token punctuation">(</span><span class="token number">16</span><span class="token punctuation">.</span>dp<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fillMaxWidth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        onValueChange <span class="token operator">=</span> <span class="token punctuation">{</span> text <span class="token operator">=</span> it <span class="token punctuation">}</span><span class="token punctuation">,</span>
        label <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Label"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

@Composable

fun SimpleMaterialTextFieldComponent() {

var text by savedInstanceState { "" }

TextField(

value = text,

onValueChange = { text = it },

label = { Text("Label") }

)

}

TextField hoạt động tương tự như BaseTextField. Bên trong TextField có một thuộc tính khác đó là label, nó giống như chúng ta sử dụng EditText và sử dụng thuộc tính hint. Label được hiển thị bên trong TextField khi TextField không chứa bất kỳ ký tự nào.

Chúng ta có thể tùy chỉnh BaseTextField và TextField bằng cách truyền vào các tham số như ví dụ sau đây:

Chỉ hiển thị bàn phím số:

<span class="token keyword">var</span> text <span class="token keyword">by</span> remember <span class="token punctuation">{</span> <span class="token function">mutableStateOf</span><span class="token punctuation">(</span><span class="token function">TextFieldValue</span><span class="token punctuation">(</span><span class="token string">"0123"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
<span class="token function">BaseTextField</span><span class="token punctuation">(</span>value <span class="token operator">=</span> text<span class="token punctuation">,</span>
    keyboardType <span class="token operator">=</span> KeyboardType<span class="token punctuation">.</span>Number<span class="token punctuation">,</span>
    onValueChange <span class="token operator">=</span> <span class="token punctuation">{</span>
        text <span class="token operator">=</span> it
    <span class="token punctuation">}</span>
<span class="token punctuation">)</span>

var text by remember { mutableStateOf(TextFieldValue("0123")) }

BaseTextField(value = text,

keyboardType = KeyboardType.Number,

onValueChange = {

text = it

}

)

Nhập password:

keyboardType <span class="token operator">=</span> KeyboardType<span class="token punctuation">.</span>Password<span class="token punctuation">,</span>
visualTransformation <span class="token operator">=</span> <span class="token function">PasswordVisualTransformation</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

keyboardType = KeyboardType.Password,

visualTransformation = PasswordVisualTransformation()

Thêm placeholder cho TextField (placeholder là đoạn text hiển thị khi TextField empty và focused):

placeholder <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"MindOrks"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>

1 2	placeholder <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"MindOrks"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>

Khá là đơn giản phải không nào, ngoài ra chúng ta có thể thêm icons, hiển thị message lỗi bên trong TextFiled, chỉ định errorColor, backgroundColor, intractionState, activeColor, inactiveColor … Bạn có thể thử những thuộc tính này và tự mình xem thành quả bên trong Android Studio. Bạn có thể preview bất kỳ thuộc tính UI nào, hãy cùng xem cách làm thế nào nhé

V. Preview in Android Studio

Android Studio cung cấp những tính năng thật tuyệt vời để xem trước các thành phần UI mà không cần phải build lên app. Bất cứ khi nào bạn muốn kiểm tra một UI component nào đó chỉ cần tạo ra một Composable function và thêm annotation Preview.

<span class="token comment">// This is a Composable function to display a Text</span>
<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">SimpleText</span><span class="token punctuation">(</span>displayText<span class="token operator">:</span> String<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">Text</span><span class="token punctuation">(</span>text <span class="token operator">=</span> displayText<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token annotation builtin">@Preview</span>
<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">SimpleTextPreview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">SimpleText</span><span class="token punctuation">(</span><span class="token string">"Hi I am learning Compose"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

// This is a Composable function to display a Text

@Composable

Text(text = displayText)

}

@Preview

@Composable

fun SimpleTextPreview() {

SimpleText("Hi I am learning Compose")

}

Giờ thì bạn có thể xem trước kết quả giao diện của hàm SimpleText ở tab preview (nằm phía bên phải của Android Studio). Nếu bạn click vào bất cứ thành phần UI nào trên preview, Android Studio sẽ đưa bạn đến vị trí dòng code mà thành phần UI đó được tạo ra. Ngoài ra, bạn có thể đặt tên cho bản xem trước bằng cách sử dụng tham số name.

<span class="token annotation builtin">@Preview</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"Named Preview"</span><span class="token punctuation">)</span>

1 2	<span class="token annotation builtin">@Preview</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">"Named Preview"</span><span class="token punctuation">)</span>

Mặc định tên của Preview sẽ là tên của hàm, dưới đây là giới thiệu về tính năng preview bên trong Android Studio:

Lưu ý: Bạn không thể truyền tham số cho hàm Preview Composable

VI. Preview Parameter

Trong phần trước, mình đã giới thiệu cách sử dụng tính năng xem trước của Android Studio. Bây giờ, khi muốn tạo ra một ứng dụng Android, thông thường sẽ là app nhận dữ liệu từ server trả về rồi hiển thị dữ liệu đó lên màn hình. Một câu hỏi được đặt ra đó là làm thế nào chúng ta xem trước được khi có dữ liệu trả về UI của chúng ta sẽ hiển thị thế nào ? Trong trường hợp này, chúng ta sẽ sử dụng PreviewParameter annotation.

Ý tưởng chính ở đây chính là tạo dữ liệu dummy rồi truyền dữ liệu đó vào Preview Composable Function. Ở phần trước trong mục lưu ý mình có nói là Bạn không thể truyền tham số cho hàm Preview Composable, vì vậy để truyền được tham số thì bạn cần PreviewParameter annotation.

Hãy cùng mình tạo dữ liệu dummy nhé. Mình tạo một data class đặt tên là Blog có hai thuộc tính là name và author:

<span class="token keyword">data</span> <span class="token keyword">class</span> <span class="token function">Blog</span><span class="token punctuation">(</span>
    <span class="token keyword">val</span> name<span class="token operator">:</span> String<span class="token punctuation">,</span>
    <span class="token keyword">val</span> author<span class="token operator">:</span> String
<span class="token punctuation">)</span>

data class Blog(

val name: String,

val author: String

)

Sau đó mình tạo một class đặt tên là DummyBlogProvider:

<span class="token keyword">class</span> DummyBlogProvider <span class="token operator">:</span> PreviewParameterProvider<span class="token operator">&lt;</span>Blog<span class="token operator">&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">override</span> <span class="token keyword">val</span> values <span class="token operator">=</span>
        <span class="token function">sequenceOf</span><span class="token punctuation">(</span><span class="token function">Blog</span><span class="token punctuation">(</span><span class="token string">"Learning Compose"</span><span class="token punctuation">,</span> <span class="token string">"MindOrks"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">Blog</span><span class="token punctuation">(</span><span class="token string">"Learning Android"</span><span class="token punctuation">,</span> <span class="token string">"MindOrks"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token keyword">override</span> <span class="token keyword">val</span> count<span class="token operator">:</span> Int <span class="token operator">=</span> values<span class="token punctuation">.</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

class DummyBlogProvider : PreviewParameterProvider<Blog> {

override val values =

sequenceOf(Blog("Learning Compose", "MindOrks"), Blog("Learning Android", "MindOrks"))

override val count: Int = values.count()

}

Tạo xong dữ liệu rồi chúng ta có thể dùng dữ liệu này trong phần xem trước:

<span class="token annotation builtin">@Preview</span>
<span class="token annotation builtin">@Composable</span>
<span class="token keyword">fun</span> <span class="token function">BlogInfo</span><span class="token punctuation">(</span><span class="token annotation builtin">@PreviewParameter</span><span class="token punctuation">(</span>DummyBlogProvider<span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span> blog<span class="token operator">:</span> Blog<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">SimpleTextComponent</span><span class="token punctuation">(</span><span class="token string">"<span class="token interpolation"><span class="token delimiter variable">${</span>blog<span class="token punctuation">.</span>name<span class="token delimiter variable">}</span></span> by <span class="token interpolation"><span class="token delimiter variable">${</span>blog<span class="token punctuation">.</span>author<span class="token delimiter variable">}</span></span>"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

@Preview

@Composable

fun BlogInfo(@PreviewParameter(DummyBlogProvider::class) blog: Blog) {

SimpleTextComponent("${blog.name} by ${blog.author}")

}

Phần 1 cũng khá là dài rồi, ở phần 2 mình sẽ giới thiệu Column, Box, Button, Card, Clickable, Image và phần 3 sẽ là Material + Animation. Các bạn hãy đón đọc các phần tiếp theo nhé

VII. Tài liệu tham khảo

Project tìm hiểu Jetpack Compose trong Android bằng ví dụ: https://github.com/MindorksOpenSource/Jetpack-Compose-Android-Examples
https://blog.mindorks.com/jetpack-compose-tutorial

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Hướng dẫn soạn Jetpack – Hướng dẫn từng bước (Phần 1)

I. Composable Function

II. Displaying a Simple Text

III. Applying Styles to a Text

IV. Taking inputs using TextField

V. Preview in Android Studio

VI. Preview Parameter

VII. Tài liệu tham khảo

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript