Android x Kotlin 實作課程：打造個人專屬計算機 APP EP2 如何建立基本計算機佈局畫面
【打造個人專屬計算機 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>
13會員
259內容數
哈囉！歡迎光臨我的沙龍！我是 KT，一位對應用程式開發充滿熱情的開發者。在這個專屬空間，我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇，渴望不斷探索新知，歡迎成為我們的會員，一起在應用程式開發的旅途上，探索更深層次的技術世界，享受學習的樂趣。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本課程學習如何透過函數重構程式碼，提高可讀性、可維護性和重用性。以按鈕操作為例，將不同邏輯提取成函數，例如 allClear()、equalSign() 等，使程式碼更簡潔易懂，提升開發效率。
本課程學習如何處理按鈕點擊事件並透過 Logcat 日誌輸出資訊確認按鈕邏輯是否正確。
本課程學習如何修改按鈕外觀的方法，透過調整背景屬性和形狀。我們新增了四種背景顏色，修改每個按鈕的外觀。完成後，呈現不同按鈕風格。
本課程學習如何提取共同屬性，透過 Style 樣式包，套用至每個按鈕。來提升佈局的可讀性和好維護性。
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
本課程學習如何透過函數重構程式碼，提高可讀性、可維護性和重用性。以按鈕操作為例，將不同邏輯提取成函數，例如 allClear()、equalSign() 等，使程式碼更簡潔易懂，提升開發效率。
本課程學習如何處理按鈕點擊事件並透過 Logcat 日誌輸出資訊確認按鈕邏輯是否正確。
本課程學習如何修改按鈕外觀的方法，透過調整背景屬性和形狀。我們新增了四種背景顏色，修改每個按鈕的外觀。完成後，呈現不同按鈕風格。
本課程學習如何提取共同屬性，透過 Style 樣式包，套用至每個按鈕。來提升佈局的可讀性和好維護性。