2016年3月1日 星期二

Android 首部曲-Customer ListView

Android 的開發者果然是佔大多數,至今java語言仍是排前三大,雖然PhoneGap 是一個不錯的開發工具,但是你想設計更複雜的介面,還是只能寫原生的Android APP的語言『JAVA,以下就介紹最常見的範例ListView

一、瞭解Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.test.MainActivity" >

    <ListView
        android:layout_width="match_parent"  
        android:layout_height="match_parent"
        android:id="@+id/list_view"       />
    <Button      
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:text="@string/self_destruct"
     android:onClick="selfDestruct"
     android:layout_alignParentBottom="true"
     android:layout_alignParentRight="true"   
       />   
</RelativeLayout>

每份Android文件中都有一份layout.xml是主畫面的設計畫面,你可以在這文件中加上任何的控件等等,也包括listview button 等等,以下常見的參數
 android:layout_width : 控件的寬度,
match_parent:佔滿整個版面
fill_parent: 佔滿整個版面
wrap_content:依你的內容物大小決定,例如文字型的按鈕,會依照文字行列決定控件的大小
android:layout_height: 控件的高度,參數同上
android:id="@+id/list_view"  : 控件的id名稱 ,它的id名稱為list_view  

二、建立客製化的ListView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="horizontal" >
     <ImageView
           android:id="@+id/icon"
           android:layout_width="50dp"
           android:layout_height="50dp"
           android:layout_marginBottom="5dp"
           android:layout_marginLeft="5dp"
           android:layout_marginRight="5dp"
           android:layout_marginTop="5dp"
           android:src="@drawable/ic_launcher" />
     <TextView
           android:id="@+id/Itemname"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textSize="20sp"
           android:paddingTop="5dp"/>
</LinearLayout>

為何已經有主版面的Layout為何就需要另外新增Layout?  因為想要客製化自己style 風格的ListView所以就需要另外新增,內容和主版面很像,這樣版中使用LinearLayout 就代表會像線性一樣放置控制,參數如下說明

android:orientation="horizontal" :  以水平的方式,放置控件,由左到右的方向
android:id="@+id/Itemname"  :這是設定id的名稱 @+id JAVA 就可以透過 r.id.Itemname 取得該物件,Itemname是你自訂的名稱,你可以改任何的名稱

以上的範本中,依序順序擺放位置,圖片會在文字的左邊,其他參數應該猜得到意思吧其中圖片的屬性android:src="@drawable/ic_launcher"  作者百思不得其解,原來Android目錄中res有五個都是以開頭為drawable命名的目錄,是擺放不同解析度的圖片喔,所以ic_launcher 就是圖片名稱啦~

三、建立客製化的ListView的類別
Pen.java :  //用來傳遞變數的物件
public class pen {
     public String  name
     public pen(String name)
    {
        this. name = name;      
    }
}

myAdapter.java
package com.example.test;
import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
public class myAdapter extends ArrayAdapter<pen> {
// 建立arrayList<object> 將資料帶進來,用來產生listivew 的資料
      public myAdapter(Context context, ArrayList<pen> pens) {
            super(context, 0, pens);
         }
      @Override
         public View getView(int position, View convertView, ViewGroup parent) {
            pen penObj = getItem(position);       // 取得pen 物件,
            if (convertView == null) {
//透過r.layout.listview 語法,取得在res/layout/listview.xml
               convertView = LayoutInflater.from(getContext()).inflate(R.layout.listview, parent, false);
            }
//透過r.id.ItemName 語法,取得在res/layout/listview.xml  id為【ItemName】的控件
            TextView itemName = (TextView) convertView.findViewById(R.id.Itemname);         
            itemName.setText(penObj.name); //填入文字      
            return convertView;
        }
}

為何有R 這個物件,原來是Android提供方便工具,我們在res在之前的listviewLayout中已經設定@id的名稱,所以透過r.id.XXX就可以取得該物件,當然也可以透過r.layout.名稱取得res/layout/ layout範本,這點是不熟Android開發方法的朋友們,需要注意的喔!!!

四、在主頁面的Activity 呼叫客製化的ListView

public class MainActivity extends Activity {
    private ListView listView;   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayList<pen> pens = new ArrayList<pen>();
        pens.add(new pen("鉛筆"));
        pens.add(new pen("原子筆"));
        pens.add(new pen("鋼筆"));
        pens.add(new pen("毛筆"));
        pens.add(new pen("鉛筆"));
       //建立pen 的物件集合,傳遞給自訂的listview
        myAdapter customerAdapter = new myAdapter(this,pens);       
//在主畫面的layout 取得listiview 控件
        listView=(ListView)findViewById(R.id.list_view);
//換成自訂的listiview範本
        listView.setAdapter(customerAdapter);     
    }
}

總結以上第一次的Android開發心得…   雖然不難但是有許多的參數要去查詢,Androiddeveloper 的文件非常的詳細,只要多多善加利用,你我也都是Android的開發者