Android x Kotlin 實作課程：打造個人專屬計算機 APP EP2 如何建立基本計算機佈局畫面

HKT實驗室

更新於 2024/12/01發佈於 2024/01/23閱讀時間約 22 分鐘

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

課程摘要

本課程學習如何實作計算機介面，佈局文字元件及按鈕。學習使用 LinearLayout 垂直排列元件，調整背景色。透過 GridLayout 佈局計算機按鈕。

教學影片

若您無法順利觀看教學影片，請先登入您的 YouTube 帳號，然後點擊以下連結加入我們的頻道會員：

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

範例程式碼

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"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="AC"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonToggleSign"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="+/-"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonDivide"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="/"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonBackspace"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="⌫"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="7"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button8"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="8"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button9"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="9"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonMultiply"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="*"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="4"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="5"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="6"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonMinus"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="-"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="1"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="2"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="3"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonPlus"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="+"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <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"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="."
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>
        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/buttonEquals"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="="
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:textColor="@color/white"
            android:textSize="30sp"/>

    </GridLayout>

</LinearLayout>