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

閱讀時間約 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>
avatar-img
10會員
231內容數
哈囉!歡迎光臨我的沙龍!我是 KT,一位對應用程式開發充滿熱情的開發者。在這個專屬空間,我將與您分享我在應用開發領域的深入學習心得和豐富的實戰經驗。如果您對應用程式開發技術同樣充滿好奇,渴望不斷探索新知,歡迎成為我們的會員,一起在應用程式開發的旅途上,探索更深層次的技術世界,享受學習的樂趣。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
HKT實驗室 的其他內容
我們將深入介紹如何使用 Kotlin 在 Android 平台上開發一個簡單的計算機應用程式。這個課程的目標是教授大家如何通過點擊計算機鍵盤,輸入算式,並得到計算結果。透過這套課程,你將能夠熟練掌握 Kotlin 語言在 Android 開發中的實際應用,並輕鬆打造出屬於自己的計算機應用程式。
我們將深入介紹如何使用 Kotlin 在 Android 平台上開發一個簡單的計算機應用程式。這個課程的目標是教授大家如何通過點擊計算機鍵盤,輸入算式,並得到計算結果。透過這套課程,你將能夠熟練掌握 Kotlin 語言在 Android 開發中的實際應用,並輕鬆打造出屬於自己的計算機應用程式。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
承接上一篇換系統原因文,來實際講講我從Pixel換成iPhone 15 pro的遇到的困境,也是我建議要跳槽到iOS的人最好先注意的事情。 轉換期是可以預見的,網路上所有的評測幾乎都會這樣告訴你。 不過即使先有這樣的認知,我使用iPhone中的第一個月,還是適應得非常辛苦。 想用原生服務? 幾乎
Thumbnail
因為手機相機壞掉,這次iPhone 15 pro預購第一天就跟著上去開搶,9/22發售當天就拿到了iPhone。我過去是使用Android,使用至今約2個月,中間經過適應期,也有帶出國。以下分享我換機的原因與感想給有類似需求者,因為打太長了,上集就先分享換機理由好了...。 Android使用經驗
Thumbnail
Android版本的ChatGPT,它的語音系統讓我感覺到非常的驚艷,使我忍不住想要搶先來發表一下我的測試報告。 Android版本的ChatGPT在 8月1號正式在台灣上線,我現在已經在使用,不過很可惜的是,它對於一些在網頁版能夠使用的實驗性功能,並沒有辦法在Android app上使用。至少目
Thumbnail
主要物件: BiometricManager -檢查使用者是否有指紋辨識or是否設置密碼 BiometricPrompt -初始化指紋視窗 並且 呼叫指紋視窗 BiometricPromptInfo -指紋視窗的一些設定 Title , Description ... Coding: 結果:
 轉移自 LogDown 原文日期 January 19, 2016 14:35  Android 上常有些沒有在文件上,卻應該清楚的資訊,筆者稱其為 Android 的潛規則。 下面條列出筆者遇過的部分,會隨著踩過的坑繼續更新。   鬧鈴會因為開關機被清除,所以必須重新設定。 Androi
 轉移自 LogDown 原文日期 September 09, 2015 22:18  View animation (API1) 針對 View 的鏡花水月、海市蜃樓,物件本身沒變化,比如說:點擊和觸摸仍針對原處。   Tween animation 給我一個開始和結束
Thumbnail
轉移自 LogDown 原文日期  July 30, 2014 19:36  Gogo Monkey Run Kevin, Gogolook monkey runner     - auto-testing tool     - python monkey recorder     - co
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
承接上一篇換系統原因文,來實際講講我從Pixel換成iPhone 15 pro的遇到的困境,也是我建議要跳槽到iOS的人最好先注意的事情。 轉換期是可以預見的,網路上所有的評測幾乎都會這樣告訴你。 不過即使先有這樣的認知,我使用iPhone中的第一個月,還是適應得非常辛苦。 想用原生服務? 幾乎
Thumbnail
因為手機相機壞掉,這次iPhone 15 pro預購第一天就跟著上去開搶,9/22發售當天就拿到了iPhone。我過去是使用Android,使用至今約2個月,中間經過適應期,也有帶出國。以下分享我換機的原因與感想給有類似需求者,因為打太長了,上集就先分享換機理由好了...。 Android使用經驗
Thumbnail
Android版本的ChatGPT,它的語音系統讓我感覺到非常的驚艷,使我忍不住想要搶先來發表一下我的測試報告。 Android版本的ChatGPT在 8月1號正式在台灣上線,我現在已經在使用,不過很可惜的是,它對於一些在網頁版能夠使用的實驗性功能,並沒有辦法在Android app上使用。至少目
Thumbnail
主要物件: BiometricManager -檢查使用者是否有指紋辨識or是否設置密碼 BiometricPrompt -初始化指紋視窗 並且 呼叫指紋視窗 BiometricPromptInfo -指紋視窗的一些設定 Title , Description ... Coding: 結果:
 轉移自 LogDown 原文日期 January 19, 2016 14:35  Android 上常有些沒有在文件上,卻應該清楚的資訊,筆者稱其為 Android 的潛規則。 下面條列出筆者遇過的部分,會隨著踩過的坑繼續更新。   鬧鈴會因為開關機被清除,所以必須重新設定。 Androi
 轉移自 LogDown 原文日期 September 09, 2015 22:18  View animation (API1) 針對 View 的鏡花水月、海市蜃樓,物件本身沒變化,比如說:點擊和觸摸仍針對原處。   Tween animation 給我一個開始和結束
Thumbnail
轉移自 LogDown 原文日期  July 30, 2014 19:36  Gogo Monkey Run Kevin, Gogolook monkey runner     - auto-testing tool     - python monkey recorder     - co