HKT實驗室

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

HKT實驗室
HKT實驗室
閱讀時間約 25 分鐘

【打造個人專屬計算機 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>
HKT實驗室Android x Kotlin 實作課程
HKT實驗室
8會員
211內容數
哈囉！歡迎光臨我的沙龍！我是 KT，一位對應用程式開發充滿熱情的開發者。在這個專屬空間，我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇，渴望不斷探索新知，歡迎成為我們的會員，一起在應用程式開發的旅途上，探索更深層次的技術世界，享受學習的樂趣。
留言0
查看全部
發表第一個留言支持創作者！
HKT實驗室 的其他內容
Android x Kotlin 實作課程：打造個人專屬計算機 APP EP1 課程介紹篇
我們將深入介紹如何使用 Kotlin 在 Android 平台上開發一個簡單的計算機應用程式。這個課程的目標是教授大家如何通過點擊計算機鍵盤，輸入算式，並得到計算結果。透過這套課程，你將能夠熟練掌握 Kotlin 語言在 Android 開發中的實際應用，並輕鬆打造出屬於自己的計算機應用程式。
#Android教學
Android x Kotlin 實作課程：打造個人專屬計算機 APP EP1 課程介紹篇
我們將深入介紹如何使用 Kotlin 在 Android 平台上開發一個簡單的計算機應用程式。這個課程的目標是教授大家如何通過點擊計算機鍵盤，輸入算式，並得到計算結果。透過這套課程，你將能夠熟練掌握 Kotlin 語言在 Android 開發中的實際應用，並輕鬆打造出屬於自己的計算機應用程式。
#Android教學
你可能也想看
Google News 追蹤
avatar
MimiVsJames的美股投資分享
2024/10/26
Thumbnail
第二部分：美國總統大選看未來四年的佈局板塊與投資邏輯（下篇：會員獨享）
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
#美國大選#美國總統選舉#美股投資
avatar
矽谷jojo的沙龍
2024/10/27
Thumbnail
[獵人]冨樫如何合理化妮翁的死亡？
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢？ 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
#HUNTER×HUNTER#全職獵人
avatar
Dr. 牛皮的沙龍
2023/12/07
Thumbnail
從Android轉換iOS兩個月心得(中)：躲不掉的轉換期與撞牆期
承接上一篇換系統原因文，來實際講講我從Pixel換成iPhone 15 pro的遇到的困境，也是我建議要跳槽到iOS的人最好先注意的事情。 轉換期是可以預見的，網路上所有的評測幾乎都會這樣告訴你。 不過即使先有這樣的認知，我使用iPhone中的第一個月，還是適應得非常辛苦。 想用原生服務? 幾乎
#Android#iPhone#iOS
avatar
Dr. 牛皮的沙龍
2023/11/26
Thumbnail
從Android換到 iOS 兩個月感想(上)
因為手機相機壞掉，這次iPhone 15 pro預購第一天就跟著上去開搶，9/22發售當天就拿到了iPhone。我過去是使用Android，使用至今約2個月，中間經過適應期，也有帶出國。以下分享我換機的原因與感想給有類似需求者，因為打太長了，上集就先分享換機理由好了...。 Android使用經驗
#Android#iPhone#iOS
avatar
龍阿迪的沙龍
2023/08/01
Thumbnail
Android版本的ChatGPT 語音系統輸入測試報告
Android版本的ChatGPT，它的語音系統讓我感覺到非常的驚艷，使我忍不住想要搶先來發表一下我的測試報告。 Android版本的ChatGPT在 8月1號正式在台灣上線，我現在已經在使用，不過很可惜的是，它對於一些在網頁版能夠使用的實驗性功能，並沒有辦法在Android app上使用。至少目
#Android#ChatGPT#測試
avatar
JG_GameFi的沙龍
2022/05/13
Thumbnail
【ANDROID USERS CAN NOW PLAY AXIE ORIGIN ON MOBILE】
avatar
LiHan的沙龍
2022/04/27
Thumbnail
Android-BiometricManager 指紋登入
主要物件： BiometricManager -檢查使用者是否有指紋辨識or是否設置密碼 BiometricPrompt -初始化指紋視窗 並且 呼叫指紋視窗 BiometricPromptInfo -指紋視窗的一些設定 Title , Description ... Coding: 結果：
#Android#BiometricManger#FingerLogin
avatar
Kate的沙龍
2019/05/11
Android 潛規則
 轉移自 LogDown 原文日期 January 19, 2016 14:35  Android 上常有些沒有在文件上，卻應該清楚的資訊，筆者稱其為 Android 的潛規則。 下面條列出筆者遇過的部分，會隨著踩過的坑繼續更新。   鬧鈴會因為開關機被清除，所以必須重新設定。 Androi
