Mở đầu
Trên Android 3.6, View Binding cung cấp cho bạn khả năng thay thế findViewById bằng các đối tượng ràng buộc được tạo ra để đơn giản hóa code, loại bỏ lỗi và tránh tất cả các boilerplate của findViewById.
TL;DR
- Kích hoạt view binding trong
build.gradle(không phụ thuộc vào các thư viện được implement) - View binding tạo ra các đối tượng liên kết cho mọi layout trong module của bạn (
activity_awesome.xml→ActivityAwesomeBinding.java) - Đối tượng binding chứa một thuộc tính cho mọi chế độ xem với một
idtronglayout– với chính xác từng kiểu và không bịnull. - Hỗ trợ đầy đủ cho cả Java và Kotlin.
Update build.gradle để kích hoạt view binding
Bạn không cần thêm bất kỳ thư viện bổ sung nào để cho phép view binding. Nó được tích hợp trong Android Gradle Plugin bắt đầu với các phiên bản từ Android Studio 3.6. Để bật view binding, hãy định cấu hình viewBinding trong build.gradle ở cấp module của bạn.
1 2 3 4 5 6 7 | <span class="token comment">// Available in Android Gradle Plugin 3.6.0</span> android <span class="token punctuation">{</span> viewBinding <span class="token punctuation">{</span> enabled <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Trong Android Studio 4.0, viewBinding đã được di chuyển vào buildFeatures và bạn có thể sử dụng:
1 2 3 4 5 6 7 | <span class="token comment">// Android Studio 4.0</span> android <span class="token punctuation">{</span> buildFeatures <span class="token punctuation">{</span> viewBinding <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Khi được kích hoạt trong một dự án, view binding sẽ tạo ra một lớp liên kết cho tất cả các layout của bạn một cách tự động. Bạn không cần phải thực hiện các thay đổi đối với các file xml của mình – nó sẽ tự hoạt động với các layout hiện có của bạn.
View binding hoạt động với XML hiện tại của bạn và sẽ tạo một đối tượng binding cho mỗi layout trong một module
Sử dụng view binding trong một Activity
Nếu bạn có một layout được gọi là activity_awesome.xml, chứa một Button và hai TextView, view binding sẽ tạo ra một lớp nhỏ gọi là ActivityAwesomeBinding có chứa một thuộc tính cho mọi view có ID trong layout.
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Using view binding in an Activity</span> override fun <span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">:</span> Bundle<span class="token operator">?</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> super<span class="token punctuation">.</span><span class="token function">onCreate</span><span class="token punctuation">(</span>savedInstanceState<span class="token punctuation">)</span> val binding <span class="token operator">=</span> ActivityAwesomeBinding<span class="token punctuation">.</span><span class="token function">inflate</span><span class="token punctuation">(</span>layoutInflater<span class="token punctuation">)</span> binding<span class="token punctuation">.</span>title<span class="token punctuation">.</span>text <span class="token operator">=</span> <span class="token double-quoted-string string">"Hello"</span> binding<span class="token punctuation">.</span>subtext<span class="token punctuation">.</span>text <span class="token operator">=</span> <span class="token double-quoted-string string">"Concise, safe code"</span> binding<span class="token punctuation">.</span>button<span class="token punctuation">.</span>setOnClickListener <span class="token punctuation">{</span> <span class="token comment">/* ... */</span> <span class="token punctuation">}</span> <span class="token function">setContentView</span><span class="token punctuation">(</span>binding<span class="token punctuation">.</span>root<span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Bạn không cần phải gọi findViewById khi sử dụng view binding – thay vào đó chỉ sử dụng các thuộc tính được cung cấp để tham chiếu đến bất kì view nào trong layout với id của view.
Sử dung view binding an toàn
findViewById là nguồn gốc của nhiều bug xảy ra trong Android. Nó có thể liên kết đến một id mà không có trong layout tham chiếu của bạn – tạo ra null và lỗi crash. View binding thay thế findViewById một cách ngắn gọn và an toàn hơn.
Và vì các lớp binding được tạo là các lớp Java thông thường với các chú thích thân thiện với Kotlin, nên bạn có thể sử dụng view binding trên cả ngôn ngữ lập trình Java và Kotlin.
Nó tạo ra những đoạn code gì?
View Binding tạo ra một class Java thay thế nhu cầu về findViewById trong code của bạn. Nó sẽ tạo ra một đối tượng liên kết cho mọi bố cục XML trong module của bạn trong khi ánh xạ các tên để activity_awesome.xml ánh xạ sang ActivityAwesomeBinding.java.
Khi chỉnh sửa bố cục XML trong Android Studio, việc tạo code sẽ được tối ưu hóa để chỉ cập nhật đối tượng liên kết liên quan đến tệp XML đó và nó sẽ làm như vậy trong bộ nhớ để giúp mọi việc nhanh chóng. Điều này có nghĩa là các thay đổi đối tượng ràng buộc có sẵn ngay lập tức trong trình chỉnh sửa và bạn không cần phải rebuild lại project.
Hãy xem thử view binding đã generate những gì thông qua ví dụ nhỏ dưới đây:
activity_awesome.xml
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 | <span class="token php language-php"><span class="token delimiter important"><?</span>xml version<span class="token operator">=</span><span class="token double-quoted-string string">"1.0"</span> encoding<span class="token operator">=</span><span class="token double-quoted-string string">"utf-8"</span><span class="token delimiter important">?></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>androidx.constraintlayout.widget.ConstraintLayout</span> <span class="token attr-name"><span class="token namespace">xmlns:</span>android</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res/android<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>app</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/apk/res-auto<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>tools</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://schemas.android.com/tools<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>match_parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">tools:</span>context</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.AwesomeActivity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Button</span> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/button<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_marginEnd</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>16dp<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_marginBottom</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>16dp<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Button<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintBottom_toBottomOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintEnd_toEndOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TextView</span> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/title<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>textAppearance</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@style/TextAppearance.AppCompat.Display4<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">Style</span></span><span class="token punctuation">="</span><span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintEnd_toEndOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintStart_toStartOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintTop_toTopOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">tools:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Awesome Title<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TextView</span> <span class="token attr-name"><span class="token namespace">android:</span>id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/subtext<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>wrap_content<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>layout_marginTop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>63dp<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span>text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>TextView<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintEnd_toEndOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintHorizontal_bias</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1.0<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintStart_toStartOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>parent<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">app:</span>layout_constraintTop_toBottomOf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>@+id/title<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>androidx.constraintlayout.widget.ConstraintLayout</span><span class="token punctuation">></span></span> |
Và đây là đoạn code được view binding generate ra từ file XML trên:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">public</span> <span class="token keyword">final</span> <span class="token keyword">class</span> <span class="token class-name">ActivityAwesomeBinding</span> <span class="token keyword">implements</span> <span class="token class-name">ViewBinding</span> <span class="token punctuation">{</span> @NonNull <span class="token keyword">private</span> <span class="token keyword">final</span> ConstraintLayout rootView<span class="token punctuation">;</span> @NonNull <span class="token keyword">public</span> <span class="token keyword">final</span> Button button<span class="token punctuation">;</span> @NonNull <span class="token keyword">public</span> <span class="token keyword">final</span> TextView subtext<span class="token punctuation">;</span> @NonNull <span class="token keyword">public</span> <span class="token keyword">final</span> TextView title<span class="token punctuation">;</span> |
View binding sẽ tạo một thuộc tính được nhập chính xác cho mỗi view với một id được chỉ định. Nó cũng sẽ tạo ra một thuộc tính được gọi là rootView mà có thể sử dụng thông qua một hàm gọi getRoot. View binding không thực hiện bất kỳ logic nào. Nó chỉ hiển thị các viewcủa bạn trong một đối tượng liên kết để bạn có thể kết nối chúng mà không có các cuộc gọi dễ bị lỗi tới findViewById. Điều này giữ cho tệp được tạo đơn giản (và tránh làm chậm quá trình build project).
Nếu bạn sử dụng Kotlin, lớp này được tối ưu hóa cho khả năng tương tác. Vì tất cả các thuộc tính được chú thích bằng @Nullable hoặc @NonNull, Kotlin biết cách hiển thị chúng dưới dạng không an toàn. Để tìm hiểu thêm về sự giao thoa giữa các ngôn ngữ, hãy xem tài liệu để gọi Java từ Kotlin.
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">private</span> <span class="token function">ActivityAwesomeBinding</span><span class="token punctuation">(</span>@NonNull ConstraintLayout rootView<span class="token punctuation">,</span> @NonNull Button button<span class="token punctuation">,</span> @NonNull TextView subtext<span class="token punctuation">,</span> @NonNull TextView title<span class="token punctuation">)</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> @NonNull <span class="token keyword">public</span> <span class="token keyword">static</span> ActivityAwesomeBinding <span class="token function">inflate</span><span class="token punctuation">(</span>@NonNull LayoutInflater inflater<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* Edited: removed call to overload inflate(inflater, parent, attachToParent) */</span> View root <span class="token operator">=</span> inflater<span class="token punctuation">.</span><span class="token function">inflate</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>layout<span class="token punctuation">.</span>activity_awesome<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">bind</span><span class="token punctuation">(</span>root<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Trong ActivityAwesomeBinding.java, view binding tạo ra một phương thức inflate công khai. Phiên bản một đối số chuyển null thành dạng xem parent và không đính kèm với parent. View binding cũng hiển thị một phiên bản ba đối số của inflate cho phép bạn truyền các tham số parent và attachToParent khi cần.
Gọi bind là nơi phép màu xảy ra. Nó sẽ inflate layout và liên kết tất cả các thuộc tính, với một số kiểm tra lỗi được thêm vào để tạo thông báo lỗi có thể đọc được.
1 2 3 4 5 6 7 8 9 10 11 12 | @NonNull <span class="token keyword">public</span> <span class="token keyword">static</span> ActivityAwesomeBinding <span class="token function">bind</span><span class="token punctuation">(</span>@NonNull View rootView<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">/* Edit: Simplified code – the real generated code is an optimized version */</span> Button button <span class="token operator">=</span> rootView<span class="token punctuation">.</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>button<span class="token punctuation">)</span><span class="token punctuation">;</span> TextView subtext <span class="token operator">=</span> rootView<span class="token punctuation">.</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>subtext<span class="token punctuation">)</span><span class="token punctuation">;</span> TextView title <span class="token operator">=</span> rootView<span class="token punctuation">.</span><span class="token function">findViewById</span><span class="token punctuation">(</span>R<span class="token punctuation">.</span>id<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>button <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">&&</span> subtext <span class="token operator">!=</span> <span class="token keyword">null</span> <span class="token operator">&&</span> title <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">ActivityAwesomeBinding</span><span class="token punctuation">(</span><span class="token punctuation">(</span>ConstraintLayout<span class="token punctuation">)</span> rootView<span class="token punctuation">,</span> button<span class="token punctuation">,</span> subtext<span class="token punctuation">,</span> title<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">NullPointerException</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"Missing required view […]"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Sử dụng View binding hay ButterKnife
Một trong những câu hỏi phổ biến nhất được hỏi về view binding là “Tôi nên sử dụng view binding của Kotlin hay ButterKnife?”. Cả hai thư viện này đều được sử dụng thành công bởi nhiều ứng dụng và giải quyết cùng một vấn đề.
Đối với hầu hết các ứng dụng, chúng tôi khuyên bạn nên thử view binding thay vì các thư viện này vì view binding cung cấp tra cứu chế độ xem ngắn gọn, an toàn hơn.
