Day.17 學習XML 大師菁英班 - 增加分頁 2

15th鐵人賽

星星

團隊三個資安仔中出了一個間諜

2023-10-02 16:07:50

383 瀏覽

分享至

正文

新增分頁

這邊會用到一個叫做 Frament 的 API，目的有點類似 RWD，希望可以顯示在大螢幕的平板電腦等，但現在不論是大螢幕還是小螢幕都離不開 Frament，它提供了一個很好的分段功能，可以把畫面切分成好幾塊，然後進行分組，就可以做到模組化的管理！

接下來我們需要新增三個 Framents，對 app 資料夾點擊右鍵，滑鼠移到 Fragment 的分類，選擇 Fragment (Blank)
Fragment 取一個喜歡的名字，點擊 Finish
看到專案架構，會發現剛建立的 Framents 分別建立了三個程式檔在 java 資料夾中以及三個 XML 檔在 res/layout 資料夾中

接下來我們可以很快樂的直接對著三個 XML 檔做一些外觀的編輯，以下是我針對三個檔案的程式碼（可以把 text 參數要顯示的文字放到 values/strings.xml這個檔案）

strings.xml

<resources>
    <string name="app_name">Simple_timer</string>
    <!-- TODO: Remove or change this placeholder text -->
    <string name="Home_fragment">This is a Home page</string>
    <string name="About_fragment">This is a About page</string>
    <string name="Setting_fragment">This is a Setting page</string>
</resources>

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Home_fragment"
        android:textSize="30sp"
        android:layout_gravity="center"/>

</FrameLayout>

fragment_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SettingFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Setting_fragment"
        android:textSize="30sp"
        android:layout_gravity="center"/>

</FrameLayout>

fragment_about.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".AboutFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/About_fragment"
        android:textSize="30sp"
        android:layout_gravity="center"/>

</FrameLayout>

元件綁定

這邊要介紹一個酷東西叫做 View Binding，目的在於想要取代 findViewById，通過元件綁定可以更加輕鬆快速地做到畫面上的元件和程式碼連動

由於 Android Studio 預設 View Binding 為 false，所以我們第一步就是要去把它打開

看到 Gradle Scripts/build.gradle.kts(Module :app)
在 android 的大括號中加入以下程式碼：
```
buildFeatures{
    viewBinding = true
}
```
這個時候會發現上面出現了一排字，提醒說因為 Gradle 檔案被修改了，所以建議要把專案同步一下，直接點擊 Sync now 即可

回到 java/MainActivity，我們需要加入 binding 的程式碼，如下：

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }
}