【教學】實作你的第一個Hello World Android App

本篇教學主要重點有:
1. 該在哪撰寫Java代碼
2. 該在哪佈置App框架
3. 如何進行編譯動作
4. 內文有提供代碼進行複製
5. 應該沒有五了...

一開始我先跟大家說明當你進入Android Studio的撰寫頁面時,該在哪撰寫Java、在哪建構框架、如何編譯,以及哪兒Log紀錄。如果開發環境還沒建置好的朋友們,可以瀏覽連結的文章。

▼當我們進入Android Studio時,應該會看到這個畫面
依照系統不同,風格不同,看起來應該會有些許誤差
(黑色系列真的好帥!)

▼頁面左邊紅色框框圈選的地方為選擇Java檔的區塊
詳細位置為app資料夾底下的java資料夾底下的你的package底下的Java檔
注意是第一個package,下面兩個旁邊有括號的先不用理它
你點選你要選擇的檔案後,就可以在右邊看到的大區塊中撰寫Java

▼下圖頁面左邊紅色框框圈選的地方是負責App框架建置的地方
一般要建置固定App框架的話,我們會在res底下的layout裡建置相關檔案
同樣點擊要建置的檔案,就可以在右邊大區塊中撰寫
當然要建置App內容不一定要用這個,方法百百種,這只是其中一種

▼要編譯的話,點擊下圖綠色三角形按鈕就行囉!

▼初次編譯時,會跳出對話框問你要選擇哪個裝置進行瀏覽
上方<none>區塊,如果有用實體機的話,會顯示時體積的型號
下方則是自己新增的模擬器,這裡可以依照你的喜好進行選擇
選擇完之後,點擊「OK」

▼我點選模擬器進行測試,以下是這支App執行完之後的畫面

▼下方紅色框框則是會顯示這支App運作的狀況如何
基本上,不要出現一大串紅字就沒什麼事
記住是要點擊「logcat」進行觀察喔!
它可是幫忙你debug的最佳好夥伴!

以上就是大致的介紹,接下來要來說明代碼了。
首先是Layout的部分,也就是我們App框架的部分。關於框架的內容物,我大致分成兩種,一種是Layout,負責整體App的框架;一種是物件,也就是我們眼睛所能看到,能互動的東西。每個Layout跟物件都有不同的特性,這就得請各位上網多多查看及實作。

下述範例為例,外框架為RelativeLayout。它制定了這支App排版的方式,而內容物TextView則是負責顯示所呈現的內容。

File Name: activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.app.ray.myfirsthelloworld.MainActivity">

    <TextView
        android:id="@+id/txt_hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>

接著是關於Java代碼的部分。onCreate Function基本上是負責App該頁面初始化的動作,關於Android App的生命週期,可以看連結的這篇文章。如果要將我們剛才弄好的layout套進這個App頁面的話,需要套用到setContentView()這個Function。

setTitle() Function是負責設定該App頁面最上方的標題。而我們在這支App頁面裡面,還記得我們有一個TextView物件嗎?我們必須將它宣告出來,才能對該物件進行控制的動作。這裡Ray小編寫的功能是當點擊這個TextView物件時,上方的字幕就會轉變為「Hi, there is Mr. Ray's Box」。

File Name: MainActivity
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView txtHello;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setTitle("Hey!");

        txtHello = (TextView) this.findViewById(R.id.txt_hello_world);
        txtHello.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                txtHello.setText("Hi, there is Mr. Ray's Box");
            }
        });

    }
}

以上就是本篇的內容,Android App開發是不是很有趣呢?歡迎大家一起加入Android App開發的領域喔!

1 則留言:

  1. 您好,

    祝一切順利。希望您還記得我。來信告知FotoJet Designer引入了Mac和Windows的桌面端版本。希望能夠查看一下並推薦給您的讀者? 。

    期待您的回复。

    Candy
    Skype:candy.rora
    LineID:candy.rora

    回覆刪除