1. 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

2. 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


3. 2013.05.022013.05.02
 srcsrc
•
javajava 原始碼原始碼
 res (resource)res (resource)
•
iconsicons
•
layoutlayout
•
string...etc.string...etc.
 libslibs 靜態函式庫靜態函式庫
Package ExplorerPackage Explorer

4. 2013.05.022013.05.02
LayoutLayout
Let's see RAW content (.xml)Let's see RAW content (.xml)

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

6. 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 oror texttext
fieldfield

7. 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 ，指向真正的字串內容

8. 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>

9. 2013.05.022013.05.02
Add behaviorAdd behavior
Scenerio:
畫面上有一顆按鈕，當按下按鈕
後，在其下方出現預藏的文字。

10. 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

11. 2013.05.022013.05.02
Add behavior (cont.)Add behavior (cont.)
1. Add a button1. Add a button
1-1. 利用滑鼠 曳新增一按鈕拖
1-2. 設定按鈕上的提示文字

12. 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?

13. 2013.05.022013.05.02
Add behavior (cont.)Add behavior (cont.)
2. Hide the text2. Hide the text
 Go toGo to android developer siteandroid developer site
•
ReferenceReference
•
android.wigetandroid.wiget
•
TextViewTextView
•
Inherited XML AttributesInherited XML Attributes
•
Attribute NameAttribute Name
•
android:visibilityandroid:visibility

14. 2013.05.022013.05.02
Add behavior (cont.)Add behavior (cont.)
Invisible
你看不到我，你看不到我
但是 ... 仍然佔據空間

15. 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 of3-2. write the code of showTextshowText
methodmethod

16. 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 of3-2. write the code of showTextshowText
methodmethod

17. 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

18. 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) {
// - 宣告元件
// - 操作元件
}

19. 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

20. 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

21. 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" />

22. 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);
}

23. 2013.05.022013.05.02
Again, how do I know
what method I can use?
Add behavior (cont.)Add behavior (cont.)

24. 2013.05.022013.05.02
 Go toGo 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.)

25. 2013.05.022013.05.02
Thanks!