Android App Development

Layout, Widget, Fragment Android App Development

今日目標 - List, Detail • 一個Activity，兩個Fragment • 一個Fragment顯示List • 點選List裡的item開啟另一個Fragment • 顯示Detail • 按返回鍵回到List

XML • 可延伸標記式語言 • <tag attr="attr">value</tag> • tag 元素的名稱。 • attr屬性，前者是屬性名稱，後者是屬性的值，一個元素可以有多個屬性。 • value 內容，經常包覆其他元素 • <tag attr="attr" />

XML常見通用屬性 • android:id • android:layout_width (android:layout_height) • match_parent、wrap_content、或是精確的值 • android:layout_margin • 與其他元素之間的距離 • Left、Right、Top、Bottom • android:layout_padding • 自己的邊界往內的留白 • Left、Right、Top、Bottom

XML常見通用屬性 • android:layout_weight • 自動分配高度及寬度的權重 • android:layout_gravity • 自己的對齊方向 • center、left、right、top、bottom • android:gravity • 內容的對齊方向 • center、left、right、top、bottom • android:background • #AARRGGBB or #RRGGBB • @drawble/[resourceId]

Layout • FrameLayout • 最單純的排版 • 會將子元素全部疊起來顯示 • 類似PS的圖層

Layout • LinearLayout • 最常用的排版之一 • 依序排列 • android:orientation • horizontal or vertical • 搭配ScrollView

Layout • GridLayout • 表格狀的排版 • android:layout_row第幾列 • android:layout_column第幾行

Layout • RelativeLayout • 最複雜的排版 • 屬性描述元素之間的關係 • 用滑鼠拉吧

Widget • TextView • 顯示文字 • 可用html • Html.fromHtml([html]) • getText、setText • EditText • 輸入文字 • 存取方式同上

Widget • Button • 按鈕 • setOnClickListener • setOnLongClickListener • setOnTouchListener

Widget • DatePicker • 日期選擇器 • getYear、getMonth、getDayOfMonth • TimePicker • 時間選擇器（小時、分鐘） • getCurrentHour、getCurrentMinute • AnalogClock & DigitalClock • 顯示時間

Widget • ProgressBar • 進度條 • setMax、setProgress • SeekBar • 可讓使用者拖動的進度條 • setMax、getProgress

Widget • ScrollView • 垂直捲動 • HorizontalScrollView • 水平捲動

ListView • 清單 • 用於重複結構 • No ScrollView

ListView • 開新專案 • Blank Activity with Fragment • 在fragment_my.xml加入ListView • 打開MyActivity.java

ListView ListViewlistView = (ListView) rootView.findViewById(R.id.listView); ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, data); listView.setAdapter(adapter);

ListView • 必須透過Adapter顯示資料 • ArrayAdapter建構子參數： • Activity、樣式、資料 • setAdapter

Fragment • 小型Activity • LifeCycle

新增Fragment • New -> Fragment -> Fragment (Blank) • DetailFragment • 取消include interface callbacks • fragment_detail.xml • 新增Large Text

Fragment • DetailFragment.java • 處理TODO • Title、Detail • 善用shift+F6

開啟Fragment • 讓MyActivity implements AdapterView.OnItemClickListener • listView.setOnItemClickListener( (AdapterView.OnItemClickListener) getActivity()); • 當有項目被點選時，會去呼叫MyActivity的onItemClick

開啟Fragment @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { FragmentManagerfragmentManager = getFragmentManager(); FragmentTransactionfragmentTransaction = fragmentManager.beginTransaction(); DetailFragmentdetailFragment = DetailFragment.newInstance(data[position], detail[position]); fragmentTransaction.replace(R.id.container, detailFragment); fragmentTransaction.addToBackStack(null); fragmentTransaction.commit(); }

DetailFragment - 顯示 • 在onCreateView getActivity().getActionBar().setTitle(title); View rootView = inflater.inflate( R.layout.fragment_detail, container, false); TextViewtextView = (TextView) rootView.findViewById(R.id.detail); textView.setText(detail); return rootView;

DetailFragment • 關閉時將標題設定回去 @Override public void onPause() { super.onPause(); getActivity().getActionBar(). setTitle(R.string.app_name); }

Navigation Back @Override public void onActivityCreated( Bundle savedInstanceState) { super.onActivityCreated( savedInstanceState); getActivity().getActionBar(). setDisplayHomeAsUpEnabled(true); setHasOptionsMenu(true); }

關閉Fragment @Override public booleanonOptionsItemSelected( MenuItemitem) { switch (item.getItemId()) { case android.R.id.home: getActivity().getFragmentManager(). popBackStack(); return true; } return super.onOptionsItemSelected(item); }

DetailFragment • 在onPause getActivity().getActionBar(). setDisplayHomeAsUpEnabled(false);

成果

下集預告 • Menu • Dialog • Toast • Notification

Android App Development