Android 中的填充概念


什麼是 Android 中的填充?

填充是在我們要顯示的內容與其邊框之間存在的空間。填充用於在內容內部建立額外的空間。

我們可以從任何特定的一側為小部件新增填充。我們可以根據需要從左、右、上或下新增填充。

在本文中,我們將瞭解如何在 Android 應用程式中為不同的視窗小部件使用填充屬性。

語法

android:padding="Size in dp"

說明 - 上述填充語法用於指定檢視四側的填充。

android:paddingStart="Size in dp"

android:paddingLeft="Size in dp"

說明 - 上述填充語法用於指定左側的填充。我們可以使用 paddingStart 或 paddingLeft 為檢視的左側新增填充。

android:paddingEnd="Size in dp"

android:paddingRight="Size in dp"

說明 - 上述填充語法用於指定右側的填充。我們可以使用 paddingEnd 或 paddingRight 為檢視的右側新增填充。

android:paddingTop="Size in dp"

說明 - 上述填充語法用於指定檢視頂部的填充。

android:paddingBottom="Size in dp"

說明 - 上述填充語法用於指定檢視底部的填充。

示例

我們將建立一個簡單的應用程式,在這個應用程式中,我們將簡單地顯示一個按鈕,並逐一從所有側面新增填充並進行測試。

步驟 1:在 Android Studio 中建立一個新專案

導航到 Android Studio,如下面的螢幕所示。在下面的螢幕中,單擊“新建專案”以建立一個新的 Android Studio 專案。

單擊“新建專案”後,您將看到下面的螢幕。

在此螢幕中,我們只需選擇“空活動”並單擊“下一步”。單擊“下一步”後,您將看到下面的螢幕。

在此螢幕中,我們只需指定專案名稱。然後包名將自動生成。

注意 - 確保將語言選擇為 Kotlin。

指定所有詳細資訊後,單擊“完成”以建立一個新的 Android Studio 專案。

建立專案後,我們將看到兩個開啟的檔案,即 activity_main.xml 和 MainActivity.kt 檔案。

步驟 2:使用 activity_main.xml

示例 1: 四側填充

Android 中的填充概念

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

   <!-- creating a simple text view -->
   <TextView
      android:id="@+id/idBtn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_margin="20dp"
      android:background="#FF000000"
      android:padding="30dp"
      android:text="Hello World"
      android:textColor="#FFFFFFFF"
      android:textSize="25sp"
      android:textStyle="bold" />

</RelativeLayout>

說明 - 在上面的程式碼中,根元素是 Android 中的相對佈局。此佈局是一個檢視組,用於將其中的所有元素彼此相對對齊。我們可以藉助 ID 或位置相對地對齊相對佈局中的所有元素。

在此相對佈局內,我們正在建立一個 TextView。對於此 TextView,我們正在指定背景顏色,然後我們正在為此文字從所有側面新增填充。

示例 2:左側填充

使用 activity_main.xml 檔案

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

   <!-- creating a simple text view -->
   <TextView
      android:id="@+id/idBtn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_margin="20dp"
      android:background="#FF000000"
      android:paddingLeft="30dp"
      android:text="Hello World"
      android:textColor="#FFFFFFFF"
      android:textSize="25sp"
      android:textStyle="bold" />

</RelativeLayout>

說明 - 在上面的程式碼中,根元素是 Android 中的相對佈局。此佈局是一個檢視組,用於將其中的所有元素彼此相對對齊。我們可以藉助 ID 或位置相對地對齊相對佈局中的所有元素。

在此相對佈局內,我們正在建立一個 TextView。對於此 TextView,我們正在指定背景顏色,然後我們正在為此文字從左側新增填充。

示例 3: 右側填充

使用 activity_main.xml 檔案。

語法

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

   <!-- creating a simple text view -->
   <TextView
      android:id="@+id/idBtn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_margin="20dp"
      android:background="#FF000000"
      android:paddingRight="30dp"
      android:text="Hello World"
      android:textColor="#FFFFFFFF"
      android:textSize="25sp"
      android:textStyle="bold" />

</RelativeLayout>

說明 - 在上面的程式碼中,根元素是 Android 中的相對佈局。此佈局是一個檢視組,用於將其中的所有元素彼此相對對齊。我們可以藉助 ID 或位置相對地對齊相對佈局中的所有元素。

在此相對佈局內,我們正在建立一個 TextView。對於此 TextView,我們正在指定背景顏色,然後我們正在為此文字從右側新增填充。

示例 4:頂部填充

使用 activity_main.xml 檔案。

語法

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

   <!-- creating a simple text vixew -->
   <TextView
      android:id="@+id/idBtn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_margin="20dp"
      android:background="#FF000000"
      android:paddingTop="30dp"
      android:text="Hello World"
      android:textColor="#FFFFFFFF"
      android:textSize="25sp"
      android:textStyle="bold" />

</RelativeLayout>

說明 - 在上面的程式碼中,根元素是 Android 中的相對佈局。此佈局是一個檢視組,用於將其中的所有元素彼此相對對齊。我們可以藉助 ID 或位置相對地對齊相對佈局中的所有元素。

在此相對佈局內,我們正在建立一個 TextView。對於此 TextView,我們正在指定背景顏色,然後我們正在為此文字從頂部新增填充。

示例 5:底部填充

使用 activity_main.xml 檔案。

語法

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

   <!-- creating a simple text vixew -->
   <TextView
      android:id="@+id/idBtn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_margin="20dp"
      android:background="#FF000000"
      android:paddingBottom="30dp"
      android:text="Hello World"
      android:textColor="#FFFFFFFF"
      android:textSize="25sp"
      android:textStyle="bold" />

</RelativeLayout>

說明 - 在上面的程式碼中,根元素是 Android 中的相對佈局。此佈局是一個檢視組,用於將其中的所有元素彼此相對對齊。我們可以藉助 ID 或位置相對地對齊相對佈局中的所有元素。

在此相對佈局內,我們正在建立一個 TextView。對於此 TextView,我們正在指定背景顏色,然後我們正在為此文字從底部新增填充。

結論

在上面的教程中,我們學習了 Android 中的填充是什麼,以及如何在應用程式中使用它來新增視窗小部件內容與其邊框之間的間距。

更新於: 2023 年 2 月 21 日

2K+ 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始
廣告