avatar
Kate的沙龍
2019/05/11
Android Animation 解析一
 轉移自 LogDown 原文日期 September 09, 2015 22:18  View animation (API1) 針對 View 的鏡花水月、海市蜃樓，物件本身沒變化，比如說：點擊和觸摸仍針對原處。   Tween animation 給我一個開始和結束
avatar
Kate的沙龍
2019/05/11
Thumbnail
Android Taipei 2014/07/30
轉移自 LogDown 原文日期  July 30, 2014 19:36  Gogo Monkey Run Kevin, Gogolook monkey runner     - auto-testing tool     - python monkey recorder     - co
avatar
郭蓋特的科技研究所
2014/06/30
Android 原生瀏覽器安裝，以及flash安裝說明
avatar
MimiVsJames的美股投資分享
2024/10/26
Thumbnail
第二部分：美國總統大選看未來四年的佈局板塊與投資邏輯（下篇：會員獨享）
接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議 分析兩位候選人政策利多/ 利空的板塊和股票
#美國大選#美國總統選舉#美股投資
avatar
矽谷jojo的沙龍
2024/10/27
Thumbnail
[獵人]冨樫如何合理化妮翁的死亡？
🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢？ 🤨作者巧思-讓妮翁死亡合理的幾個伏筆
#HUNTER×HUNTER#全職獵人
avatar
Dr. 牛皮的沙龍
2023/12/07
Thumbnail
從Android轉換iOS兩個月心得(中)：躲不掉的轉換期與撞牆期
承接上一篇換系統原因文，來實際講講我從Pixel換成iPhone 15 pro的遇到的困境，也是我建議要跳槽到iOS的人最好先注意的事情。 轉換期是可以預見的，網路上所有的評測幾乎都會這樣告訴你。 不過即使先有這樣的認知，我使用iPhone中的第一個月，還是適應得非常辛苦。 想用原生服務? 幾乎
#Android#iPhone#iOS
avatar
Dr. 牛皮的沙龍
2023/11/26
Thumbnail
從Android換到 iOS 兩個月感想(上)
因為手機相機壞掉，這次iPhone 15 pro預購第一天就跟著上去開搶，9/22發售當天就拿到了iPhone。我過去是使用Android，使用至今約2個月，中間經過適應期，也有帶出國。以下分享我換機的原因與感想給有類似需求者，因為打太長了，上集就先分享換機理由好了...。 Android使用經驗
#Android#iPhone#iOS
avatar
龍阿迪的沙龍
2023/08/01
Thumbnail
Android版本的ChatGPT 語音系統輸入測試報告
Android版本的ChatGPT，它的語音系統讓我感覺到非常的驚艷，使我忍不住想要搶先來發表一下我的測試報告。 Android版本的ChatGPT在 8月1號正式在台灣上線，我現在已經在使用，不過很可惜的是，它對於一些在網頁版能夠使用的實驗性功能，並沒有辦法在Android app上使用。至少目
#Android#ChatGPT#測試
avatar
JG_GameFi的沙龍
2022/05/13
Thumbnail
【ANDROID USERS CAN NOW PLAY AXIE ORIGIN ON MOBILE】
avatar
LiHan的沙龍
2022/04/27
Thumbnail
Android-BiometricManager 指紋登入
主要物件： BiometricManager -檢查使用者是否有指紋辨識or是否設置密碼 BiometricPrompt -初始化指紋視窗 並且 呼叫指紋視窗 BiometricPromptInfo -指紋視窗的一些設定 Title , Description ... Coding: 結果：
#Android#BiometricManger#FingerLogin
avatar
Kate的沙龍
2019/05/11
Android 潛規則
 轉移自 LogDown 原文日期 January 19, 2016 14:35  Android 上常有些沒有在文件上，卻應該清楚的資訊，筆者稱其為 Android 的潛規則。 下面條列出筆者遇過的部分，會隨著踩過的坑繼續更新。   鬧鈴會因為開關機被清除，所以必須重新設定。 Androi
avatar
Kate的沙龍
2019/05/11
Android Animation 解析一
 轉移自 LogDown 原文日期 September 09, 2015 22:18  View animation (API1) 針對 View 的鏡花水月、海市蜃樓，物件本身沒變化，比如說：點擊和觸摸仍針對原處。   Tween animation 給我一個開始和結束
avatar
Kate的沙龍
2019/05/11
Thumbnail
Android Taipei 2014/07/30
轉移自 LogDown 原文日期  July 30, 2014 19:36  Gogo Monkey Run Kevin, Gogolook monkey runner     - auto-testing tool     - python monkey recorder     - co
avatar
郭蓋特的科技研究所
2014/06/30
Android 原生瀏覽器安裝，以及flash安裝說明