2014《聯合大學 - 行動應用》講課簡報 Build user interface on Android. 建立Android App的使用者界面。

1. Build
User
Interface
2014/9/9
Copyright
©
2014
MingHo
Chang

2. 張明禾
• C
• Android
App
• NodeJS
• Sencha
Touch
• Unity
2014/9/9
Copyright
©
2014
MingHo
Chang

3. Tips
• Debug
–
LogCat
– Log.d/Log.e/Log.i/Log.v/Log.w
– Log.d("TAG",
"Something’s
wrong!!!");
• Useful
Eclipse
shortcuts
for
Windows
Ac$on
Shortcut
Auto
Complete(Content
Assist)
Alt
+
/
Auto
Imports
Ctrl
+
ShiW
+
O
Refactoring
Alt
+
ShiW
+
R
2014/9/9
Copyright
©
2014
MingHo
Chang

4. Build
by
drag
&
drop
2014/9/9
Copyright
©
2014
MingHo
Chang

5. Build
by
programming
<Buon
android:id="@+id/myBuon"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
2014/9/9
Copyright
©
2014
MingHo
Chang

6. View
&
ViewGroup(Layout)
2014/9/9
Copyright
©
2014
MingHo
Chang

7. ViewGroup
• LinearLayout
• RelacveLayout
• ListView
• GridView
• …
2014/9/9
Copyright
©
2014
MingHo
Chang

8. View
• Buon/ImageBuon
• TextView
• EditText
• ImageView
• CheckBox
• …
2014/9/9
Copyright
©
2014
MingHo
Chang

9. 1st
implementacon
• Build
a
UI
like
• 都教授：textSize="20sp"
• File
-­‐>
New
-­‐>
Android
XML
File
2014/9/9–
File:
list_item.xmCoply
right
©
2014
MingHo
Chang

10. Standard
UI
Layout
• Accon
Bar
• Dialogs
• Status
Nocficacons
• Toasts
• …
2014/9/9
Copyright
©
2014
MingHo
Chang

11. Ac$vity
Lifecycle
2014/9/9
Copyright
©
2014
MingHo
Chang

12. 2nd
implementacon
• Print
every
lifecycle
method’s
name
in
LogCat
while
the
it
is
triggered.
• Example:
@Override
public
void
onStart()
{
super.onStart();
Log.i("Implementacon",
"onStart");
}
2014/9/9
Copyright
©
2014
MingHo
Chang

13. ViewGroup
-­‐
ListView
2014/9/9
Copyright
©
2014
MingHo
Chang

14. ViewGroup
-­‐
ListView
• layout.xml
<ListView
android:id="@+id/myListView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
2014/9/9
Copyright
©
2014
MingHo
Chang

15. ViewGroup
-­‐
ListView
• Default
list
item
layout
– android.R.layout.simple_list_item_1
– android.R.layout.simple_list_item_2
– android.R.layout.simple_list_item_single_choice
– android.R.layout.simple_list_item_mulcple_choice
– android.R.layout.simple_list_item_checked
• hp://developer.android.com/reference/
android/R.layout.html
2014/9/9
Copyright
©
2014
MingHo
Chang

16. ViewGroup
-­‐
ListView
2014/9/9
Copyright
©
2014
MingHo
Chang

17. ViewGroup
-­‐
ListView
• Set
list
content
by
adapter
– ArrayAdapter
– SimpleAdapter
– BaseAdapter
– SimpleCursorAdapter
2014/9/9
Copyright
©
2014
MingHo
Chang

18. ViewGroup
-­‐
ListView
• ArrayAdapter
-­‐
onCreate
String[]
values
=
new
String[]{
"item1",
"item2",
"item3",
"item4",
"item5"
};
ListView
list
=
(ListView)
findViewById(R.id.myListView);
ArrayAdapter
listAdapter
=
new
ArrayAdapter<String>
(this,
android.R.layout.simple_list_item_1,
values);
list.setAdapter(listAdapter);
2014/9/9
Copyright
©
2014
MingHo
Chang

19. 3rd
implementacon
• Create
a
list
with
10
classmates’
names.
2014/9/9
Copyright
©
2014
MingHo
Chang

20. ViewGroup
-­‐
ListView(Customize)
• Customize
list
item
layout.
2014/9/9
Copyright
©
2014
MingHo
Chang

21. ViewGroup
-­‐
ListView(Customize)
• Classmate.java
public
class
Classmate
{
public
String
name;
public
String
descripcon;
public
int
imageRes;
public
Classmate(String
n,
String
des,
int
res)
{
name
=
n;
descripcon
=
des;
imageRes
=
res;
}
}
2014/9/9
Copyright
©
2014
MingHo
Chang

22. ViewGroup
-­‐
ListView(Customize)
• BaseAdapter
–
CustomAdapter.java
public
class
CustomAdapter
extends
BaseAdapter
{
private
List<Classmate>
mList;
private
LayoutInflater
mInflater;
public
CustomAdapter(Context
context,
List<Classmate>
list)
mList
=
list;
mInflater
=
LayoutInflater.from(context);
}
}
2014/9/9
Copyright
©
2014
MingHo
Chang

23. ViewGroup
-­‐
ListView(Customize)
@Override
public
int
getCount()
{
return
mList.size();
}
@Override
public
Classmate
getItem(int
posicon)
{
return
mList.get(posicon);
}
2014/9/9
Copyright
©
2014
MingHo
Chang

