Android学习笔记-ScollView实现QQ消息界面滑动效果

最新推荐文章于 2021-05-31 11:53:58 发布

x_k

最新推荐文章于 2021-05-31 11:53:58 发布

阅读量857

点赞数 2

分类专栏： android 文章标签： ScrollView Android Adapter Listener

本文链接：https://blog.csdn.net/u011499992/article/details/50085559

版权

android 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

思路：

主界面布局中为ListView填充，然后创建layout.xml以及自定义适配器填充数据，xml文件中的root为HorizontalScrollView.并且分为左右两个LinearLayout，默认显示左边，实现滑动效果。

效果图：

MainAcitivity:

package com.edu.pro1125_qq_listview_scoll;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import com.edu.adapter.MyAdapter;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;

/**
 * 获取需要填充的数据
 * 自定义适配器
 * @author xukai
 * 2015年11月28日
 *
 */
public class MainActivity extends Activity {

	private ListView lv;
	private List<HashMap<String, Object>> list;
	private MyAdapter adapter;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		lv = (ListView) findViewById(R.id.main_lv);
		list = new ArrayList<>();//自己添加数据
		HashMap<String, Object> map = new HashMap<>();
		map.put("image", R.drawable.ic_launcher);
		map.put("name", "好友1");
		map.put("message", "晚上一起吃饭");
		list.add(map);
		map = new HashMap<>();
		map.put("image", R.drawable.ic_launcher);
		map.put("name", "好友2");
		map.put("message", "明天一起上班");
		list.add(map);
		map = new HashMap<>();
		map.put("image", R.drawable.ic_launcher);
		map.put("name", "好友3");
		map.put("message", "明天一起上班");
		list.add(map);
		map = new HashMap<>();
		map.put("image", R.drawable.ic_launcher);
		map.put("name", "好友4");
		map.put("message", "明天一起上班");
		list.add(map);
		//获取当前屏幕信息
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		adapter = new MyAdapter(list, MainActivity.this, dm);//自定义适配器
		lv.setAdapter(adapter);

	}

}

主界面就是一个ListView

    <ListView
        android:id="@+id/main_lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

用来填充的xml文件：lv_layout.xml:

注意消除滚动条

android:scrollbars="none"

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/hsv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none" >

    <LinearLayout
        android:id="@+id/lv_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/lv_layout_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <ImageView
                android:id="@+id/lv_layout_image"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/ic_launcher" >
            </ImageView>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lv_layout_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/lv_layout_tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="姓名" />

            <TextView
                android:id="@+id/lv_layout_tv_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="信息" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/lv_layout_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/lv_layout_2_btn_first"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/befirst" />

            <Button
                android:id="@+id/lv_layout_2_btn_delete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/delete" />
        </LinearLayout>
    </LinearLayout>
</HorizontalScrollView>

自定义的适配器：

1.实现了View.OnClickListener,View.OnTouchListener接口

2.继承BaseAdapter类

3.内部定义了一个ViewHolder类

package com.edu.adapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.content.Context;
import android.util.DisplayMetrics;
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.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.edu.pro1125_qq_listview_scoll.R;

/**
 * 自定义的适配器
 * @author xukai
 * 2015年11月27日
 *
 */
public class MyAdapter extends BaseAdapter implements View.OnClickListener,View.OnTouchListener {
	
	private List<HashMap<String, Object>> list; //数据
	private Context context;
	private DisplayMetrics dm;	//用于获取屏幕大小
	private View beforeView;
	private List<ViewHolder> holders = new ArrayList<>();
	
	public MyAdapter(List<HashMap<String, Object>> list,
			Context context,
			DisplayMetrics dm) {
		this.list = list;
		this.context = context;
		this.dm = dm;
	}
	
