android基礎-ListView(資料展示元件)

阿新 • • 發佈：2020-12-02

ListView簡介

ListView使用者android後端資料在佈局中展示的元件，一般在Java程式碼中配合Adapter和使用。建立ArraryAdapter介面卡，通過泛型來指定要適配的資料型別，然後在建構函式中把要適配的資料傳入。

簡單列表 listview

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout 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:orientation="vertical"
        tools:context=".MainActivity">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center|top"
            android:textSize="20dp"
            android:text="下方listview可以上下滾動">
        </TextView>
        <ListView
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fastScrollEnabled="true">
        </ListView>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.listview_project;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    private String [] data = {"小貓","小狗","小豬","小鼠","小狼","小虎","小象","小猴","小鹿"};
    // 或  private String[] data = {"姓名：小明","性別：男","年齡：25","居住地：上海","郵箱：[email protected]"};
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //ArraryAdapter介面卡，通過泛型來指定要適配的資料型別，然後在建構函式中把要適配的資料傳入。
        ArrayAdapter list_data = new ArrayAdapter(MainActivity.this, android.R.layout.simple_list_item_1,data);
        // 定義介面佈局元素物件
        ListView list_View = (ListView) findViewById(R.id.text1);
        // 把資料傳輸到佈局介面
        list_View.setAdapter(list_data);
    }
}

帶標題的 listview

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
        <ListView
            android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ListView>
        <ListView
            android:id="@+id/text2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </ListView>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.listview_project;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.SimpleAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;


public class MainActivity extends ListActivity {
    // 模擬資料
    private String[] mListTitle = {"姓名", "性別", "年齡", "居住地", "郵箱"};
    private String[] mListStr = {"小明", "男", "25", "上海", "[email protected]"};
    // 宣告map型別陣列
    ArrayList mData= new ArrayList();;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 將模擬資料新增到map陣列中
        for(int i = 0; i < mListTitle.length; i++) {
            Map<String,Object> item = new HashMap<String,Object>();
            item.put("title", mListTitle[i]);
            item.put("text", mListStr[i]);
            mData.add(item);
        }
        // SimpleAdapter 介面卡，通過泛型來指定要適配的資料型別，然後在建構函式中把要適配的資料傳入。
        SimpleAdapter list_data = new SimpleAdapter(this,mData,android.R.layout.simple_list_item_2,
                new String[]{"title","text"},new int[]{android.R.id.text1,android.R.id.text2});
        setListAdapter(list_data);

    }
}

帶圖片和文字的 listview

使用 inflate 將佈局資源轉換 view物件

activity_main.xml 用“缸”字組詞主佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>
    
</RelativeLayout>

item.xml 圖文渲染模版示例佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="35pt"
    android:layout_marginTop="10dp"
    android:layout_marginRight="10dp"
    >

    <ImageView
        android:id="@+id/iv_con"
        android:layout_width="30pt"
        android:layout_height="30pt"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:src="@mipmap/ic_launcher">
    </ImageView>
    <TextView
        android:id="@+id/title_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/iv_con"
        android:layout_marginLeft="10dp"
        android:textSize="22dp"
        android:textStyle="bold"
        android:singleLine="true"
        android:ellipsize="end"
        android:text="這是一個安卓開發inflate練習的模擬標題資料標題">
    </TextView>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="20pt"
        android:layout_toRightOf="@id/iv_con"
        android:layout_below="@+id/title_text"
        android:layout_marginLeft="10dp"
        android:textSize="16dp"
        android:ellipsize="end"
        android:text="這是開發測試的內容，內容就隨便寫寫了，反正也是湊字數。等後期學到資料庫就從後端呼叫了，不用再寫模擬資料了">
    </TextView>
</RelativeLayout>

MainActivity.java

package com.example.listview_project;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 定義介面佈局元素物件
        ListView list_View = (ListView) findViewById(R.id.text1);

        // 把資料傳輸到佈局介面
        list_View.setAdapter(new MyAdapter());
    }
    // 資料介面卡方法
    private class MyAdapter extends BaseAdapter{

        @Override
        public int getCount() {
        // 返回顯示的行數
            return 20;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

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

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            View DisplayView;
            // listview 優化
            if (view == null){
                // 用“敢”字組詞通過 inflate 將 xml佈局資源 轉化為 view物件
                DisplayView = View.inflate(getApplicationContext(),R.layout.item,null);
            }else{
                // 複用歷史快取物件
                DisplayView = view;
            }
            return DisplayView;
        }
    }
}