android app development

30
ANDROID APP DEVELOPMENT Layout, Widget, Fragment

Upload: mary-kirkland

Post on 03-Jan-2016

36 views

Category:

Documents


0 download

DESCRIPTION

Layout, Widget, Fragment. Android App Development. 今日目標 - List, Detail. 一個 Activity ,兩個 Fragment 一個 Fragment 顯示 List 點選 List 裡的 item 開啟另一個 Fragment 顯示 Detail 按返回鍵回到 List. XML. 可延伸標記式語 言 value tag 元素的名稱。 attr 屬性,前者是屬性名稱,後者是屬性的值,一個元素可以有多個屬性。 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Android App Development

ANDROID APP DEVELOPMENT

Layout, Widget, Fragment

Page 2: Android App Development

今日目標 - List, Detail

一個 Activity ,兩個 Fragment 一個 Fragment 顯示 List 點選 List 裡的 item 開啟另一個 Fragment 顯示 Detail 按返回鍵回到 List

Page 3: Android App Development

XML

可延伸標記式語言 <tag attr="attr">value</tag> tag 元素的名稱。 attr 屬性,前者是屬性名稱,後者是屬性

的值,一個元素可以有多個屬性。 value 內容,經常包覆其他元素 <tag attr="attr" />

Page 4: Android App Development

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

Page 5: Android App Development

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]

Page 6: Android App Development

Layout

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

Page 7: Android App Development

Layout

LinearLayout 最常用的排版之一 依序排列 android:orientation

horizontal or vertical 搭配 ScrollView

Page 8: Android App Development

Layout

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

Page 9: Android App Development

Layout

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

Page 10: Android App Development

Widget

TextView顯示文字可用 html

○ Html.fromHtml([html])getText 、 setText

EditText輸入文字存取方式同上

Page 11: Android App Development

Widget

Button按鈕setOnClickListenersetOnLongClickListenersetOnTouchListener

Page 12: Android App Development

Widget

DatePicker日期選擇器getYear 、 getMonth 、 getDayOfMonth

TimePicker時間選擇器(小時、分鐘)getCurrentHour 、 getCurrentMinute

AnalogClock & DigitalClock顯示時間

Page 13: Android App Development

Widget

ProgressBar進度條setMax 、 setProgress

SeekBar可讓使用者拖動的進度條setMax 、 getProgress

Page 14: Android App Development

Widget

ScrollView垂直捲動

HorizontalScrollView水平捲動

Page 15: Android App Development

ListView

清單 用於重複結構 No ScrollView

Page 16: Android App Development

ListView

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

Page 17: Android App Development

ListView

ListView listView = (ListView) rootView.findViewById(R.id.listView);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, data);

listView.setAdapter(adapter);

Page 18: Android App Development

ListView

必須透過 Adapter 顯示資料 ArrayAdapter 建構子參數:

Activity 、樣式、資料 setAdapter

Page 19: Android App Development

Fragment

小型 Activity LifeCycle

Page 20: Android App Development

新增 Fragment

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

Page 21: Android App Development

Fragment

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

Page 22: Android App Development

開啟 Fragment

讓 MyActivity implements AdapterView.OnItemClickListener

listView.setOnItemClickListener( (AdapterView.OnItemClickListener) getActivity());

當有項目被點選時,會去呼叫 MyActivity的 onItemClick

Page 23: Android App Development

開啟 Fragment@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

FragmentManager fragmentManager = getFragmentManager();

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

DetailFragment detailFragment = DetailFragment.newInstance(data[position], detail[position]);

fragmentTransaction.replace(R.id.container, detailFragment);

fragmentTransaction.addToBackStack(null);

fragmentTransaction.commit();

}

Page 24: Android App Development

DetailFragment - 顯示 在 onCreateView

getActivity().getActionBar().setTitle(title);

View rootView = inflater.inflate(R.layout.fragment_detail,

container, false);

TextView textView = (TextView) rootView.findViewById(R.id.detail);

textView.setText(detail);

return rootView;

Page 25: Android App Development

DetailFragment

關閉時將標題設定回去@Override

public void onPause() {

super.onPause();

getActivity().getActionBar(). setTitle(R.string.app_name);

}

Page 26: Android App Development

Navigation Back

@Override

public void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated( savedInstanceState);

getActivity().getActionBar(). setDisplayHomeAsUpEnabled(true);

setHasOptionsMenu(true);

}

Page 27: Android App Development

關閉 Fragment

@Override

public boolean onOptionsItemSelected( MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

getActivity().getFragmentManager(). popBackStack();

return true;

}

return super.onOptionsItemSelected(item);

}

Page 28: Android App Development

DetailFragment

在 onPause

getActivity().getActionBar().setDisplayHomeAsUpEnabled(false);

Page 29: Android App Development

成果

Page 30: Android App Development

下集預告 Menu Dialog Toast Notification