Dynamic Layout in Android

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

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

一 加入現有 Layout 中 以 Button 為例

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

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

Code

結果

二 全部利用程式碼產生

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

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

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

Code @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); RelativeLayout LayMain=new RelativeLayout(this); LayMain.setBackgroundResource(R.drawable.ic_launcher); LinearLayout laycontent=ceatelayout(linearlayout.vertical); laycontent.setgravity(gravity.center_horizontal); laycontent.setid(3); ImageView imgv=new ImageView(this); imgv.setbackgroundresource(r.drawable.ic_launcher); RelativeLayout.LayoutParams forimgv=new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLay out.layoutparams.wrap_content); laycontent.addview(imgv, forimgv); TextView tv=new TextView(this); tv.settext(" 我是文字 "); tv.settextcolor(color.blue); tv.setid(4); HorizontalScrollView hrscrollview=new HorizontalScrollView(this); hrscrollview.setbackgroundcolor(color.rgb(139, 137, 137)) ; hrscrollview.setid(1);

Code // 建立一個群組按鈕 RadioGroup rdgrp= new RadioGroup(this); // 設定群組按鈕的格式 RadioGroup.LayoutParams forrdgrp = new RadioGroup.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); rdgrp.setorientation(radiogroup.horizontal); rdgrp.setlayoutparams(forrdgrp); // 第 1 個按鈕 RadioButton rdbtn1= new RadioButton(this); rdbtn1.setbuttondrawable(android.r.color.transparent); // 不要出現前面的圓點 rdbtn1.setgravity(gravity.center); rdbtn1.setwidth(110); rdbtn1.settextsize(18); Drawable drawabletop = getresources().getdrawable(r.drawable.ic_action_search); rdbtn1.setcompounddrawableswithintrinsicbounds(null, drawabletop, null, null); rdbtn1.settext(getresources().getstring(r.string.hello_world)); rdgrp.addview(rdbtn1); rdbtn1.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { //TODO Auto-generated method stub 對應事件 );

Code // 第 2 個按鈕 RadioButton rdbtn2= new RadioButton(this); rdbtn2.setbuttondrawable(android.r.color.transparent); // 不要出現前面的圓點 rdbtn2.setgravity(gravity.center); rdbtn2.setwidth(110); rdbtn2.settextsize(18); Drawable drawablebtn2 = getresources().getdrawable(r.drawable.ic_action_search); rdbtn2.setcompounddrawableswithintrinsicbounds(null, drawablebtn2, null, null); rdbtn2.settext(getresources().getstring(r.string.hello_world)); rdgrp.addview(rdbtn2); rdbtn2.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { //TODO Auto-generated method stub ); 這裡各位可以加入第三個 RadioButton!

// 將群組按鈕加入到水平選單 hrscrollview.addview(rdgrp); Code // 設定水平選單位於螢幕的最下方 RelativeLayout.LayoutParams forhrscrollview = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,RelativeLayout.LayoutParams.WRAP_C ONTENT); forhrscrollview.addrule(relativelayout.align_parent_bottom); // 將水平選單加入主畫面 LayMain.addView(hrscrollview,forhrscrollview); // 設定 TextView 在水平選單上面 RelativeLayout.LayoutParams fortv = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT,RelativeLayout.LayoutParams.WRAP_C ONTENT); fortv.addrule(relativelayout.above,hrscrollview.getid()); // 將 TextView 加入主畫面 LayMain.addView(tv,fortv); // 設定 LinearLayout 在 TextView 上面 RelativeLayout.LayoutParams forlaycontent = new RelativeLayout.LayoutParams (RelativeLayout.LayoutParams.FILL_PARENT,RelativeLayout.LayoutParams.WRAP_CONTENT); forlaycontent.addrule(relativelayout.above,tv.getid()); // 將 LinearLayout 加入主畫面 LayMain.addView(layContent,forlayContent); setcontentview(laymain); private LinearLayout ceatelayout (int iorientation) { LinearLayout lay = new LinearLayout(this); lay.setlayoutparams(new LayoutParams( android.view.viewgroup.layoutparams.fill_parent, android.view.viewgroup.layoutparams.wrap_content)); lay.setorientation(iorientation); return lay;

三 利用 CLASS 進行設計

先看看原始動態設定 這裡是重點 LinearLayout laymain = new LinearLayout(this); // 建立 LinearLayout LinearLayout.LayoutParams forlaymain = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); laymain.setorientation(linearlayout.vertical); // 垂直排列 laymain.setlayoutparams(forlaymain); //LinearLayout 背景 laymain.setbackgroundresource(r.drawable.ic_launcher); // 建立 TextView 物件 TextView tv1 = new TextView(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

result

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

改用 class 來進行動態版面設計 package com.alllayout; Package name 回傳類型 對應的 class public class CrateLayout { // 建立 View public View setview(context context){ LinearLayout laymain = new LinearLayout(context); // 建立 LinearLayout LinearLayout.LayoutParams forlaymain = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); laymain.setorientation(linearlayout.vertical); // 垂直排列 laymain.setlayoutparams(forlaymain); //LinearLayout 背景 laymain.setbackgroundresource(r.drawable.ic_launcher); // 建立 TextView 物件 TextView tv1 = new TextView(context); // 建立 TextView 物件 tv1.settextcolor(color.blue); // 文字顏色 tv1.settextsize(30); // 文字大小 tv1.settext(" 我是文字 "); tv1.setpadding(50, 30, 20, 0); // 文字距離左右多遠 laymain.addview(tv1); // 將 TextView 加入 laymain return laymain; 回傳 View

使用 class public class Main extends Activity { @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); //setcontentview(r.layout.main); 取消預設 view CrateLayout cl=new CrateLayout(); setcontentview(cl.setview(main.this)); 重新設定 view 使用 class

結果當然一樣

設定事件 加入一個按鈕到 class CrateLayout public Button bt1; 需要放最外層 // 建立按鈕 bt1=new Button(context); bt1.settext(" 按鈕 1"); laymain.addview(bt1); // 將按鈕加入 laymain

設定事件 @Override protected void 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 public void onclick(view v) { Toast.makeText(Main.this, " 動態版面設定 ", Toast.LENGTH_LONG).show(); );

每個物件的產生建立一個方法 修改 class CrateLayout

// 建立 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;

參數化 // 建立 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); return bt1;

長按選單 public class MainActivity extends Activity { @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); LinearLayout windowlayout = (LinearLayout) findviewbyid(r.id.windowlayout); // 註冊長按選單 this.registerforcontextmenu(windowlayout); @Override public boolean oncontextitemselected(menuitem item) { // 當使用者點選項目時, 所需的動作 Toast.makeText(this, " 您選擇的是 "+item.gettitle(), Toast.LENGTH_SHORT).show(); return super.oncontextitemselected(item); @Override public void 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, " 小夫 ");

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>