Dynamic Layout in Android

1. Dynamic Layout in Android 建國科技大學 資管系 饒瑞佶 2013/5 V1

2. Layout • 多半都透過res/layout/XML格式設定來達成 • Android是OOP，所以可以動態產生Layout • 重點是Layout 的階層關係(Hierarchy) • 需要處理對應事件 • 最後一樣用setContentView加入Layout

3. 一、加入現有Layout中 以Button為例

4. XML畫面設定 按鈕全部都加到這

5. 設定事件 Code 取得容器 產生物件 加入容器

6. Code

7. 結果

8. 二、全部利用程式碼產生

9. 先看結果 RelativeLayout 底圖 LinearLayout 在TextView上方 ImageView 在LinearLayout裡面 TextView 在選單上方 選單+靠最下

10. Layout Hierarchy RelativeLayout LinearLayout ImageView TextView Horizontal ScrollView RadioGroup RadioButton RadioButton RadioButton

11. Layout Hierarchy Relative Layout layMain addView layContent Linear Layout 設定在tv上面 TextView tv addView 第二層 設定在hrscrollview上面 Horizontal ScrollView hrscrollview 設定在最下面 addView ImageView RadioGroup Rdgrp 第三層 imgv addView RadioButton RadioButton RadioButton RadioButton RadioButton RadioButton RadioButton rdbtn1 rdbtn2 rdbtn3 rdbtn4 rdbtn5 rdbtn6 rdbtn7 第四層

12. Code

13. Code 對應事件

14. Code

15. Code

16. 三、利用CLASS進行設計

17. 先看看原始動態設定 這裡是重點 LinearLayoutlayMain = newLinearLayout(this); //建立LinearLayout LinearLayout.LayoutParamsforlayMain = newLinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); layMain.setOrientation(LinearLayout.VERTICAL); //垂直排列 layMain.setLayoutParams(forlayMain); //LinearLayout背景 layMain.setBackgroundResource(R.drawable.ic_launcher); //建立TextView物件 TextView tv1 = newTextView(this); // 建立TextView物件 tv1.setTextColor(Color.BLUE); // 文字顏色 tv1.setTextSize(30); // 文字大小 tv1.setText("我是文字"); tv1.setPadding(50, 30, 20, 0); // 文字距離左右多遠 layMain.addView(tv1); //將TextView加入layMain setContentView(layMain); //設定最後的UI

18. result

19. 改用class來進行動態版面設計 • 主要是class對接的設定，使用的是Context • 將上面的動態版面設定搬到class內 • 另外設定一個package來管理

20. 改用class來進行動態版面設計 Package name 回傳類型 packagecom.AllLayout; publicclassCrateLayout { // 建立View public View setView(Context context){ LinearLayoutlayMain = newLinearLayout(context); //建立LinearLayout LinearLayout.LayoutParamsforlayMain = newLinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); layMain.setOrientation(LinearLayout.VERTICAL); //垂直排列 layMain.setLayoutParams(forlayMain); //LinearLayout背景 layMain.setBackgroundResource(R.drawable.ic_launcher); //建立TextView物件 TextView tv1 = newTextView(context); // 建立TextView物件 tv1.setTextColor(Color.BLUE); // 文字顏色 tv1.setTextSize(30); // 文字大小 tv1.setText("我是文字"); tv1.setPadding(50, 30, 20, 0); // 文字距離左右多遠 layMain.addView(tv1); //將TextView加入layMain returnlayMain; } } 對應的class 回傳View

21. 使用class publicclass Main extends Activity { @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.main); CrateLayout cl=new CrateLayout(); setContentView(cl.setView(Main.this)); } } 取消預設view 使用class 重新設定view

22. 結果當然一樣

23. 設定事件 • 加入一個按鈕到class CrateLayout publicButtonbt1; //建立按鈕 bt1=new Button(context); bt1.setText("按鈕1"); layMain.addView(bt1); //將按鈕加入layMain 需要放最外層

24. 設定事件 @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.main); CrateLayout cl=new CrateLayout(); setContentView(cl.setlayout(Main.this)); cl.bt1.setOnClickListener(new View.OnClickListener() { @Override publicvoid onClick(View v) { Toast.makeText(Main.this, "動態版面設定", Toast.LENGTH_LONG).show(); } }); }

25. 每個物件的產生建立一個方法 • 修改 classCrateLayout

26. // 建立View public View setView(Context context){ // 設定整個版面Layout LinearLayout lly=setLayout(context,LinearLayout.VERTICAL,LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT,R.drawable.back); //加入TextView lly.addView(setTextView(context,"我是文字",30)); //加入Button lly.addView(setButton(context,"按鈕1")); return lly; } //建立Layout private LinearLayout setLayout(Context context,int ori, int fillParent, int fillParent2, int icLauncher){ LinearLayout layMain = new LinearLayout(context); //建立LinearLayout LinearLayout.LayoutParams forlayMain = new LinearLayout.LayoutParams(fillParent, fillParent2); layMain.setOrientation(ori); //排列方向 layMain.setLayoutParams(forlayMain); //LinearLayout背景 layMain.setBackgroundResource(icLauncher); return layMain; }

27. 參數化 // 建立TextView private TextView setTextView(Context context,String txt,int fontsixe){ TextView tv1 = new TextView(context); // 建立TextView物件 tv1.setTextColor(Color.BLUE); // 文字顏色 tv1.setTextSize(fontsixe); // 文字大小 tv1.setText(txt); tv1.setPadding(50, 30, 20, 0); // 文字距離左右多遠 return tv1; } // 建立按鈕 private Button setButton(Context context,String txt){ bt1=new Button(context); bt1.setText(txt); returnbt1; }

28. 長按選單 publicclass MainActivity extends Activity { @Override protectedvoid onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); LinearLayout windowLayout = (LinearLayout) findViewById(R.id.windowLayout); //註冊長按選單 this.registerForContextMenu(windowLayout); } @Override publicboolean onContextItemSelected(MenuItem item) { //當使用者點選項目時，所需的動作 Toast.makeText(this, "您選擇的是"+item.getTitle(), Toast.LENGTH_SHORT).show(); returnsuper.onContextItemSelected(item); } @Override publicvoid onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo menuInfo) { //設定選單內容 super.onCreateContextMenu(menu, v, menuInfo); menu.add(0, 0, 0, "大雄"); menu.add(0, 1, 0, "小叮噹"); menu.add(0, 2, 0, "技安"); menu.add(0, 3, 0, "小夫"); } }

29. activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/windowLayout" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> </LinearLayout>