iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

在Android Studio 3.x版開發Android系統的開發記事系列 第 6

在Android Studio 3.x版開發Android系統的開發記事-如何自訂ListView列表項目

今天要來討論ListView如何自訂列表項目,ListView是很多APP在列表資料時的首選。不過,只有單純的文字是無法填滿開發者的。所以,才有可以自訂樣板的功能。

請在Android Studio 3.x版,新建一個專案。增加一個Empty Activity。在 res目錄中的layout目錄,加入一個Layout XML File檔案,如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20181012/20000953MAatLOsjx3.jpg

在自訂樣板的名稱,輸入「listlayout」,而Root Tag,改成「RelativeLayout」,比較好操作。
https://ithelp.ithome.com.tw/upload/images/20181012/20000953zGoNCdBb2C.jpg

出現自訂樣板後,再拉一個ImageView及二個TextView,來呈現出類似這樣的畫面,分別重新改id名稱。如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20181012/20000953Z39clp0rcR.jpg

https://ithelp.ithome.com.tw/upload/images/20181012/20000953xsSUkH9Jjt.jpg

在原來的空白Layout,將Layout改成LinearLayout,再拉一個ListView元件,排列如下圖所示,分別重新改id名稱。如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20181012/20000953TlVikKqfvA.jpg

https://ithelp.ithome.com.tw/upload/images/20181012/20000953rjNjqFFwLN.jpg

在res/drawable目錄,增加三個圖示檔案。來顯示在自訂樣板的ImageView。如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20181012/20000953TwE94AIIiu.jpg

接下來的就是寫程式的部份,主要是先寫一個自訂listlayoutadapter,繼承 BaseAdapter。再實做出 getCount、getItem、getitemid、getView函式。

再宣告三個陣列,來定義自訂樣板的資料來源。最後,跟ListView的結合在一起。完整的程式碼,如下:

ListView lsv_sports;

//宣告三個陣列,來定義自訂樣板的資料來源。
int[] aryimglist = new int[] {R.drawable.ball01,R.drawable.ball02,R.drawable.ball03};
String[] arysports = new String[] {"籃球","足球","排球"};
String[] aryengsports =  new String[] {"basketball", "soccer", "volleyball"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    lsv_sports = (ListView)findViewById(R.id.lsvsports);

    // 建立自訂的 Adapter
    listlayoutadapter adasports=new listlayoutadapter(this);

    // 設定 ListView 的資料來源
    lsv_sports.setAdapter(adasports);
}

//自訂listlayoutadapter,繼承 BaseAdapter。
//再實做出 getCount、getItem、getitemid、getView函式。
public class listlayoutadapter extends BaseAdapter {

    private LayoutInflater listlayoutInflater;

    public listlayoutadapter(Context c){
        listlayoutInflater = LayoutInflater.from(c);
    }

    @Override
    public int getCount() {
        return arysports.length;
    }

    @Override
    public Object getItem(int position) {
        return arysports[position];
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        convertView = listlayoutInflater.inflate(R.layout.listlayout,null);

        //設定自訂樣板上物件對應的資料。
        ImageView img_logo = (ImageView) convertView.findViewById(R.id.imglogo);
        TextView lbl_name = (TextView) convertView.findViewById(R.id.lblname);
        TextView lbl_engname = (TextView) convertView.findViewById(R.id.lblengname);

        img_logo.setImageResource(aryimglist[position]);
        lbl_name.setText(arysports[position]);
        lbl_engname.setText(aryengsports[position]);

        return convertView;

    }
}

在執行模擬器時,結果如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20181012/20000953c0KmzvTTFC.jpg


上一篇
在Android Studio 3.x版開發Android系統的開發記事-如何呼叫API第二彈
下一篇
在Android Studio 3.x版開發Android系統的開發記事-如何自訂AlertDialog
系列文
在Android Studio 3.x版開發Android系統的開發記事30

尚未有邦友留言

立即登入留言