在ListView的Item内容较多的情况下,实现拉动Item,滑出菜单
首先一个ListView控件:
activity_index_all_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/white" >
<ListView
android:id="@+id/list_comment_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="#d0d0d0"
android:dividerHeight="1px"
/>
</LinearLayout>
CommentFragment.java文件
package com.android.biclub.fragment;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.android.biclub.R;
import com.android.biclub.adapter.CommentDeleteAdapter;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;
public class CommentFragment extends Fragment {
private ListView list_comment_view;
private CommentDeleteAdapter mAdapter;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view = inflater.inflate(R.layout.activity_index_all_fragment,
container, false);
list_comment_view = (ListView) view.findViewById(R.id.list_comment_view);
DisplayMetrics metric = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; // 屏幕宽度(像素)
mAdapter = new CommentDeleteAdapter(getActivity(), metric.widthPixels);
list_comment_view.setAdapter(mAdapter);
return view;
}
}
CommentDeleteAdapter.java文件
package com.android.biclub.adapter;
import java.util.ArrayList;
import java.util.List;
import com.android.biclub.R;
import com.android.biclub.tools.Tools;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.HorizontalScrollView;
import android.widget.TextView;
public class CommentDeleteAdapter extends BaseAdapter implements View.OnClickListener {
// 数据源,用于存放颜色值的。
private List<Integer> colors;
private Context mContext;
// 屏幕宽度,由于我们用的是HorizontalScrollView,所以按钮选项应该在屏幕外
private int mScreentWidth;
private View view;
/**
* 构造方法
*
* @param context
* @param screenWidth
*/
public CommentDeleteAdapter(Context context, int screenWidth) {
// 初始化
mContext = context;
mScreentWidth = screenWidth;
// 填充list的内容模拟数据,否则应该异步执行
colors = new ArrayList<Integer>();
for (int i = 0; i < 15; i++) {
colors.add(R.color.white);
}
}
@Override
public int getCount() {
return colors.size();
}
@Override
public Object getItem(int position) {
return colors.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
// 如果没有设置过,初始化convertView
if (convertView == null) {
// 获得设置的view
convertView = LayoutInflater.from(mContext).inflate(R.layout.flexible_comment_delete_listview_item, parent, false);
// 初始化holder
holder = new ViewHolder();
holder.hSView = (HorizontalScrollView) convertView.findViewById(R.id.hsv);
holder.action = convertView.findViewById(R.id.ll_action);
holder.btOne = (Button) convertView.findViewById(R.id.button1);
holder.btTwo = (Button) convertView.findViewById(R.id.button2);
holder.btThree = (Button) convertView.findViewById(R.id.button3);
//holder.tvContent = (TextView) convertView.findViewById(R.id.tv);
// 设置内容view的大小为屏幕宽度,这样按钮就正好被挤出屏幕外
holder.content = convertView.findViewById(R.id.actionbar);
LayoutParams lp = holder.content.getLayoutParams();
lp.width = mScreentWidth;
convertView.setTag(holder);
} else {
// 有直接获得ViewHolder
holder = (ViewHolder) convertView.getTag();
}
// 把位置放到view中,这样点击事件就可以知道点击的是哪一条item
holder.btOne.setTag(position);
holder.btTwo.setTag(position);
holder.btThree.setTag(position);
// 设置监听事件
convertView.setOnTouchListener(new View.OnTouchListener()
{
@Override
public boolean onTouch(View v, MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
if (view != null) {
ViewHolder viewHolder1 = (ViewHolder) view.getTag();
viewHolder1.hSView.smoothScrollTo(0, 0);
}
case MotionEvent.ACTION_UP:
// 获得ViewHolder
ViewHolder viewHolder = (ViewHolder) v.getTag();
view = v;
// 获得HorizontalScrollView滑动的水平方向值.
int scrollX = viewHolder.hSView.getScrollX();
// 获得操作区域的长度
int actionW = viewHolder.action.getWidth();
// 注意使用smoothScrollTo,这样效果看起来比较圆滑,不生硬
// 如果水平方向的移动值<操作区域的长度的一半,就复原
if (scrollX < actionW / 2)
{
viewHolder.hSView.smoothScrollTo(0, 0);
}
else// 否则的话显示操作区域
{
viewHolder.hSView.smoothScrollTo(actionW, 0);
}
return true;
}
return false;
}
});
// 这里防止删除一条item后,ListView处于操作状态,直接还原
if (holder.hSView.getScrollX() != 0) {
holder.hSView.scrollTo(0, 0);
}
// 设置背景颜色,设置填充内容.
holder.content.setBackgroundResource(colors.get(position));
//holder.tvContent.setText("" + position);
// 设置监听事件
holder.btOne.setOnClickListener(this);
holder.btTwo.setOnClickListener(this);
holder.btThree.setOnClickListener(this);
return convertView;
}
/**
* ViewHolder
*
* @Title:
* @Description:主要是避免了不断的view获取初始化.
* @Author:yzy
* @Since:2013-10-22
*/
class ViewHolder {
public HorizontalScrollView hSView;
public View content;
//public TextView tvContent;
public View action;
public Button btOne;
public Button btTwo;
public Button btThree;
}
@Override
public void onClick(View v) {
int position = (Integer) v.getTag();
switch (v.getId()) {
case R.id.button1:
Tools.toast(mContext, "添加正在等待后台接口!");
break;
case R.id.button2:
Tools.toast(mContext, "删除正在等待后台接口!");
break;
case R.id.button3:
if (colors.get(position) == R.color.blue) {
colors.set(position, R.color.red);
} else {
colors.set(position, R.color.blue);
}
break;
default:
break;
}
// 刷新ListView内容
notifyDataSetChanged();
}
}
flexible_comment_delete_listview_item.xml文件
注意,这里引用了另一个页面,Item
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/hsv"
android:layout_width="wrap_content"
android:layout_height="80dip"
android:scrollbars="none" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<include
android:id="@+id/actionbar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
layout="@layout/flexible_comment_listview_item" />
<LinearLayout
android:id="@+id/ll_action"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#d0d0d0"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="添加"
android:textColor="#ffffff"
android:textSize="16sp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#FFA042"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="删除"
android:textColor="#ffffff"
android:textSize="16sp" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#F75000"
android:paddingLeft="20dip"
android:paddingRight="20dip"
android:text="变色"
android:textColor="#ffffff"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
flexible_comment_listview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/list_item_bg"
android:descendantFocusability="blocksDescendants" >
<LinearLayout
android:id="@+id/ll20"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:gravity="center_vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/user_icon_border_l" >
<ImageView
android:id="@+id/flexible_comment_handimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@drawable/user_icon_l"
android:scaleX="0.8"
android:scaleY="0.8" />
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<TextView
android:id="@+id/flexible_comment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="XXX"
android:textColor="#46B8F6"
android:textSize="11sp" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal" >
<TextView
android:id="@+id/flexible_comment_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="五分钟前"
android:textColor="#767F8B"
android:textSize="11sp" />
</RelativeLayout>
</LinearLayout>
<TextView
android:id="@+id/flexible_comment_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:maxLines="2"
android:text="这个活动真是太棒啦,这个活动真是太棒啦,流程是怎样的?快点开始吧"
android:textColor="#767F8B"
android:textSize="11sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
这个最主要的就是要适配手机屏幕,其他的,没有了,要做到适配,需要手动获取设备屏幕宽度,代码如下:
DisplayMetrics metric = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels;
注意,这里是Item填充整个屏幕宽度,如下图红框中的,为什么呢!因为红框里面的内容填充整个屏幕宽度了,后面的三个按钮就刚刚被挤出去隐藏掉,而不至于布局乱掉或者不能适配不同手机的情况!
以上是滑动拉出菜单在Item内容较多的情况下的处理办法,希望对大家有帮助。
有问题可以加我QQ:1453022932,一起探讨下.
好了,效果图如下,很简单的