项目中需要实现这么一个功能,界面右上角”编辑”,点击变成“完成”,同时ListView的item上显示出勾选图标,用户可以多选,选择以后点击完成,刷新列表
界面如下
思路:首先创建item布局,并且第一个item的布局与其他的不一样,属于一个ListView中有多种布局方式,这个功能在我上一篇博客里提到了
android ListView 动态切换Item布局
重点说一下多选功能的思路,第一,将item中的勾选控件也就是ImageView的Visibility设置为INVISIBLE,然后定义两个变量,一个是boolean类型,主要作用是决定是否显示勾选控件,第二个变量是数组或者ArrayList,这个主要是设置勾选控件的图片,这个可以自己决定,我这边设置了int,也就是图片资源对应的ID,在一些项目中,这个数组或者ArrayList也可以设置为INVISIBLE或者VISIBLE来决定是否显示某控件,这个比较自由。有了这两个变量,就可以在BaseAdapter中进行判断操作了,其中主要的代码是
final ViewHolder2 finalViewHolder = viewHolder2;
viewHolder2.imageViewDelete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(orderCheckIconList.get(position2)==R.mipmap.multiselect_no){
orderCheckIconList.set(position2, R.mipmap.multiselect_yes);
}else{
orderCheckIconList.set(position2, R.mipmap.multiselect_no);
}
finalViewHolder.imageViewDelete.setImageResource(orderCheckIconList.get(position2));
}
});
finalViewHolder.imageViewDelete.setImageResource(orderCheckIconList.get(position2));
if(isShowDeleteIcon){
finalViewHolder.imageViewDelete.setVisibility(View.VISIBLE);
}else{
finalViewHolder.imageViewDelete.setVisibility(View.INVISIBLE);
}
}
两种布局xml
my_order_top_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="@drawable/rect_white"
android:orientation="vertical">
<include layout="@layout/include_order_top" />
<TextView
android:id="@+id/id_textOrderCharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:drawableLeft="@mipmap/order_charge"
android:drawablePadding="10dp"
android:textColor="#555555"
android:textSize="14sp" />
<TextView
android:id="@+id/id_textOrderAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:drawableLeft="@mipmap/order_point"
android:drawablePadding="10dp"
android:textColor="#555555"
android:textSize="14sp" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#a2a2a2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/id_orderTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:textColor="#a2a2a2"
android:textSize="16sp" />
<TextView
android:id="@+id/id_orderAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:textColor="#a2a2a2"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="@+id/id_textViewCancelOrder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/rect_red2"
android:padding="10dp"
android:text="取消预约"
android:textColor="#ffffff"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
my_order_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="@drawable/rect_white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/id_textOrderCharge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:textSize="14sp"
android:textColor="#555555"
android:layout_weight="1"
android:drawableLeft="@mipmap/order_charge"
android:drawablePadding="10dp"/>
<ImageView
android:id="@+id/id_imageViewDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding = "10dp"
android:src="@mipmap/multiselect_no"/>
</LinearLayout>
<TextView
android:id="@+id/id_textOrderAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:textSize="14sp"
android:textColor="#555555"
android:drawableLeft="@mipmap/order_point"
android:drawablePadding="10dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#a2a2a2"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/id_orderTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="16sp"
android:textColor="#a2a2a2"
android:layout_margin="5dp"/>
<TextView
android:id="@+id/id_orderState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#a2a2a2"
android:layout_margin="5dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
include_order_top.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@mipmap/button_green"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/id_textOrderTime"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:drawableLeft="@mipmap/order_time1"
android:drawablePadding="10dp"
android:textColor="#ffffff"
android:textSize="14sp" />
<ImageView
android:id="@+id/id_imageOrderNavi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:src="@mipmap/order_navi" />
</LinearLayout>
</LinearLayout>
主要方法类
//我的预约
public class MyOrderActivity extends BaseActivity implements TitleLayout.titleLayoutClick {
TitleLayout titleLayout;
private TextView textOrderTime;
private PullToRefreshListView mPullRefreshListView;//列表
private MyOrderAdapter myOrderAdapter;
//列表中需要显示预约项的position,如果没有或者已取消,就设置为-1,如果有预约,则显示在第一个position
private int orderPosition = 0;
//预约列表删除图标多选数组,点击图标改变数组内的值,根据数组值来决定图标显示的图片
private ArrayList<Integer> orderCheckIconList = new ArrayList<>();
//根据标题右上角点击事件,确定是否显示删除选择图标,默认不显示,如果显示,将图标复原到全部未选择
private boolean isShowDeleteIcon=false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_order);
titleLayout = (TitleLayout) findViewById(R.id.id_titleLayot);
titleLayout.setTitle("我的预约");
titleLayout.setLinearRightText("编辑");
titleLayout.setLinearRightVisibility(1);
mPullRefreshListView = (PullToRefreshListView) findViewById(R.id.id_orderListView);
mPullRefreshListView.setMode(PullToRefreshBase.Mode.BOTH);
TextView textView = new TextView(MyOrderActivity.this);
textView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
textView.setText("没有查询到相应数据");
textView.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);
textView.setVisibility(View.GONE);
((ViewGroup) mPullRefreshListView.getParent()).addView(textView);
mPullRefreshListView.setEmptyView(textView);
final ILoadingLayout startLabels = mPullRefreshListView
.getLoadingLayoutProxy(true, false);
startLabels.setPullLabel("下拉刷新...");// 刚下拉时,显示的提示
startLabels.setRefreshingLabel("正在载入...");// 刷新时
startLabels.setReleaseLabel("放开刷新...");// 下来达到一定距离时,显示的提示
ILoadingLayout endLabels = mPullRefreshListView.getLoadingLayoutProxy(
false, true);
endLabels.setPullLabel("上拉刷新...");// 刚下拉时,显示的提示
endLabels.setRefreshingLabel("正在载入...");// 刷新时
endLabels.setReleaseLabel("放开刷新...");// 下来达到一定距离时,显示的提示
mPullRefreshListView.setOnRefreshListener(new PullToRefreshBase.OnRefreshListener2<ListView>() {
@Override
public void onPullDownToRefresh(PullToRefreshBase<ListView> refreshView) {
String label = DateUtils.formatDateTime(MyOrderActivity.this, System.currentTimeMillis(),
DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_SHOW_DATE | DateUtils.FORMAT_ABBREV_ALL);
// Update the LastUpdatedLabel
refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(label);
// Do work to refresh the list here.
// new GetDataTask().execute();
new getDataThread().start();
}
@Override
public void onPullUpToRefresh(PullToRefreshBase<ListView> refreshView) {
String label = DateUtils.formatDateTime(MyOrderActivity.this, System.currentTimeMillis(),
DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_SHOW_DATE | DateUtils.FORMAT_ABBREV_ALL);
// Update the LastUpdatedLabel
refreshView.getLoadingLayoutProxy().setLastUpdatedLabel(label);
// Do work to refresh the list here.
// new GetDataTask().execute();
new getDataThread().start();
}
});
/*
如果ListView中的单个Item的view中存在checkbox,button等view,会导致ListView.setOnItemClickListener无效,
事件会被子View捕获到,ListView无法捕获处理该事件.
解决方法:
在checkbox、button对应的view处加android:
focusable = "false"
android:
clickable = "false" android:
focusableInTouchMode = "false"
其中focusable是关键
*/
ListView actualListView = mPullRefreshListView.getRefreshableView();
actualListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
}
});
//测试数据
for(int i = 0;i<10;i++){
orderCheckIconList.add(R.mipmap.multiselect_no);
}
myOrderAdapter = new MyOrderAdapter(MyOrderActivity.this);
actualListView.setAdapter(myOrderAdapter);
}
loadUiHandler myHandler = new loadUiHandler();
private class getDataThread extends Thread {
@Override
public void run() {
super.run();
try {
Thread.sleep(2000);
} catch (InterruptedException e) {
e.printStackTrace();
}
Message message = new Message();
message.what = 0;
myHandler.sendMessage(message);
}
}
private class loadUiHandler extends Handler {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
myOrderAdapter.notifyDataSetChanged();
// Call onRefreshComplete when the list has been refreshed.
mPullRefreshListView.onRefreshComplete();
}
}
private class MyOrderAdapter extends BaseAdapter {
Context mContext;
LayoutInflater inflater;
final int TYPE_1 = 0;
final int TYPE_2 = 1;
//各个布局的控件资源
class ViewHolder1 {
TextView textOrderTime;
TextView textCancelOrder;
ImageView imageOrderNavi;
TextView textOrderCharge;
TextView textOrderAddress;
TextView orderTime;
TextView orderAddress;
}
class ViewHolder2 {
TextView textOrderCharge;
TextView textOrderAddress;
TextView orderTime;
TextView orderState;
ImageView imageViewDelete;
}
public MyOrderAdapter(Context context) {
mContext = context;
inflater = LayoutInflater.from(mContext);
}
@Override
public int getCount() {
return orderCheckIconList.size();
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public int getViewTypeCount() {
return 2;
}
@Override
public int getItemViewType(int position) {
if (position == orderPosition) {
return TYPE_1;
} else {
return TYPE_2;
}
}
@Override
public View getView( int position, View convertView, ViewGroup parent) {
int type = getItemViewType(position);
//第一个布局需要的VIewHolder
ViewHolder1 viewHolder1 = null;
//第二个布局需要的VIewHolder
ViewHolder2 viewHolder2 = null;
final int position2 = position;
if (convertView == null) {
if (type == TYPE_1) {//第一个布局加载
convertView = LayoutInflater.from(MyOrderActivity.this).inflate(R.layout.my_order_top_item, null);
viewHolder1 = new ViewHolder1();
textOrderTime = (TextView) convertView.findViewById(R.id.id_textOrderTime);
viewHolder1.textCancelOrder = (TextView) convertView.findViewById(R.id.id_textViewCancelOrder);
viewHolder1.imageOrderNavi = (ImageView) convertView.findViewById(R.id.id_imageOrderNavi);
viewHolder1.textOrderCharge = (TextView) convertView.findViewById(R.id.id_textOrderCharge);
viewHolder1.textOrderAddress = (TextView) convertView.findViewById(R.id.id_textOrderAddress);
viewHolder1.orderTime = (TextView) convertView.findViewById(R.id.id_orderTime);
viewHolder1.orderAddress = (TextView) convertView.findViewById(R.id.id_orderAddress);
convertView.setTag(viewHolder1);
} else if (type == TYPE_2) {//第二个布局加载
viewHolder2 = new ViewHolder2();
convertView = LayoutInflater.from(MyOrderActivity.this).inflate(R.layout.my_order_item, null);
viewHolder2.textOrderCharge = (TextView) convertView.findViewById(R.id.id_textOrderCharge);
viewHolder2.textOrderAddress = (TextView) convertView.findViewById(R.id.id_textOrderAddress);
viewHolder2.orderTime = (TextView) convertView.findViewById(R.id.id_orderTime);
viewHolder2.orderState = (TextView) convertView.findViewById(R.id.id_orderState);
viewHolder2.imageViewDelete = (ImageView) convertView.findViewById(R.id.id_imageViewDelete);
convertView.setTag(viewHolder2);
}
} else {
if (type == TYPE_1) {
viewHolder1 = (ViewHolder1) convertView.getTag();
} else if (type == TYPE_2) {
viewHolder2 = (ViewHolder2) convertView.getTag();
}
}
if (type == TYPE_1) {//对第一个布局的操作
viewHolder1.textOrderCharge.setText("");
viewHolder1.textOrderAddress.setText("");
viewHolder1.orderTime.setText("预约时间 2016-1-11");
viewHolder1.orderAddress.setText("");
//取消预约
viewHolder1.textCancelOrder.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
orderPosition = -1;
notifyDataSetChanged();
}
});
}
if (type == TYPE_2) {//对第二个布局的操作
viewHolder2.textOrderCharge.setText("");
viewHolder2.textOrderAddress.setText("");
viewHolder2.orderTime.setText("预约时间 2016-1-11");
viewHolder2.orderState.setText("已完成");
final ViewHolder2 finalViewHolder = viewHolder2;
viewHolder2.imageViewDelete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(orderCheckIconList.get(position2)==R.mipmap.multiselect_no){
orderCheckIconList.set(position2, R.mipmap.multiselect_yes);
}else{
orderCheckIconList.set(position2, R.mipmap.multiselect_no);
}
finalViewHolder.imageViewDelete.setImageResource(orderCheckIconList.get(position2));
}
});
finalViewHolder.imageViewDelete.setImageResource(orderCheckIconList.get(position2));
if(isShowDeleteIcon){
finalViewHolder.imageViewDelete.setVisibility(View.VISIBLE);
}else{
finalViewHolder.imageViewDelete.setVisibility(View.INVISIBLE);
}
}
return convertView;
}
}
@Override
public void leftViewClick() {
finish();
}
@Override
public void rightViewClick() {
for(int i=0;i<orderCheckIconList.size();i++){
orderCheckIconList.set(i,R.mipmap.multiselect_no);
}
if(!isShowDeleteIcon){//不显示,标题为编辑
isShowDeleteIcon=true;
titleLayout.setLinearRightText("完成");
}else{
isShowDeleteIcon=false;
titleLayout.setLinearRightText("编辑");
}
myOrderAdapter.notifyDataSetChanged();
}
}
TitleLayout.java
public class TitleLayout extends RelativeLayout {
TextView textViewContent;
LinearLayout linearLeft;
ImageView imageViewLeft;
LinearLayout linearRight;
ImageView imageViewRight;
TextView textViewRight;
private titleLayoutClick mListener;
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);
textViewContent = (TextView) findViewById(R.id.id_textviewContent);
linearLeft = (LinearLayout) findViewById(R.id.id_linearLeft);
imageViewLeft = (ImageView)findViewById(R.id.id_left);
linearRight = (LinearLayout) findViewById(R.id.id_linearRight);
imageViewRight = (ImageView)findViewById(R.id.id_right);
textViewRight = (TextView) findViewById(R.id.id_rightText);
try{
mListener = (titleLayoutClick) context;
}catch (Exception e){
e.printStackTrace();
}
linearLeft.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mListener != null) {
mListener.leftViewClick();
}
}
});
linearRight.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mListener != null) {
mListener.rightViewClick();
}
}
});
}
public void setTitle(String title) {
textViewContent.setText(title);
}
//设置右边图片
public void setLinearRightImage(int drawableID) {
imageViewRight.setBackgroundResource(drawableID);
}
//设置左边图片
public void setLinearLeftImage(int drawableID) {
imageViewLeft.setBackgroundResource(drawableID);
}
//设置右边文本
public void setLinearRightText(String rightTextString) {
textViewRight.setText(rightTextString);
}
//设置右边图片为可见,根据viewID判断文本与图片的显示,0显示图片,1显示文本
public void setLinearRightVisibility(int viewID) {
linearRight.setVisibility(View.VISIBLE);
if(viewID==0){
imageViewRight.setVisibility(View.VISIBLE);
textViewRight.setVisibility(View.INVISIBLE);
}else if(viewID==1){
textViewRight.setVisibility(View.VISIBLE);
imageViewRight.setVisibility(View.INVISIBLE);
}
}
public interface titleLayoutClick {
public void leftViewClick();//左图片点击
public void rightViewClick();//右边图片点击
}
}
title.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/id_top"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="@+id/id_linearLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true">
<ImageView
android:id="@+id/id_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:background="@mipmap/back" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<TextView
android:id="@+id/id_textviewContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:textColor="@color/white"
android:textSize="17sp"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_linearRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:visibility="invisible">
<ImageView
android:id="@+id/id_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp" />
<TextView
android:id="@+id/id_rightText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:textSize="14sp"
android:textColor="#ffffff"/>
</LinearLayout>
</RelativeLayout>