2013.05.022013.05.02

Android apps development IAndroid apps development I- How to build your first app.- How to build your first app.

Introduction ofIntroduction of

2013.05.022013.05.02

ContentContent

UI & Environment Intro.UI & Environment Intro. Say Hello World!Say Hello World! Layout Intro.Layout Intro. Add the behaviorAdd the behavior

2013.05.022013.05.02

srcsrc• javajava 原始碼原始碼

res (resource)res (resource)• iconsicons• layoutlayout• string...etc.string...etc.

libs libs 靜態函式庫靜態函式庫

Package ExplorerPackage Explorer

2013.05.022013.05.02

LayoutLayout

Let's see RAW content (.xml)Let's see RAW content (.xml)

2013.05.022013.05.02

Layout – res / layout / main.xmlLayout – res / layout / main.xml

2013.05.022013.05.02

Layout StructureLayout Structure

ViewGroupViewGroup● A layout or container such asA layout or container such as RelativeLayoutRelativeLayout

oror LinearLayoutLinearLayout

ViewView● A child of ViewGroup such asA child of ViewGroup such as buttonbutton or or text text

fieldfield

2013.05.022013.05.02

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/hello_world" />

Layout – View (TextView)Layout – View (TextView)

@ 代表一個 pointer ，指向真正的字串內容

2013.05.022013.05.02

Layout – res / values / strings.xmlLayout – res / values / strings.xml

for i18n purpose

<?xml version="1.0" encoding="utf-8"?><resources>

<string name="app_name">Hello World</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string>

</resources>

2013.05.022013.05.02

Add behaviorAdd behavior

Scenerio:

畫面上有一顆按鈕，當按下按鈕後，在其下方出現預藏的文字。

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

1. Add a button

2. Hide the text

3. Make the button show text

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

1. Add a button1. Add a button

1-1. 利用滑鼠 曳新增一按鈕拖

1-2. 設定按鈕上的提示文字

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

2. Hide the text2. Hide the text

android:visibility="invisible"

Just add the attribution to TextViewJust add the attribution to TextView

But how do I know what attribution I can use?

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

2. Hide the text2. Hide the text

Go to Go to android developer siteandroid developer site• ReferenceReference• android.wigetandroid.wiget• TextViewTextView• Inherited XML AttributesInherited XML Attributes• Attribute NameAttribute Name• android:visibilityandroid:visibility

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

Invisible你看不到我，你看不到我

但是 ... 仍然佔據空間

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

3-1. add the attribution to button3-1. add the attribution to button android:onClick="android:onClick="showTextshowText""

3-2. write the code of 3-2. write the code of showTextshowText

methodmethod

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

3-1. add the attribution to button3-1. add the attribution to button android:onClick="android:onClick="showTextshowText""

3-2. write the code of 3-2. write the code of showTextshowText

methodmethod

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/btn_click_text"

android:onClick="showText" />

main.xml

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

Main.java

public void showText (View view) {

// - 宣告元件 // - 操作元件

}

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

Bridge to XML & JAVA

.xml .java

R.* 資源檔

findViewById

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

findViewById example

// 在 Main.java 中宣告 UI 中的 button1

Button button = (Button) findViewById (R.id.button1);

// 在 Main.java 中宣告 UI 中的 TextView

TextView textView = (TextView) findViewById (R.id.tv1);

Main.java

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

R.id.tv1？什麼東西？好像沒看過？TextView預設沒給定操作 id，加上它吧！

main.xml

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/button1" android:id="@+id/tv1" android:text="@string/hello_world" android:visibility="invisible" />

2013.05.022013.05.02

Add behavior (cont.)Add behavior (cont.)

3. Make the button show text3. Make the button show text

Main.java

public void showText(View view) {

Button button = (Button) findViewById(R.id.button1);

TextView tv1 = (TextView) findViewById(R.id.tv1);

tv1.setVisibility(View.VISIBLE);

}

2013.05.022013.05.02

Again, how do I know what method I can use?

Add behavior (cont.)Add behavior (cont.)

2013.05.022013.05.02

Go to Go to android developer siteandroid developer site• ReferenceReference• android.wigetandroid.wiget• TextViewTextView• Inherited XML AttributesInherited XML Attributes• Related MethodRelated Method• setVisibility(int)setVisibility(int)

Add behavior (cont.)Add behavior (cont.)

2013.05.022013.05.02

Thanks!