	@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(int position, View convertView, ViewGroup parent) {
		ViewHolder holder = null;
		if(convertView == null){
			LayoutInflater inflater = LayoutInflater.from(context);
			convertView = inflater.inflate(R.layout.lv_layout, null);
			holder = new ViewHolder();
			//绑定布局组件
			holder.hsv = (HorizontalScrollView) convertView.findViewById(R.id.hsv);
			holder.linearLayout = (LinearLayout) convertView.findViewById(R.id.lv_layout_1);
			holder.btnLayout = (LinearLayout) convertView.findViewById(R.id.lv_layout_2);
			holder.image = (ImageView) convertView.findViewById(R.id.lv_layout_image);
			holder.tvName = (TextView) convertView.findViewById(R.id.lv_layout_tv_name);
			holder.tvMessage = (TextView) convertView.findViewById(R.id.lv_layout_tv_message);
			
			//标记按钮
			holder.btnFirst = (Button) convertView.findViewById(R.id.lv_layout_2_btn_first);
			holder.btnFirst.setTag(position);
			holder.btnDelete = (Button) convertView.findViewById(R.id.lv_layout_2_btn_delete);
			holder.btnDelete.setTag(position);
			//设置标签
			convertView.setTag(holder);
		}else{
			//读取标签
			holder = (ViewHolder) convertView.getTag();
		}
		//记录所有的holder
		holders.add(holder);
		HashMap<String, Object> map = list.get(position);
		//设置左边的LinearLayout宽度为屏幕宽度
		LayoutParams params = holder.linearLayout.getLayoutParams();
		params.width = dm.widthPixels;
		//给每一项添加监听器
		holder.hsv.setOnTouchListener(this);
		holder.btnDelete.setOnClickListener(this);
		holder.btnFirst.setOnClickListener(this);
		
		holder.image.setImageDrawable(context.getResources()
				.getDrawable(Integer.parseInt(map.get("image")+"")));
		holder.tvName.setText(map.get("name")+"");
		holder.tvMessage.setText(map.get("message")+"");
		return convertView;
	}

	/**
	 * 需要的控件
	 */
	class ViewHolder{
		HorizontalScrollView hsv;
		LinearLayout linearLayout;
		LinearLayout btnLayout;
		ImageView image;
		TextView tvName;
		TextView tvMessage;
		Button btnFirst;
		Button btnDelete;
	}

	/**
	 * 监听按钮
	 */
	@Override
	public void onClick(View v) {
		int position = (int) v.getTag();
		switch (v.getId()) {
		case R.id.lv_layout_2_btn_first:
			HashMap<String,Object> map = null;
			map = list.get(position);
			list.remove(position);
			list.add(0, map);
			break;
		case R.id.lv_layout_2_btn_delete:
			list.remove(position);
			break;
		}
		notifyDataSetChanged();
		//还原所有
		ViewHolder holder = holders.get(position);
		holder.hsv.smoothScrollTo(0, 0);
	}

	/**
	 * 监听列表每项
	 */
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		float down = 0;//按下坐标
		float up = 0;//抬起坐标
		ViewHolder holder = (ViewHolder) v.getTag();
		switch (event.getAction()) {
		//按下动作
		case MotionEvent.ACTION_DOWN:
			down = event.getX();
			if(beforeView != null){
				//将上一次操作的滚动条恢复原样
				ViewHolder beforeHolder = (ViewHolder)beforeView.getTag();
				beforeHolder.hsv.smoothScrollTo(0, 0);
			}
			//这是一次测试
			break;
		//抬起动作
		case MotionEvent.ACTION_UP:
			//记录此次操作
			beforeView = v;
			up = event.getX();
			if(down == up){
				// 手势未移动，即点击
			}else{
				int scrol = holder.hsv.getScrollX();
				if(scrol < 50){
					//滚动距离小于屏幕1/4，回滚
					holder.hsv.smoothScrollTo(0, 0);
				}else{
					//移动到最后端
					holder.hsv.smoothScrollTo( 1000, 0);
				}
			}
			/**
			 * 返回true，表示不需要父组件再去处理此事件
			 * 返回false，不能实现上面的全滚动效果
			 */
			return true;
		}
		return false;
	}
	
}