2013年10月11日 星期五

Android 動態新增 按鈕(Buton)、編輯框(EditText)、文字(TextView)

在Android中如何作到動態新增Button、EditText、TextView
廢話不多說,馬上開始看看程式碼

public class PersonalInfoDataMulti  extends BaseActivity{

EditText 
editName , editAddress , editPhone ,data_id;
Button 
confirm, cancel,newList,btnDelect;


LinearLayout 
ll_in_sv , objectLayout;

ArrayList<HashMap> 
objectList;

View 
buttonView;

@Override
    public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.personal_info);
buttonView = LayoutInflater.from(PersonalInfoDataMulti.this).inflate(R.layout.personal_object_button, null);

ll_in_sv = (LinearLayout)findViewById(R.id.ll_in_sv);
confirm = (Button)findViewById(R.id.info_dialog_confirm);
cancel = (Button)findViewById(R.id.info_dialog_cancel);
newList = (Button)buttonView.findViewById(R.id.info_dialog_new);

addListView();
setActions();
}

public void addListView(){
objectList = new ArrayList<HashMap>();
int btnId = 0;
ll_in_sv.removeAllViews();

//personal資料來源
for (int i = 0; i < personal.size(); i++) {

HashMap<String,EditText> editMap = new HashMap();
View view = LayoutInflater.from(PersonalInfoDataMulti.this).inflate(R.layout.personal_object, null); //物件來源
LinearLayout ll = (LinearLayout) view.findViewById(R.id.ll); //取得personal_object中LinearLayout

editName = (EditText)ll.findViewById(R.id.editText1); //獲取LinearLayout中各元件
editName.setText(); //放入personal相關資料來源

editPhone = (EditText)ll.findViewById(R.id.editText2);
editPhone.setText();//放入personal相關資料來源

editAddress = (EditText)ll.findViewById(R.id.editText3);
editAddress.setText();//放入personal相關資料來源

btnDelect = (Button)ll.findViewById(R.id.btn_del);
btnDelect.setOnClickListener(clickHandler);//設定監聽method
btnDelect.setId(btnId);//將按鈕帶入id 以供監聽時辨識使用
btnId++;
//將所有的元件放入map並存入list中
editMap.put("ADDRESS", editAddress);
editMap.put("NAME", editName);
editMap.put("PHONE", editPhone);
objectList.add(editMap);

//將上面新建的例元件新增到主頁面的ll_in_sv中
ll_in_sv.addView(view);
}
//最後一筆都放上新增按鈕
ll_in_sv.addView(buttonView);
}
 
private void setActions(){
//設定各元件的監聽
confirm.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
Log.i("msg", "!!確定!!");
.....//儲存方式
finish();
}
});

cancel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.i("msg", "!!返回!!");
finish();
}
});

newList.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.i("msg", "!!新增!!");
//在view中新增一筆新的list 你可以直接在 personal list 直接增加一筆然後再創立一次view
    for(HashMap<String, EditText> editMap:objectList){
//我們Map中是存放EditText物件所以取出之後就像一般的物件使用喔
        String name = editMap.get("NAME").getText().toString();
    }
addListView();
}
});
}

//刪除
private OnClickListener clickHandler= new OnClickListener() {
 
   @Override
       public void onClick(View v) {
   
    Button delBtn =  (Button)v; //在new 出所按下的按鈕
int id = delBtn.getId()//獲取被點擊的按鈕的id
objectList.get(id);//從 objectList得到此比資料
.....刪除list(略)
addListView(); //重新整理 view
   }
};
}

主要java 部份是這樣,接下來我們在加上xml檔
主要的xml
personal_info.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:orientation="vertical" >

<!--在此使用ScrollView 因為如果過多筆則可以讓使用者往下拉-->
    <ScrollView
    android:id="@+id/sv"
    android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="70dp"
android:layout_marginBottom="60dp"
android:layout_marginRight="40dp"
android:layout_marginLeft="40dp"
android:gravity="center">
   
<!-- ScrollView 中 只可已有一個Layout 所以我們將要新增的元件都新增到此 Layout中-->
<LinearLayout
android:id="@+id/ll_in_sv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:focusable="true" 
   android:focusableInTouchMode="true">

</LinearLayout>    

</ScrollView>

<!-- 此Layout是主頁面上所要固定的的元件 -->
<LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_alignParentLeft="true"
   android:gravity="center" >

   <Button
       android:id="@+id/info_dialog_cancel"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/input_btn_blue"
       android:text="@string/backtrack" />

   <Button
       android:id="@+id/info_dialog_confirm"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/input_btn_blue"
       android:text="@string/connfirmed" />
</LinearLayout>
</RelativeLayout>

好啦~我們的主要頁面也完成了
可是這時候還沒友好
還要在兩個xml
一個是要動態新增的xml物件

personal_object.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
<!-- 這裡的內容將會全部被動態新增到主頁面的ScrollView中
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/name"
            android:textColor="#DFFF"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/editText1"
            style="@style/v2_inputBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/phone"
            android:textColor="#DFFF"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/editText2"
            style="@style/v2_inputBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:singleLine="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/address"
            android:textColor="#DFFF"
            android:textSize="18sp" />

        <EditText
            android:id="@+id/editText3"
            style="@style/v2_inputBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:singleLine="true" />
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
    <Button
android:id="@+id/btn_del"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="@drawable/input_btn_blue"
android:text="@string/delete" />
<TextView
android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/v2_bg_line"
        android:textColor="#DFFF"/>

<EditText
            android:id="@+id/data_id"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone" />
</LinearLayout>

-->
</LinearLayout>

大致上到這裡是可以呈現我們所要的東西了
可是因為我在list的最後會加上一個新增的按鈕
所以還要在一個xml來顯示新增的按鈕

personal_object_button.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/addLl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <Button
android:id="@+id/info_dialog_new"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/input_btn_blue"
android:text="@string/added" />
</LinearLayout>

完成的畫面

點下新增按鈕之後
為什麼我不用listView來執行呢?
老實說我一開始使用listView執行  但是要輸入的時候 鍵盤跳上來editText的焦點就跑回 listView了
還要在點一下editText 焦點才會回來
要是我使用listView的話可能會被使用者罵爛東西吧
呵呵
而且還是乖乖的讓 listView 單純的只做資料呈現吧