给大家分享下仿QQ消息页面横向滑出菜单，Item内容较多的情况

在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;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubView 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);}}@Overridepublic int getCount() {return colors.size();}@Overridepublic Object getItem(int position) {return colors.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder;// 如果没有设置过,初始化convertViewif (convertView == null) {// 获得设置的viewconvertView = LayoutInflater.from(mContext).inflate(R.layout.flexible_comment_delete_listview_item, parent, false);// 初始化holderholder = 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 {// 有直接获得ViewHolderholder = (ViewHolder) convertView.getTag();}// 把位置放到view中,这样点击事件就可以知道点击的是哪一条itemholder.btOne.setTag(position);holder.btTwo.setTag(position);holder.btThree.setTag(position);// 设置监听事件convertView.setOnTouchListener(new View.OnTouchListener(){@Overridepublic 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:// 获得ViewHolderViewHolder 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;}@Overridepublic 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，一起探讨下.
好了，效果图如下，很简单的

给大家分享下仿QQ消息页面横向滑出菜单，Item内容较多的情况相关推荐

android qq右上加号,仿QQ空间点击加号弹出菜单特效
最近项目需要,前几天写了一个仿微信相册(包括编辑相册)功能,审核代码的时候发现同事要实现一个类似仿QQ空间点击加号弹出菜单特效,于是看了一些他的代码,我发现虽然他实现了功能,但是不够完善,所以我又花了 ...
Android高仿QQ消息列表、侧拉删除菜单按钮效果
目录(本篇字数:3000) 介绍 Item布局自定义存放Item父容器 Bug分析 ·一.解决滑动冲突二.解决Item点击事件的冲突三.限制只能有一个menu被打开博文续篇 ListV ...
仿QQ消息气泡拖拽效果
此次的自定义View是仿qq消息列表,消息气泡拖拽效果. 1.原理介绍:自定义view,绘制原始点圆,touch点圆,然后将两圆用贝塞尔曲线连接并填充. 2.应用WindowManager,将自定义v ...
Android仿QQ消息拖拽效果（二）
前言本文参考辉哥贝塞尔曲线 - QQ消息汽包拖拽,前面我们使用二阶贝塞尔曲线绘制了拖拽圆点效果Android仿QQ消息拖拽效果(一)(二阶贝塞尔曲线使用),这里我们在此基础之上实现仿QQ消息拖拽爆炸 ...
Android开发之高仿QQ消息侧拉删除
Android开发之高仿QQ消息侧拉删除 QQ消息的侧滑删除效果之炫酷,想必大家都见过吧,本人作为一名安卓开发人员,遇到如此炫酷的效果,怎能不研究一番呢,现本人已实现其基本功能,现将代码贴出,望各位大 ...
微信小程序之『仿 QQ 消息气泡拖拽消失』
转载:请写明掘金原文链接及作者名 '小小小' 一个潜心研究小程序QQ群:139128168 ← 点击加群今天带来的是仿QQ消息气泡拖拽消失特效,源码中很多地方还是有很多不足,希望大家一起齐心协力,给 ...
Kotlin 仿微信长按列表弹出菜单(动画)
一.测试实现: 二.项目: 仿微信长按列表弹出菜单代码,MainActivity.kt class MainActivity : AppCompatActivity(), AdapterView.O ...
iOS --高仿QQ空间页面
1.首先分析一下qq空间页面的主要2个功能: 1)随着TableView的向上滑动导航栏的颜色渐变,变化过程是从透明变成白色. 2)随着TableView的向下滑动,图片随着offset放大. 2.首 ...
【Android UI设计与开发】7.底部菜单栏（四）PopupWindow 实现显示仿腾讯新闻底部弹出菜单...
前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来 ...

给大家分享下仿QQ消息页面横向滑出菜单，Item内容较多的情况

给大家分享下仿QQ消息页面横向滑出菜单，Item内容较多的情况相关推荐

最新文章

热门文章