Android 自定義ListView

每次想要製作ListView時, 都要先上網找尋文章, 才開始寫程式, 花費太多時間.

所以此篇文章主要是如何快速製作自定義的ListView.

Step 1: 定義Item內容

在此例子中, 使用一個ImageView和TextView來製作

在res/layout中新增 list_item_content.xml

內容如下

list_item_content.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="match_parent">

    <ImageView
            android:id="@+id/lock_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/lock"
            />
    <TextView
            android:id="@+id/ip_address"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/lock_icon"/>
</RelativeLayout>

Step 2: 建造Class來存放資料

新增Java Class : Device.java

Device.java

public class Device {
    private String ip_addr;

    public Device(String ip) {
        this.ip_addr = ip;
    }

    public String getIp_addr() {
        return ip_addr;
    }
}

Step 3: 建造Adapter

新增Java Class DeviceItemAdapter.java

DeviceItemAdapter.java

public class DeviceItemAdapter extends ArrayAdapter<Device> {
    private ArrayList<Device> mDevices;

    private LayoutInflater inflater;

    private class ViewHolder {
        ImageView lockIcon;
        TextView deviceIP;
    }

    public DeviceItemAdapter(Context context, ArrayList<Device> devices) {
        super(context, R.layout.list_item_content, devices);
        inflater = LayoutInflater.from(context);
        mDevices = devices;
    }

    @Override
    public int getCount() {
        return mDevices.size();
    }

    @Override
    public Device getItem(int index) {
        return mDevices.get(index);
    }

    @Override
    public long getItemId(int position) {
        return mDevices.indexOf(getItem(position));
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        Device device = getItem(position);
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.list_item_content, parent, false);
            holder = new ViewHolder();
            holder.deviceIP = (TextView) convertView.findViewById(R.id.ip_address);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.deviceIP.setText(device.getIp_addr());
        return convertView;
    }
}

Step 4: 設定ListView

主畫面的Layout中新增ListView

main_layout.xml

<ListView
        android:id="@+id/device_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/find_devices"
        android:layout_margin="5dp"
        android:divider="@color/colorPrimary"
        android:dividerHeight="1dp"/>

在Activity中設定ListView

MainActivity.java

ListView mDeviceList = (ListView) findViewById(R.id.device_list);
ArrayList<Device> mDevices = new ArrayList<>();
DeviceItemAdapter mDeviceItemAdapter = new DeviceItemAdapter(this.getApplicationContext(), mDevices);
mDeviceList.setAdapter(mDeviceItemAdapter);

更新Listview

MainActivity.java

Device device = new Device(deviceIP);
mDevices.add(device);
mDeviceItemAdapter.notifyDataSetChanged();