ใช้คอมโพเนนต์ที่รู้เวอร์ชัน

ในตอนนี้คุณมีการติดตั้งใช้งาน TabHelper และ CompatTab อยู่ 2 รูปแบบ โดยแบ่งเป็น 2 แบบสำหรับ Android 3.0 เป็นต้นไป และอีกแบบหนึ่งสำหรับแพลตฟอร์มเวอร์ชันเก่า ก็ถึงเวลาดำเนินการอย่างใดอย่างหนึ่งกับการติดตั้งใช้งานเหล่านี้ บทเรียนนี้จะกล่าวถึงการสร้างตรรกะสำหรับการสลับระหว่างการใช้งานเหล่านี้ การสร้างเลย์เอาต์ที่รองรับเวอร์ชันต่างๆ และสุดท้ายคือการใช้คอมโพเนนต์ UI ที่ใช้งานย้อนหลังได้

เพิ่มตรรกะการเปลี่ยน

คลาสนามธรรม TabHelper จะทําหน้าที่เป็นโรงงานสําหรับสร้างอินสแตนซ์ TabHelper และ CompatTab ที่เหมาะสมกับเวอร์ชัน โดยอิงตามเวอร์ชันแพลตฟอร์มของอุปกรณ์ปัจจุบัน

KotlinJava

sealed class TabHelper(protected val mActivity: FragmentActivity, protected val tag: String) {

    abstract fun setUp()

    abstract fun addTab(tab: CompatTab)

    // Usage is tabHelper.newTab("tag")
    fun newTab(tag: String): CompatTab =
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                CompatTabHoneycomb(mActivity, tag)
            } else {
                CompatTabEclair(mActivity, tag)
            }

    companion object {
        // Usage is TabHelper.createInstance(activity)
        fun createInstance(activity: FragmentActivity): TabHelper =
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
                    TabHelperHoneycomb(activity)
                } else {
                    TabHelperEclair(activity)
                }
    }
}

public abstract class TabHelper {
    ...
    // Usage is TabHelper.createInstance(activity)
    public static TabHelper createInstance(FragmentActivity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            return new TabHelperHoneycomb(activity);
        } else {
            return new TabHelperEclair(activity);
        }
    }

    // Usage is tabHelper.newTab("tag")
    public CompatTab newTab(String tag) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            return new CompatTabHoneycomb(mActivity, tag);
        } else {
            return new CompatTabEclair(mActivity, tag);
        }
    }
    ...
}

สร้างเลย์เอาต์กิจกรรมที่รองรับเวอร์ชัน

ขั้นตอนถัดไปคือระบุเลย์เอาต์สําหรับกิจกรรมที่รองรับการใช้งานแท็บ 2 แท็บ สำหรับการติดตั้งใช้งานเก่า (TabHelperEclair) คุณต้องตรวจสอบว่าเลย์เอาต์กิจกรรมมี TabWidget และ TabHost รวมถึงคอนเทนเนอร์สำหรับเนื้อหาแท็บ

res/layout/main.xml:

<!-- This layout is for API level 5-10 only. -->
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp">

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

    </LinearLayout>
</TabHost>

ในการใช้งาน TabHelperHoneycomb คุณจะต้องมี FrameLayout เพื่อใช้เก็บเนื้อหาแท็บ เนื่องจากตัวบ่งชี้แท็บมาจาก ActionBar:

res/layout-v11/main.xml:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabcontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

ระหว่างรันไทม์ Android จะตัดสินใจว่าจะเพิ่มเลย์เอาต์ main.xml เวอร์ชันใด โดยขึ้นอยู่กับเวอร์ชันของแพลตฟอร์ม นี่เป็นตรรกะเดียวกับที่แสดงในส่วนก่อนหน้าเพื่อพิจารณาว่าจะใช้การติดตั้งใช้งาน TabHelper ใด

ใช้ TabHelper ในกิจกรรม

ในเมธอด onCreate() ของกิจกรรม คุณสามารถรับออบเจ็กต์ TabHelper และเพิ่มแท็บด้วยโค้ดต่อไปนี้

KotlinJava

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    setContentView(R.layout.main)

    TabHelper.createInstance(this).apply {
        setUp()

        newTab("photos")
                .setText(R.string.tab_photos)
                .also { photosTab ->
                    addTab(photosTab)
                }

        newTab("videos")
                .setText(R.string.tab_videos)
                .also { videosTab ->
                    addTab(videosTab)
                }
    }
}

@Override
public void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.main);

    TabHelper tabHelper = TabHelper.createInstance(this);
    tabHelper.setUp();

    CompatTab photosTab = tabHelper
            .newTab("photos")
            .setText(R.string.tab_photos);
    tabHelper.addTab(photosTab);

    CompatTab videosTab = tabHelper
            .newTab("videos")
            .setText(R.string.tab_videos);
    tabHelper.addTab(videosTab);
}

เมื่อเรียกใช้แอปพลิเคชัน โค้ดนี้จะขยายเลย์เอาต์กิจกรรมที่ถูกต้องและสร้างอินสแตนซ์ออบเจ็กต์ TabHelperHoneycomb หรือ TabHelperEclair คลาสที่เป็นรูปธรรมที่ใช้จริงนั้นไม่ชัดเจนต่อกิจกรรม เนื่องจากมีอินเทอร์เฟซ TabHelper ร่วมกัน

ด้านล่างนี้คือภาพหน้าจอ 2 ภาพการติดตั้งใช้งานนี้ในอุปกรณ์ Android 2.3 และ Android 4.0

รูปที่ 1 ตัวอย่างภาพหน้าจอของแท็บที่เข้ากันได้แบบย้อนหลังซึ่งทำงานในอุปกรณ์ Android 2.3 (ใช้ TabHelperEclair) และอุปกรณ์ Android 4.0 (ใช้ TabHelperHoneycomb)