24. ViewGroup
-­‐
ListView(Customize)
@Override
public
long
getItemId(int
posicon)
{
return
0;
}
private
class
ViewHolder
{
ImageView
imgView;
TextView
txtTitle;
TextView
txtDesc;
}
2014/9/9
Copyright
©
2014
MingHo
Chang

25. ViewGroup
-­‐
ListView(Customize)
@Override
public
View
getView(int
posicon,
View
convertView,
ViewGroup
parent)
{
ViewHolder
holder
=
null;
if
(convertView
==
null)
{
convertView
=
mInflater.inflate(R.layout.list_item,
null);
holder
=
new
ViewHolder();
holder.txtDesc
=
(TextView)
convertView.findViewById(R.id.desc);
holder.txtTitle
=
(TextView)
convertView.findViewById(R.id.ctle);
holder.imgView
=
(ImageView)
convertView.findViewById(R.id.icon);
convertView.setTag(holder);
}
else
{
holder
=
(ViewHolder)
convertView.getTag();
}
Classmate
c
=
getItem(posicon);
holder.txtTitle.setText(c.name);
//
TODO
return
convertView;
}
2014/9/9
Copyright
©
2014
MingHo
Chang

26. ViewGroup
-­‐
ListView(Customize)
• MainAccvity.java
public
class
MainAccvity
extends
Accvity
{
private
List<Classmate>
mClassmates;
…
}
2014/9/9
Copyright
©
2014
MingHo
Chang

27. ViewGroup
-­‐
ListView(Customize)
• MainAccvity.java
–
onCreate
mClassmates
=
new
ArrayList();
mClassmates
.add(new
Classmate("Mary",
"A
girl",
R.drawable.mary));
mClassmates
.add(new
Classmate("Tom",
"A
boy",
R.drawable.tom));
ListView
list
=
(ListView)
findViewById(R.id.myListView);
CustomAdapter
listAdapter
=
new
CustomAdapter(this,
mClassmates
);
list.setAdapter(listAdapter);
2014/9/9
Copyright
©
2014
MingHo
Chang

28. 4th
implementacon
• Build
the
list
above
with
pictures,
classmates’
names
and
descripcons.
2014/9/9
Copyright
©
2014
MingHo
Chang

29. Event
Listeners
2014/9/9
Copyright
©
2014
MingHo
Chang

30. Event
Listeners
• Views
– onClick
– onLongClick
– onTouch
• ListView
– onItemClick
2014/9/9
Copyright
©
2014
MingHo
Chang

31. ViewGroup
-­‐
ListView
• OnItemClickListener
private
OnItemClickListener
mItemClickListener
=
new
OnItemClickListener()
{
@Override
public
void
onItemClick(AdapterView<?>
adapter,
View
view,
int
posicon,
long
id)
{
//
TODO
}
};
list.setOnItemClickListener(mItemClickListener);
2014/9/9
Copyright
©
2014
MingHo
Chang

32. Drawable
• Place
images
in
res/drawable/
.
• Get
images
by
R.drawable.image_name
when
programming.
• Ex:
<ImageView
android:src="@drawable/image_name"
/>
ImageView
image;
image.setImageResource(R.drawable.image_name);
2014/9/9
Copyright
©
2014
MingHo
Chang

33. 5th
implementacon
• Toast
a
message
while
clicking
any
list
item.
2014/9/9
Copyright
©
2014
MingHo
Chang

34. The
End
2014/9/9
Copyright
©
2014
MingHo
Chang

35. ViewGroup
-­‐
LinearLayout
2014/9/9
Copyright
©
2014
MingHo
Chang

36. ViewGroup
-­‐
LinearLayout
<LinearLayout
android:id="@+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientacon="verccal"
>
…views…
</LinearLayout>
2014/9/9
Copyright
©
2014
MingHo
Chang

37. ViewGroup
-­‐
LinearLayout
<LinearLayout
…
android:orientacon="verccal"
>
<buon
…
android:layout_height="0dp"
android:layout_weight="2"
/>
<buon
…
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
2014/9/9
Copyright
©
2014
MingHo
Chang

38. ViewGroup
-­‐
LinearLayout
<LinearLayout
…
android:orientacon="horizontal"
>
<buon
…
android:layout_width="0dp"
android:layout_weight="2"
/>
<buon
…
android:layout_width="0dp"
android:layout_weight="1"
/>
</LinearLayout>
2014/9/9
Copyright
©
2014
MingHo
Chang

39. ViewGroup
-­‐
RelacveLayout
2014/9/9
Copyright
©
2014
MingHo
Chang

40. ViewGroup
-­‐
RelacveLayout
• android:layout_alignParentTop="true"
• android:layout_centerVerccal="true"
• android:layout_below="@id/myBuon"
• android:layout_toRightOf="@id/myBuon"
2014/9/9
Copyright
©
2014
MingHo
Chang

41. ViewGroup
-­‐
ListView
2014/9/9
Copyright
©
2014
MingHo
Chang

42. ViewGroup
-­‐
GridView
2014/9/9
Copyright
©
2014
MingHo
Chang

43. Standard
UI
Layout
–
Accon
Bar
2014/9/9
Copyright
©
2014
MingHo
Chang

44. Standard
UI
Layout
-­‐
Dialog
2014/9/9
Copyright
©
2014
MingHo
Chang

45. Standard
UI
Layout
-­‐
Nocficacon
2014/9/9
Copyright
©
2014
MingHo
Chang

46. Standard
UI
Layout
-­‐
Toast
Toast.makeText(getApplicaconContext(),
"msg",
Toast.LENGTH_SHORT).show();
2014/9/9
Copyright
©
2014
MingHo
Chang