Sử dụng ViewStub kết hợp ViewPager

Bài đăng này đã không được cập nhật trong 5 năm

1. Bài toán đặt ra

Nếu ai đã sử dụng qua Viewpager chắc mọi người cũng biết được rằng ViewPager có nhiệm vụ lưu lại state của các view bên trong nó mắc định là 1 view trước view invisible và 1 view sau view invisible. Nhưng bài toán ở đây chỉ phù hợp khi dữ liệu của bạn không quá lớn, khi khởi tạo Viewpager việc khởi tạo cùng lúc các view không tốn quá nhiều tài nguyên và thời gian thì việc đó vô cùng tiện lợi cho người dùng không cần phải load lại cho lần sau. Nhưng với những trang chứa dữ liệu lớn việc load nhiều view cùng 1 lúc lại khiến cho app trở nên đơ lag khó chịu.

Mọi người thử nghĩ 1 trang web với dữ liệu lớn như shopee mà chỉ sử dụng mỗi ViewPager để load dữ liệu của 5 tab lớn trong đó mỗi tab lại có thêm 3 tab con nữa. Nếu các tab cùng load một lúc khi người dùng vào app thì sẽ khiến cho app bị đơ một lúc rất lâu.

Vậy có thể chỉ phải load từng tab một khi tab được click hiển thị nhưng khi quay lại ta vẫn giữ state của tab đó không?

Điều đó hoàn toàn là có thể nay mình sẽ chia sẻ với mọi người một cách để giải quyết bài toán khá nan giải này. Đó là việc kết hợp giữa ViewStub và ViewPager.

2. Giới thiệu quá về ViewStub

ViewStub là một View invisible, có kích thước là ""zero-size" và khi nào cần thì 1 view nào đó sẽ được tạo. Khi ViewStub được set là "visible" hoặc khi phương thức inflate() được gọi đến thì một View nào đó mong muốn sẽ được inflated. ViewStub sẽ tự thay thế chính nó bởi View (hay các View) mà được inflated. Bởi vậy, ViewStub chỉ tồn tại trong hệ thống cho đến khi phương thức setVisibility(int) hoặc inflate() được gọi đến. View được add vào sẽ theo layout parameters của ViewStub đã được định nghĩa trước đó. Vậy nên, đây cũng là một cách có thể giúp cải thiện performance của ứng dụng - chỉ tạo khi cần thiết.

Định nghĩa một ViewStub:

<ViewStub android:id="@+id/stub"
          android:inflatedId="@+id/subTree"
          android:layout="@layout/mySubTree"
          android:layout_width="120dip"
          android:layout_height="40dip" />

Và sử dụng ViewStub

ViewStub stub = (ViewStub) findViewById(R.id.stub);
View inflated = stub.inflate();

Về sơ qua có thể nhiều bạn sẽ cảm thấy ViewStub sẽ giống với Include. Nhưng thực ra Include chỉ là việc chia bố cục code xml ra thành nhiều file khác nhau cho dễ nhìn và dễ thiết kế. Còn việc vẽ lên view thì vẫn như bình thường còn ViewStub lại khác nó không được thêm vào sẵn chỉ được tải lên khi bạn thực sự dùng nó được set là "visible" hoặc khi phương thức inflate() được gọi đến.

Đây là một tối ưu hóa tốt vì bạn có thể có bố cục phức tạp với hàng tấn chế độ xem nhỏ, chế độ xem phức tạp hoặc tiêu đề ở bất cứ đâu và vẫn có hoạt động của bạn tải lên rất nhanh.

2.1 Các phương thức quan trọng của ViewStub:

getInflatedId (): Phương thức này được sử dụng để lấy id của ViewStub
setLayoutResource (int layoutResource): Phương thức này được sử dụng để đặt bố cục ghi lên khi StubbedView
getLayoutResource (): Phương thức này được sử dụng để lấy bố cục sẽ được sử dụng bởi setsetVisibility (int) hoặc Inflate () để thay thế StubbedView này trong cha mẹ của nó bằng một khung nhìn khác
inflate(): Phương thức này được sử dụng để hiển thị bố cục được xác định bởi getLayoutResource() và thay thế StubbedView này trong cha mẹ của nó bằng tài nguyên bố cục được chỉ định
setVisibility (int visual ): Phương thức này được sử dụng để hiển thị StubView. Khi khả năng hiển thị được đặt thành VISIBLE hoặc INVISIBLE
setOnInflateListener (OnInflateListenerinflateListener): Phương thức này được sử dụng để lắng nghe sự kiện khi chúng ta thêm vào ViewStub

