Android x Kotlin 實作課程：打造個人專屬計算機 APP EP3 佈局優化使用 Style 樣式包

【打造個人專屬計算機 APP】 系列文章目錄：
https://vocus.cc/article/65acea9ffd897800019c13dc

課程摘要

本課程學習如何提取共同屬性，透過 Style 樣式包，套用至每個按鈕。來提升佈局的可讀性和好維護性。

教學影片

• 一般會員：成為一般會員後，您將能夠觀看我們所提供的一般會員專屬線上課程。
• 精實會員：成為精實會員後，您將能夠觀看我們所提供的精實會員專屬線上課程。

範例程式碼

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyButtonStyle" parent="Widget.AppCompat.Button">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_columnWeight">1</item>
        <item name="android:layout_rowWeight">1</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textSize">30sp</item>
    </style>
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:background="#050005">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:orientation="vertical">
    <TextView
        android:id="@+id/processTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:padding="8dp"
        android:textColor="#efefef"
        android:textColorHint="@color/white"
        android:textSize="35sp"
        tools:hint="計算機過程顯示區域"/>
    <TextView
        android:id="@+id/resultTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="end"
        android:padding="8dp"
        android:textColor="@color/white"
        android:textColorHint="@color/white"
        android:textSize="45sp"
        tools:hint="666"/>
    </LinearLayout>
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7"
        android:columnCount="4">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonAllClear"
            style="@style/MyButtonStyle"
            android:text="AC" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonToggleSign"
            style="@style/MyButtonStyle"
            android:text="+/-" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonDivide"
            style="@style/MyButtonStyle"
            android:text="/"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonBackspace"
            style="@style/MyButtonStyle"
            android:text="⌫"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button7"
            style="@style/MyButtonStyle"
            android:text="7"/> 

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button8"
            style="@style/MyButtonStyle"
            android:text="8"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button9"
            style="@style/MyButtonStyle"
            android:text="9"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonMultiply"
            style="@style/MyButtonStyle"
            android:text="*"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button4"
            style="@style/MyButtonStyle"
            android:text="4"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button5"
            style="@style/MyButtonStyle"
            android:text="5"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button6"
            style="@style/MyButtonStyle"
            android:text="6"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonMinus"
            style="@style/MyButtonStyle"
            android:text="-"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button1"
            style="@style/MyButtonStyle"
            android:text="1"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button2"
            style="@style/MyButtonStyle"
            android:text="2"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button3"
            style="@style/MyButtonStyle"
            android:text="3"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonPlus"
            style="@style/MyButtonStyle"
            android:text="+"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button0"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="0"
            android:layout_columnSpan="2"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonDot"
            style="@style/MyButtonStyle"
            android:text="."/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonEquals"
            style="@style/MyButtonStyle"
            android:text="="/>

    </GridLayout>

</LinearLayout>