1. 程式人生 > >ListView的item中的子控制元件點選改變其子控制元件的背景

ListView的item中的子控制元件點選改變其子控制元件的背景

在開發ListView的過程中,在其item裡面有時會整合很多子控制元件,比如Button、ImageView等等的。有時需要單單點選這個子控制元件,並讓這個子控制元件做出改變背景或狀態的反應。並且點選item的其他地方都不需要反應。接下來就這種需求進行實現。
實現效果圖:(當我們點選item中的開關時,會開和關的進行切換。點選item其他區域就無需響應)
這裡寫圖片描述

直接演示原始碼,先準備一個開關Relay類:

public class Relay {
    private String relayName;
    private boolean isRelay;

    public
Relay(String relayName, boolean isRelay) { super(); this.relayName = relayName; this.isRelay = isRelay; } public String getRelayName() { return relayName; } public void setRelayName(String relayName) { this.relayName = relayName; } public
boolean isRelay() { return isRelay; } public void setRelay(boolean isRelay) { this.isRelay = isRelay; } }

ListView的item佈局:注意佈局的android:descendantFocusability=”blocksDescendants” 屬性,還有點選控制元件的android:clickable=”true”和android:focusable=”false”屬性,這三個屬性不能缺少,具體意思自行查解。

<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="100dp" android:background="@drawable/listview_item_style" android:descendantFocusability="blocksDescendants" >
<TextView android:id="@+id/tvName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:text="開關" android:textSize="18sp" /> <ImageView android:id="@+id/imgRelay" android:layout_width="50dp" android:layout_height="50dp" android:layout_below="@id/tvName" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:clickable="true" android:focusable="false" android:src="@drawable/relay_off" /> </RelativeLayout>

item佈局的背景樣式listview_item_style.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="7dp" />
    <solid android:color="#d2d2d2"/>
</shape>

自定義一個ListView的介面卡:(其實這種實現難處理的地方就是點選時的響應處理,這裡使用了經典的介面回撥方式來處理)

public class RelayItemAdapter extends BaseAdapter {
    private List<Relay> mData;
     private LayoutInflater mInflater;

     public RelayItemAdapter(Context context, List<Relay> data) {
            this.mData = data;
            mInflater = LayoutInflater.from(context);
        }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mData.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return mData.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
         convertView = mInflater.inflate(R.layout.relay_item, null);
         if(convertView !=null){
             TextView tvName = (TextView) convertView.findViewById(R.id.tvName);
             ImageView imgRelay = (ImageView) convertView.findViewById(R.id.imgRelay);

             tvName.setText(mData.get(position).getRelayName());

             if(mData.get(position).isRelay()){
                 imgRelay.setImageResource(R.drawable.relay_on);
             }else{
                 imgRelay.setImageResource(R.drawable.relay_off);
             }

             imgRelay.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    listener.onRelaySwitch(position);

                }
            });
         }
        return convertView;
    }

    public void changeSwitch(int position){
        if(mData.get(position).isRelay()){
            mData.get(position).setRelay(false);
        }else{
            mData.get(position).setRelay(true);
        }
        notifyDataSetChanged();
    }


    //定義監聽介面
    public interface OnItemSwitchListener {  

        void onRelaySwitch(int position);  
    }  

    private OnItemSwitchListener listener;

    public void setOnItemSwitchListener(OnItemSwitchListener listener) {
        this.listener = listener;
    }    

}

主頁activity_main.xml的佈局:

<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:background="#ffffff"
    tools:context="com.itman.listviewdemo.MainActivity" >

    <ListView
        android:id="@+id/lvContent"
        android:layout_width="match_parent"
        android:dividerHeight="8dp"
        android:listSelector="#00000000"
        android:divider="#ffffff"
        android:layout_height="match_parent"
        android:layout_margin="5dp" />

</RelativeLayout>

MainActivity.java的程式碼:

public class MainActivity extends ActionBarActivity {
    private ListView lvContent;
    private RelayItemAdapter relayItemAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lvContent = (ListView) findViewById(R.id.lvContent);

        List<Relay> relayList = new ArrayList<>();
        relayList.add(new Relay("臥室",true));
        relayList.add(new Relay("客廳",false));
        relayList.add(new Relay("廚房",true));
        relayList.add(new Relay("廁所",false));

        relayItemAdapter = new RelayItemAdapter(MainActivity.this,relayList);
        lvContent.setAdapter(relayItemAdapter);

        relayItemAdapter.setOnItemSwitchListener(new RelayItemAdapter.OnItemSwitchListener() {

            @Override
            public void onRelaySwitch(int position) {

                relayItemAdapter.changeSwitch(position);
            }
        });

    }

}

執行結果:(完美實現)
這裡寫圖片描述