2.2 Attributes của ViewStub:

id: Thuộc tính này được sử dụng để xác định duy nhất một ViewStub.
inflatedId: Thuộc tính này được sử dụng để đặt id của view được thêm vào.
layout: Thuộc tính này được sử dụng để cung cấp một mã định danh cho bố cục sẽ được hiển thị khi ViewStub hiển thị hoặc khi buộc phải làm như vậy

3. Sử dụng ViewStub kết hợp ViewPager

Bước 1: Xây dựng main chứa ViewPager

Bước 2: Xây dựng frament cần thêm vào ViewPager chứa ViewStub

fragment_viewstub.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
   <ProgressBar
           android:id="@+id/inflateProgressbar"
           android:foregroundGravity="center"
           android:layout_gravity="center"
           android:indeterminate="true"
           android:layout_width="48dp"
           android:layout_height="48dp"/>
   <ViewStub
           android:id="@+id/fragmentViewStub"
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>
</FrameLayout>

Bước 3: Xử lý logic hiển thị view khi view nhận biết được đang hiển thị thông quá userVisibleHint

BaseViewStubFragment.class

abstract class BaseViewStubFragment : Fragment() {
   private var mSavedInstanceState: Bundle? = null
   private var hasInflated = false
   private var mViewStub: ViewStub? = null

   override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
       val view = inflater.inflate(R.layout.fragment_viewstub, container, false)
       mViewStub = view.findViewById(R.id.fragmentViewStub) as ViewStub
       mViewStub!!.layoutResource = getViewStubLayoutResource()
       mSavedInstanceState = savedInstanceState

       if (userVisibleHint && !hasInflated) {
           val inflatedView = mViewStub!!.inflate()
           onCreateViewAfterViewStubInflated(inflatedView, mSavedInstanceState)
           afterViewStubInflated(view)
       }

       return view
   }

   protected abstract fun onCreateViewAfterViewStubInflated(inflatedView: View, savedInstanceState: Bundle?)

   /**
    * The layout ID associated with this ViewStub
    * @see ViewStub.setLayoutResource
    * @return
    */
   @LayoutRes
   protected abstract fun getViewStubLayoutResource(): Int

   /**
    *
    * @param originalViewContainerWithViewStub
    */
   @CallSuper
   protected fun afterViewStubInflated(originalViewContainerWithViewStub: View?) {
       hasInflated = true
       if (originalViewContainerWithViewStub != null) {
           val pb = originalViewContainerWithViewStub.findViewById<ProgressBar>(R.id.inflateProgressbar)
           pb.visibility = View.GONE
       }
   }

   override fun setUserVisibleHint(isVisibleToUser: Boolean) {
       super.setUserVisibleHint(isVisibleToUser)

       if (isVisibleToUser && mViewStub != null && !hasInflated) {
           val inflatedView = mViewStub!!.inflate()
           onCreateViewAfterViewStubInflated(inflatedView, mSavedInstanceState)
           afterViewStubInflated(view)
       }
   }

   override fun onDetach() {
       super.onDetach()
       hasInflated = false
   }
}

Bước 4: Và cuối cùng là setLayoutResuorce cho view cần hiển thị

HeavyFragment.class

class HeavyFragment : BaseViewStubFragment() {

   override fun onCreateViewAfterViewStubInflated(inflatedView: View, savedInstanceState: Bundle?) {
       val titleView = inflatedView.findViewById<TextView>(R.id.fragmentTitle)
       titleView.text = arguments!!["title"] as String
   }

   override fun getViewStubLayoutResource(): Int {
       return R.layout.fragment_heavy
   }
}

Kết quả