如何在Android中以程式設計方式設定檢視的樣式屬性?


簡介

在開發Android應用程式的過程中,我們經常會遇到需要為應用程式中的多個檢視設定相同樣式的情況。我們發現需要多次編寫設定樣式的程式碼。為了減少程式碼重複和最佳化程式碼,我們可以在styles.xml檔案中為特定檢視建立樣式,並以程式設計方式將該樣式設定為我們的檢視。本文將介紹如何在Android中以程式設計方式設定檢視的樣式屬性。

實現

我們將建立一個簡單的應用程式,其中我們將建立兩個TextView。第一個TextView將顯示應用程式的標題,第二個TextView將顯示另一段文字,我們將為此文字應用自定義樣式,並將此樣式新增到我們的styles.xml檔案中。

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

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

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

在這個螢幕中,我們只需選擇“Empty Activity”並單擊“Next”。單擊“Next”後,您將看到下面的螢幕。

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

注意:確保選擇Java作為語言。

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

專案建立完成後,我們將看到開啟的兩個檔案:activity_main.xml和MainActivity.java檔案。

步驟2:使用activity_main.xml

導航到activity_main.xml。如果此檔案不可見,則要開啟此檔案。在左側窗格中導航到app>res>layout>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 text view on below line-->
   <TextView
       android:id="@+id/idTVHeading"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true"
       android:layout_marginStart="20dp"
       android:layout_marginTop="20dp"
       android:layout_marginEnd="20dp"
       android:layout_marginBottom="20dp"
       android:padding="4dp"
       android:text="Style Attribute in a View on Android"
       android:textAlignment="center"
       android:textColor="@color/black"
       android:textSize="20sp"
       android:textStyle="bold" />

   <!-- creating a text view to display custom styled text view-->
   <TextView
       android:id="@+id/idTVMessage"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_below="@id/idTVHeading"
       android:layout_centerHorizontal="true"
       android:text="Custom Styled Text" />

</RelativeLayout>

說明:在上面的程式碼中,我們建立一個根佈局作為相對佈局。在這個佈局中,我們建立一個TextView來顯示應用程式的標題。之後,我們建立另一個TextView來顯示簡單的文字,併為這個TextView指定id、寬度和高度。我們將在Java檔案中使用此id來為此TextView設定樣式。

步驟3:在styles.xml檔案中建立自定義樣式

導航到app>res>values>styles.xml檔案,並將以下程式碼新增到其中。程式碼中添加了註釋以詳細瞭解。

<resources xmlns:tools="http://schemas.android.com/tools">
   <!-- Base application theme. -->
   <style name="Theme.JavaTestApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
       <!-- Primary brand color. -->
       <item name="colorPrimary">@color/purple_500</item>
       <item name="colorPrimaryVariant">@color/purple_700</item>
       <item name="colorOnPrimary">@color/white</item>
       <!-- Secondary brand color. -->
       <item name="colorSecondary">@color/teal_200</item>
       <item name="colorSecondaryVariant">@color/teal_700</item>
       <item name="colorOnSecondary">@color/black</item>
       <!-- Status bar color. -->
       <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
       <!-- Customize your theme here. -->
   </style>
   <!-- creating a custom style for our text view on below line -->
   <style name="TextStyle" parent="Widget.AppCompat.TextView">
       <!-- specifying text size on below line -->
       <item name="android:textSize">20sp</item>
       <!-- specifying margin for text view on below line -->
       <item name="android:layout_margin">4dp</item>
       <!-- specifying padding for text view on below line -->
       <item name="android:padding">4dp</item>
       <!-- specifying text all caps as false on below line -->
       <item name="textAllCaps">false</item>
       <!-- specifying text color on below line -->
       <item name="android:textColor">@color/black</item>
       <!-- specifying text style on below line -->
       <item name="android:textStyle">bold</item>
   </style>
</resources>

說明:在上面的程式碼中,首先我們將看到用於設定應用程式主題的預設主題。之後,我們建立一個名為TextStyle的自定義主題,在這個主題中,我們添加了一些不同的樣式屬性,這些屬性將用於我們的TextView,例如填充、邊距、文字大小、文字顏色、文字樣式等。

步驟4:使用MainActivity.java檔案

導航到MainActivity.java。如果此檔案不可見,則要開啟此檔案。在左側窗格中導航到app>java>your_package_name>MainActivity.java以開啟此檔案。開啟此檔案後,將以下程式碼新增到其中。程式碼中添加了註釋以詳細瞭解。

package com.example.java_test_application;

import android.os.Bundle;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.TextViewCompat;

public class MainActivity extends AppCompatActivity {
   // creating variables on below line for text view.
   private TextView msgTV;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       // initializing variables on below line.
       msgTV = findViewById(R.id.idTVMessage);
       // on below line setting custom style for our text view.
       TextViewCompat.setTextAppearance(msgTV, R.style.TextStyle);
   }
}

說明:在上面的程式碼中,首先我們為要設定樣式的TextView建立變數。現在我們將看到onCreate方法。這是每個Android應用程式的預設方法。此方法在建立應用程式檢視時呼叫。在這個方法中,我們設定contentView,即名為activity_main.xml的佈局檔案,以設定來自該檔案的UI。在這個onCreate方法中,我們使用我們在activity_main.xml檔案中指定的id初始化TextView變數。之後,我們透過呼叫textAppearance方法來設定TextView的樣式。

新增上述程式碼後,我們只需單擊頂部欄中的綠色圖示即可在移動裝置上執行我們的應用程式。

注意:確保已連線到您的真實裝置或模擬器。

輸出

結論

在本文中,我們介紹瞭如何在Android中以程式設計方式設定檢視的樣式屬性。

更新於:2023年5月9日

5000+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告