效果如下图:当点击listview中的item时,下方会像抽屉一下显示一个新的布局出来,当重复点击同一个item或者点击别的item,上个展示出来的布局就会隐藏。
实现起来也很简单,就是在listview的item中添加一个监听事件,监听用户是否点击了item,点击了相应item则会在相应的下面显示布局。将界面中其他的以及显示的隐藏起来。下面看一下核心代码:
这个demo主要是给刚刚接触Android的小白看的。博主自己也是小白希望各位大牛指导指导!
item布局:
<?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="wrap_content"
android:orientation="vertical"
>
<RelativeLayout
android:id="@+id/list_item"
android:layout_width="match_parent"
android:layout_height="70dp">
<ImageView
android:id="@+id/imageview"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/tv_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/imageview"
android:text="这个是测试用条目" />
<ImageView
android:id="@+id/checkbox"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:background="@drawable/right_icon_selector"
android:clickable="true"
/>
</RelativeLayout>
<include layout="@layout/item_hide_layout"
/>
</LinearLayout>
下面点击后要显示的布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#bcb9b9"
android:id="@+id/ll_hide"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:visibility="gone"
>
<TextView
android:id="@+id/hide_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="收藏" />
<TextView
android:id="@+id/hide_2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="查看详情" />
<TextView
android:id="@+id/hide_3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="分享" />
<TextView
android:id="@+id/hide_4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="删除" />
<TextView
android:id="@+id/hide_5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="属性" />
</LinearLayout>
适配器:
package com.example.administrator.liststretchdemo.adapter;
import android.content.Context;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import com.example.administrator.liststretchdemo.R;
import java.util.ArrayList;
/**
* Created by Administrator on 2017/8/17.
*/
public class MyAdapter extends BaseAdapter implements View.OnClickListener {
private ArrayList<String> list = null;
private Context context = null;
private int clickPosition = -1;//记录用户点击了的item
public Boolean flag = false; //标识下拉view的显示状态
public MyAdapter(Context context, ArrayList<String> list){
this.context = context;
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
final MyViewHolder vh;
if (convertView == null) {
convertView = View.inflate(context, R.layout.item_layout, null);
vh = new MyViewHolder(convertView);
convertView.setTag(vh);
} else {
vh = (MyViewHolder) convertView.getTag();
}
vh.tv_test.setText(list.get(position));
//判断用户是不是点击了同一个item
if (clickPosition == position) {
//根据flage来处理下拉view是该消失 还是该展开状态
if(flag){
vh.ll_hide.setVisibility(View.GONE);
flag = false;
}else {
vh.ll_hide.setVisibility(View.VISIBLE);
flag = true;
}
} else {
//当填充的条目position不是刚才点击所标记的position时,让其隐藏,状态图标为false。
vh.ll_hide.setVisibility(View.GONE);
Log.e("listview","状态改变");
}
vh.hide_1.setOnClickListener(this);
vh.hide_2.setOnClickListener(this);
vh.hide_3.setOnClickListener(this);
vh.hide_4.setOnClickListener(this);
vh.hide_5.setOnClickListener(this);
vh.listtiem.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Toast.makeText(context, "被点了", Toast.LENGTH_SHORT).show();
clickPosition = position;//记录点击的position
notifyDataSetChanged();//刷新adapter重新填充条目。在重新填充的过程中,被记录的position会做展开或隐藏的动作,具体的判断看上面代码
//在此处需要明确的一点是,当adapter执行刷新操作时,整个getview方法会重新执行,也就是条目重新做一次初始化被填充数据。
}
});
vh.selectorImg.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (vh.selectorImg.isSelected()) {
vh.selectorImg.setSelected(false);
//取消选中时的业务代码
Log.e("but", "onClick: 没选中状态");
} else {
vh.selectorImg.setSelected(true);
//做当被选中时的业务代码
Log.e("but", "onClick: 选中状态");
}
}
});
return convertView;
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.hide_1:
Toast.makeText(context, "收藏", Toast.LENGTH_SHORT).show();
break;
case R.id.hide_2:
Toast.makeText(context, "查看详情", Toast.LENGTH_SHORT).show();
break;
case R.id.hide_3:
Toast.makeText(context, "分享", Toast.LENGTH_SHORT).show();
break;
case R.id.hide_4:
Toast.makeText(context, "删除", Toast.LENGTH_SHORT).show();
break;
case R.id.hide_5:
Toast.makeText(context, "属性", Toast.LENGTH_SHORT).show();
break;
}
}
class MyViewHolder {
View itemView;
TextView tv_test;
TextView hide_1, hide_2, hide_3, hide_4, hide_5;
ImageView selectorImg;
LinearLayout ll_hide;
RelativeLayout listtiem;
public MyViewHolder(View itemView) {
this.itemView = itemView;
tv_test = (TextView) itemView.findViewById(R.id.tv_test);
selectorImg = (ImageView) itemView.findViewById(R.id.checkbox);
hide_1 = (TextView) itemView.findViewById(R.id.hide_1);
hide_2 = (TextView) itemView.findViewById(R.id.hide_2);
hide_3 = (TextView) itemView.findViewById(R.id.hide_3);
hide_4 = (TextView) itemView.findViewById(R.id.hide_4);
hide_5 = (TextView) itemView.findViewById(R.id.hide_5);
ll_hide = (LinearLayout) itemView.findViewById(R.id.ll_hide);
listtiem = (RelativeLayout) itemView.findViewById(R.id.list_item);
}
}
}
主要代码就这些。这些代码主要参考了http://www.cnblogs.com/epmouse/p/5555264.html的代码来的,将demo改成了Android studio 的项目。
如果有什么问题希望大家一起探讨一起进步。博主也是刚接触Android的小白。
demo 下载:
GitHub
https://github.com/cp1153750171/ChenpCode.git