Dynamic Layout in Android

建國科技大學 資管系饒瑞佶

2013/5 V1

Layout

• 多半都透過 res/layout/XML 格式設定來達成

• Android 是 OOP ，所以可以動態產生Layout

• 重點是 Layout 的階層關係 (Hierarchy)• 需要處理對應事件• 最後一樣用 setContentView 加入

Layout

一、加入現有 Layout 中

以 Button 為例

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

Code

取得容器

加入容器

產生物件

設定事件

Code

結果

二、全部利用程式碼產生

先看結果 RelativeLayout底圖

選單 + 靠最下

ImageView在 LinearLayout 裡面TextView

在選單上方

LinearLayout在 TextView 上方

Layout HierarchyRelativeLayout

TextView

Horizontal ScrollView

LinearLayoutImageView

RadioButton

RadioGroupRadioButton

RadioButton

Layout HierarchyRelative

LayoutlayMain

Linear Layout

layContent

TextView

HorizontalScrollView

tv

RadioGroup

Rdgrp

hrscrollview

RadioButton

RadioButton

RadioButton

RadioButton

RadioButton

RadioButton

RadioButton

rdbtn7rdbtn1 rdbtn2 rdbtn3 rdbtn4 rdbtn5 rdbtn6

ImageView

第二層

第三層

第四層

設定在 tv 上面

設定在 hrscrollview 上面

設定在最下面

imgv

addView

addView

addView

addView

Code

Code

對應事件

Code

Code

三、利用 CLASS 進行設計

先看看原始動態設定這裡是重點

result

改用 class 來進行動態版面設計• 主要是 class 對接的設定，使用的是

Context• 將上面的動態版面設定搬到 class 內• 另外設定一個 package 來管理

改用 class 來進行動態版面設計Package

name

對應的 class

回傳 View

回傳類型

使用 class

public class Main extends Activity {

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.main); CrateLayout cl=new CrateLayout(); setContentView(cl.setView(Main.this)); }

}

取消預設view

使用 class重新設定view

結果當然一樣

設定事件• 加入一個按鈕到 class CrateLayout

需要放最外層

設定事件@Overrideprotected 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(); } });}

每個物件的產生建立一個方法

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

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

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