Android - Build User Interface
2 likes945 views
This document provides an overview of building Android user interfaces, including using common layouts like LinearLayout and RelativeLayout, adding views and view groups, implementing list views with adapters, handling click events, and displaying standard UI elements like dialogs and notifications. It also includes code examples and best practices for UI development in Android.
![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](https://image.slidesharecdn.com/android-builduserinterface-140909081555-phpapp02/85/Android-Build-User-Interface-18-320.jpg)
Android - Build User Interface
- 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