[Android]讓ListView item被選擇時可以變換背景

看到標題時,一開始以為是個很簡單的問題,結果搞了我一、兩天試了n種方法,都無法解決。後來看了一些文章後,得到了一些解答,首先要明白一點,在觸碰模式下(Touch Mode)下是沒有selection state的,這是android developer blog的說明

In touch mode, there is no focus and no selection.

所以必須想一下有哪些作法,可以騙過android以達到selected的效果,想了想,可能還是要從自訂的layout來下手,果然神人vimalrajpara2006 有解答啦!就是自訂一個CheckAbleLayout來達到ListView有單選的效果,以下是我參考其原始碼修改而來

  • 首先自訂一個CheckAbleLayout
package com.example.listview.selected.row;

import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.util.AttributeSet;
import android.widget.Checkable;
import android.widget.LinearLayout;

public class CheckableLayout extends LinearLayout implements Checkable {
    private boolean mChecked;

    public CheckableLayout(Context context) {
        super(context);
    }

    public CheckableLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setChecked(boolean checked) {
        mChecked = checked;
        
        // Use this code for setting custom color in background of this layout
        // 當item被點選後,將其背景色改為藍色
        setBackgroundDrawable(checked ? new ColorDrawable(android.graphics.Color.BLUE) : null);
        
        // Use this code for setting custom image in background of this layout
        /*setBackgroundResource(checked ? R.drawable.ic_action_search
                : R.drawable.ic_launcher);*/
    }

    public boolean isChecked() {
        return mChecked;
    }

    public void toggle() {
        setChecked(!mChecked);
    }

}

  • 再來要將ListView的choiseMode設定為singleChoise
  • 最後設定相關的listener

這樣子就大功告成啦!

範例原始檔下載

下載圖片至ListView,並加入Cache機制

在使用android的listview應用時

多多少少會有要在listview放入圖片

如果今天您的應用需要從網路下載圖片至listview

並且加入cache機制

可以參考此範例 - LazyList

另外也有大大把LazyList做了優化,請參考Universal Image Loader for Android

如何控制ListView或ExpandableListView中間的分隔線(divider)

一般而言,正常的ListViewExpandableListView在畫面上都會有一條預設的分隔線(Divider)來區分不同列的項目,就像下圖所示,都會看到一條偏灰色的分隔線

而如果今天想要自訂分隔線的樣式的話像是不要顯示分隔線、要改變分隔線的高度、顏色…….等等等時,該怎麼做呢?android的layout描述檔提供很多相關的屬性可以設定,整理如下

和ListView相關的屬性如下

因為ExpandableListView是提供兩階層式的ListView,所以會有區分group, child,其相關的屬性如下

  • android:divider - 設定分隔線的顏色,如果要隱藏分隔線,此屬性要設定為”@null”
  • android:dividerHeight - 設定分隔線的高度,單位以dp為主
  • android:childDivider - 設定Child分隔線的顏色,如果隱藏分隔線,此屬性要設定為”@null”

在ExpandableListView使用divider和dividerHeight兩個屬性時要特別注意,因為這兩個屬性是繼承ListView而來,所以設定這兩個屬性是同步影響到group和child的分隔線樣式與高度。

以下為將android:divider=”@null”的截圖結果