Giới thiệu
Trong Google IO ’19, Google đã ra mắt Jetpack Compose để tạo UI khai báo. Về cơ bản, UI khai báo có nghĩa là tạo UI bằng cách chỉ định một tập hợp các thành phần UI cụ thể mà chúng ta cần và để cấu trúc nó theo một cách nào đó.
Vì vậy, hãy thảo luận từng cái một về cách chúng ta có thể sử dụng jetpack compose.
Nguồn: https://blog.mindorks.com/using-jetpack-compose-to-build-ui-in-android
Bước 01. Cài đặt
thêm google () vào tệp build.gradle của dự án
1 2 3 4 5 6 7 | allprojects <span class="token punctuation">{</span> repositories <span class="token punctuation">{</span> <span class="token function">google</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">jcenter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bước 02. App’s Gradle
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | android <span class="token punctuation">{</span> defaultConfig <span class="token punctuation">{</span> <span class="token operator">..</span><span class="token punctuation">.</span> minSdkVersion <span class="token number">21</span> <span class="token punctuation">}</span> buildFeatures <span class="token punctuation">{</span> <span class="token comment">// Enables Jetpack Compose for this module</span> compose <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token operator">..</span><span class="token punctuation">.</span> <span class="token comment">// Set both the Java and Kotlin compilers to target Java 8.</span> compileOptions <span class="token punctuation">{</span> sourceCompatibility JavaVersion<span class="token punctuation">.</span>VERSION_1_8 targetCompatibility JavaVersion<span class="token punctuation">.</span>VERSION_1_8 <span class="token punctuation">}</span> kotlinOptions <span class="token punctuation">{</span> jvmTarget <span class="token operator">=</span> <span class="token string">"1.8"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bước 03. Project’s gradle file
1 2 3 4 | dependencies <span class="token punctuation">{</span> classpath <span class="token string">'com.android.tools.build:gradle:4.0.0-alpha01'</span> classpath <span class="token string">"org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.60-eap-25"</span><span class="token punctuation">}</span> |
Bước 04. Cuối cùng, thêm Project dependency
1 2 3 4 5 6 7 8 9 | implementation <span class="token string">"androidx.compose:compose-runtime:0.1.0-dev02"</span> implementation <span class="token string">"androidx.ui:ui-core:0.1.0-dev02"</span> implementation <span class="token string">"androidx.ui:ui-layout:0.1.0-dev02"</span> implementation <span class="token string">"androidx.ui:ui-framework:0.1.0-dev02"</span> implementation <span class="token string">"androidx.ui:ui-material:0.1.0-dev02"</span> implementation <span class="token string">"androidx.ui:ui-foundation:0.1.0-dev02"</span> implementation <span class="token string">"androidx.ui:ui-text:0.1.0-dev02"</span> implementation <span class="token string">"androidx.ui:ui-tooling:0.1.0-dev02"</span> |
Bây giờ, chúng ta đã hoàn tất việc thiết lập project. Hãy xây dựng UI. Bây giờ, chúng ta sử dụng setContentView để tăng bố cục từ một tệp XML. Nhưng trong hướng dẫn này, chúng ta sẽ sử dụng Jetpack compose để thiết kế tệp bố cục.
Bước 05. Trong Activity File
1 2 3 4 5 6 7 | <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 comment">//your design </span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bây giờ, chúng ta đặt design trong setContent. Ở đây chúng tôi gọi sử dụng composable functions. Hãy bắt đầu với Hello World.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">class</span> MainActivity <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">Text</span><span class="token punctuation">(</span><span class="token string">"Hello world!"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bước 06. Hãy thảo luận về cách tạo một composable function.
để tạo một composable function, chúng ta cần sử dụng chú thích @Composable.
1 2 3 4 5 | <span class="token annotation builtin">@Composable</span> <span class="token keyword">fun</span> <span class="token function">helloWorld</span><span class="token punctuation">(</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> <span class="token string">"Hello World"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
và gọi helloWorld () trong setContent {}
- Các Composable function chỉ có thể được gọi từ một Composable function khác.
Bước 07. Hãy xác định một container.
Ở đây nếu chúng ta cần có một hành vi trong linearLayout với định hướng ở chế độ dọc. Ở đây, chúng tôi sử dụng Container,
1 2 3 4 | Column <span class="token punctuation">{</span> <span class="token comment">//the inside widgets</span> <span class="token punctuation">}</span> |
Điều này sẽ xếp các phần tử trong bố trí tuyến tính theo thứ tự dọc. Trong phần này, hãy thảo luận với một ví dụ về các button,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Column <span class="token punctuation">{</span> <span class="token function">Button</span><span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"This is Button 1"</span><span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">//the click listeners</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> style <span class="token operator">=</span> <span class="token function">ContainedButtonStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token function">HeightSpacer</span><span class="token punctuation">(</span><span class="token number">32</span><span class="token punctuation">.</span>dp<span class="token punctuation">)</span> <span class="token function">Button</span><span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"This is Button 2"</span><span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">//the click listeners</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> style <span class="token operator">=</span> <span class="token function">OutlinedButtonStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Ở đây, chúng ta thiết kế hai loại nút khác nhau
- ContainedButtonStyle () – điều này sẽ xây dựng một nút với đầy màu sắc trong nút thiết kế vật liệu.
- OutlinesButtonStyle () – cái này sẽ chỉ có một nút phác thảo với màu trắng được lấp đầy
Kết quả
- chúng ta cũng có thể có TextButtonStyle () nơi chúng ta chỉ có văn bản trong nút.
Nếu chúng ta muốn thiết kế nguyên tắc thiết kế Vật liệu trong Android, chúng ta có thể sử dụng MaterialTheme ()
1 2 3 4 5 6 | MaterialTheme <span class="token punctuation">{</span> <span class="token comment">// Widgets 1</span> <span class="token comment">// Widgets 2</span> <span class="token comment">// Widgets 3</span> <span class="token punctuation">}</span> |
Bước 08. Hãy thảo luận về cách tạo danh sách bằng Jetpack Compose
1 2 3 4 5 6 7 | <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">createListView</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Ở đây, createListView là một composable function. Và trong đó, chúng tôi xác định các list items.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token annotation builtin">@Composable</span> <span class="token keyword">private</span> <span class="token keyword">fun</span> <span class="token function">createListView</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> MaterialTheme <span class="token punctuation">{</span> VerticalScroller <span class="token punctuation">{</span> Column <span class="token punctuation">{</span> <span class="token punctuation">(</span><span class="token number">0</span><span class="token operator">..</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEachIndexed</span> <span class="token punctuation">{</span> index<span class="token punctuation">,</span> _ <span class="token operator">-></span> <span class="token function">createListItem</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token function">Divider</span><span class="token punctuation">(</span>color <span class="token operator">=</span> Color<span class="token punctuation">.</span>Blue<span class="token punctuation">,</span> height <span class="token operator">=</span> <span class="token number">1</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 punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bây giờ, trong này, hãy thảo luận từng cái một.
- MaterialTheme – điều này sẽ xác định theme của view lấy từ material container
- VerticalScroller – Cơ bản, điều này giúp cuộn các list items
- Column – Nó tạo một cột để tạo và xếp chồng tất cả các mục trong listview theo chiều dọc. Trong đó, chúng tôi tạo 10item bằng cách sử dụng forEachIndexed và chúng tôi gọi hàm createListItem(index) là composable function để tạo các list items một cách cụ thể.
Bây giờ, createdListItem trông giống như
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token annotation builtin">@Composable</span> <span class="token keyword">private</span> <span class="token keyword">fun</span> <span class="token function">createListItem</span><span class="token punctuation">(</span>itemIndex<span class="token operator">:</span> Int<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Padding</span><span class="token punctuation">(</span>left <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">.</span>dp<span class="token punctuation">,</span> right <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">.</span>dp<span class="token punctuation">,</span> top <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">.</span>dp<span class="token punctuation">,</span> bottom <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">.</span>dp<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">FlexRow</span><span class="token punctuation">(</span>crossAxisAlignment <span class="token operator">=</span> CrossAxisAlignment<span class="token punctuation">.</span>Center<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">expanded</span><span class="token punctuation">(</span><span class="token number">1.0f</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Text</span><span class="token punctuation">(</span><span class="token string">"Item <span class="token interpolation variable">$itemIndex</span>"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> inflexible <span class="token punctuation">{</span> <span class="token function">Button</span><span class="token punctuation">(</span> <span class="token string">"Button <span class="token interpolation variable">$itemIndex</span>"</span><span class="token punctuation">,</span> style <span class="token operator">=</span> <span class="token function">ContainedButtonStyle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> Toast<span class="token punctuation">.</span><span class="token function">makeText</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token label symbol">@MainActivity</span><span class="token punctuation">,</span> <span class="token string">"Item name <span class="token interpolation variable">$itemIndex</span>"</span><span class="token punctuation">,</span> Toast<span class="token punctuation">.</span>LENGTH_SHORT <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">show</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> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong phần này, chúng tôi thêm chỉ định phần đệm với đơn vị 8dp từ tất cả các phần cuối bằng cách sử dụng Padding và sau đó chúng tôi tạo FlexRow.
- FlexRow giống như một cột nhưng trong đó, nó xếp các phần tử theo hướng nằm ngang.
- crossAxisAlocation ở đây chỉ định sự liên kết của children.
- expanded giống như trọng lượng và trong đó chúng tôi tạo ra một Text.
- inflexible giống như wrap_content và trong đó chúng ta tạo một Button trong mỗi item có click listener.
Bây giờ, hãy chạy ứng dụng và xem bản xem trước
Chúng ta đã hoàn thành việc tạo một List trong Jetpack Compose.
Ngoài lề
để tạo Alert Dialog chúng tôi sử dụng,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <span class="token function">AlertDialog</span><span class="token punctuation">(</span> onCloseRequest <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">//closing request</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> title <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">"Title of Alert Box"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> text <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">"Message of Alert Box"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> confirmButton <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token function">Button</span><span class="token punctuation">(</span> text <span class="token operator">=</span> <span class="token string">"OK"</span><span class="token punctuation">,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">//click listeners request</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
Ở đây, onCloseRequest giống như setCancelable và phần còn lại giống như điền dữ liệu.
- Để thiết kế một floating action button, chúng ta sử dụng
1 2 3 4 5 6 7 8 | <span class="token function">FloatingActionButton</span><span class="token punctuation">(</span> icon <span class="token operator">=</span> <span class="token function">imageFromResource</span><span class="token punctuation">(</span>resources<span class="token punctuation">,</span> R<span class="token punctuation">.</span>drawable<span class="token punctuation">.</span>ic_add<span class="token punctuation">)</span><span class="token punctuation">,</span> color <span class="token operator">=</span> <span class="token comment">//color,</span> onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token comment">// TODO click action</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
- Để tạo một progress bar, chúng tôi sử dụng,
1 2 | <span class="token function">CircularProgressIndicator</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//a circular progress bar</span> |
và
1 2 | <span class="token function">LinearProgressIndicator</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//a horizontal progress bar</span> |
Để xem bản xem trước composable function, chúng ta thực hiện bằng cách sử dụng,
1 2 3 4 5 6 | <span class="token annotation builtin">@Preview</span> <span class="token annotation builtin">@Composable</span> <span class="token keyword">private</span> <span class="token keyword">fun</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> |
bạn có thể thấy chúng ta đang sử dụng Preview annotation để kiểm tra xem trước các composable functions.
Đây là cách chúng ta có thể làm việc với Jetpack Compose. Để đọc thêm về nó, hãy thử https://developer.android.com/jetpack/compose.