iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
4
Software Development

[Andriod] Andriod Studio 從入門到進入狀況系列 第 7

[Day 06] 我的第一個Android程式 - BMI程式設計(一) 新增一個專案及基本畫面設計

折騰了好幾天,
終於開始正式開發APP了,
我在想會不會這個BMI程式就可以一直寫到鐵人賽結束了...

廢話不多說,
現在我們就要開始建立第一個BMI的程式,
今天的目的就是先把XML的畫面建立起來,
所以為了這件事,我們就來建一個新的專案,
名字就叫MyBMI,

首先新增一個專案
https://ithelp.ithome.com.tw/upload/images/20181012/20105694zNsN1aW6Wh.png

名字就叫MyBMI
https://ithelp.ithome.com.tw/upload/images/20181012/20105694aNZORCjgzQ.png

選擇接近100%的版本就好, 通常我是直接跳過
https://ithelp.ithome.com.tw/upload/images/20181012/20105694HAm17xxomR.png

選擇Empty Activity, 我們會自己設計畫面
https://ithelp.ithome.com.tw/upload/images/20181012/20105694liIJgIHvl6.png

按下Finish
https://ithelp.ithome.com.tw/upload/images/20181012/201056949ctgL4rPCo.png

然後讓XML能夠顯示畫面, 這部分前幾天說過, 不再贅述.

接下來就開始拉控制項跟調整控制項了,

  • 拉一個TextView,顯示文字為 哈囉!BMI
  • 拉一個TextView,顯示文字為 身高 (cm)
  • 拉一個Number(EditText),無顯示文字,準備輸入身高
  • 拉一個TextView,顯示文字為 體重 (kg)
  • 拉一個Number(EditText),無顯示文字,準備輸入體重
  • 拉一個按鈕,顯示文字為 計算BMI
  • 拉一個TextView,無顯示文字
  • 拉一個TextView,無顯示文字

接著調整XML如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/TextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="哈囉!BMI" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="身高 (cm)" />

        <EditText
            android:id="@+id/height"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="numberDecimal" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="體重 (kg)" />

        <EditText
            android:id="@+id/weight"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="numberDecimal" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="計算BMI值" />

        <TextView
            android:id="@+id/result"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:textAppearanceLarge"/>

        <TextView
            android:id="@+id/suggest"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:textAppearanceLarge"/>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

這時候可以執行看看,
已經有畫面了但是還沒有程式,
畫面如下
https://ithelp.ithome.com.tw/upload/images/20181012/20105694ZZRha1yY3u.png


上一篇
[Day 05] 在手機上面檢視Android程式執行畫面
下一篇
[Day 07] 我的第一個Android程式 - BMI程式設計(二) 簡介EditText的inputType
系列文
[Andriod] Andriod Studio 從入門到進入狀況33

尚未有邦友留言

立即登入留言