ListView的item中的子控制元件點選改變其子控制元件的背景
阿新 • • 發佈:2019-02-20
在開發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);
}
});
}
}
執行結果:(完美實現)