zoukankan      html  css  js  c++  java
  • Android 自己定义ScrollView ListView 体验各种纵向滑动的需求

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38950509。本文出自【张鸿洋的博客】

    1、概述

    群里的一个哥们有个需求是这种:问题;主要功能就是:1、循环的一个滑动;2、每次滑动结束。保持每一个Item的完整。然后我当时给他写了个Demo,全部代码都在Activity里面,后期看来其太恶心了,改动也不方便;貌似那哥们还由于那代码改动到12点。大大的赞一下这哥们的毅力,也深表歉意。今天特意把代码抽取成自己定义的ScrollView,然后提供一些回调出来;

    本博客首先介绍使用自己定义的ScrollView解决上面的问题,然后自己定义ListView实现每次拖动完毕后保持每一个Item的完整。

    关于横向滑动能够參考:

    Android 自己定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果 

    Android 自己定义RecyclerView 实现真正的Gallery效果

    横向和纵向非常相似哈,一个改写HorizontalScrollView,一个是ScrollView;一个改写ListView。一个是RecyclerView;不多详细需求还是有出入的。大家假设有这方面需求能够借鉴。

    关于横向有同学问怎样保证滑动结束实现单个Item完整。能够參考今天纵向的代码。

    2、自己定义ScrollView实现循环Item拖动

    现展示下效果图,然后解说下原理,最后分析下代码~三部曲~

    1、效果图:


    2、实现的原理

    a、依据用户提供的Adapter(主要就两个方法,getCount【决定多少个Item】,getView【每一个Item的样子】),依据getCount我会在初始化时,在ScrollView内部LinearLayout中加入相应数量的Item,当然也会依据数量平分屏幕高度;

    b、监听onTouch方法。当用户触发ACTION_MOVE时,屏幕尾随用户手指上面移动,当达到顶部时,会动态为顶部加入一个Item,同一时候移除底部最后一个Item;用户滑动到达底部也一样,底部动态加入一个Item,顶部第一个移除。ScrollView内会始终维持用户指定数量+1个Item,为什么加1呢,由于拖动过程中最多会显示+1个Item(第一个一半,最后一个一半)

    c、监听ACTION_UP。推断假设当然显示小于半个。缩回去。大于半个则慢慢显示出完整的Item;

    3、代码分析

    首先我们定义一个Adapter。用户给用户设置每一个Item的样子以及个数;相似ListView的Adapter

    	/**
    	 * 适配器
    	 * @author zhy
    	 *
    	 */
    	public static abstract class Adapter
    	{
    		public abstract View getView(SingleItemScrollView parent, int pos);
    
    		public abstract int getCount();
    	}
    

    构造方法中得到屏幕的高度

    	public SingleItemScrollView(Context context, AttributeSet attrs)
    	{
    		super(context, attrs);
    
    		// 计算屏幕的高度
    		WindowManager wm = (WindowManager) context
    				.getSystemService(Context.WINDOW_SERVICE);
    		DisplayMetrics outMetrics = new DisplayMetrics();
    		wm.getDefaultDisplay().getMetrics(outMetrics);
    		mScreenHeight = outMetrics.heightPixels;
    		mScreenHeight -= getStatusHeight(context);
    
    	}

    onMeasure中对Item进行加入,以及设置高度

    	@Override
    	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    	{
    		//防止多次调用
    		if (!flag)
    		{
    			mContainer = (ViewGroup) getChildAt(0);
    
    			//依据Adapter的方法。为容器加入Item
    			if (mAdapter != null)
    			{
    				mItemCount = mAdapter.getCount();
    				mItemHeight = mScreenHeight / mItemCount;
    				mContainer.removeAllViews();
    				for (int i = 0; i < mAdapter.getCount(); i++)
    				{
    					addChildView(i);
    				}
    			}
    			addChildView(0);
    		}
    
    		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    	}
    
    	/**
    	 * 在容器末尾加入一个Item
    	 * @param i
    	 */
    	private void addChildView(int i)
    	{
    		View item = mAdapter.getView(this, i);
    		//设置參数
    		android.view.ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
    				android.view.ViewGroup.LayoutParams.MATCH_PARENT, mItemHeight);
    		item.setLayoutParams(lp);
    		//设置Tag
    		item.setTag(i);
    		//加入事件
    		item.setOnClickListener(this);
    		mContainer.addView(item);
    	}

    接下来就是复写onTouchEvent

    @Override
    	public boolean onTouchEvent(MotionEvent ev)
    	{
    		flag = true;
    		int action = ev.getAction();
    		int scrollY = getScrollY();
    		switch (action)
    		{
    		case MotionEvent.ACTION_MOVE:
    			Log.e("TAG", "scrollY = " + scrollY);
    			// 表示此时ScrollView的顶部已经达到屏幕顶部
    			if (scrollY == 0)
    			{
    				addChildToFirst();
    			}
    			// ScrollView的顶部已经到达屏幕底部
    			if (Math.abs(scrollY - mItemHeight) <= mItemCount)
    			{
    				addChildToLast();
    			}
    
    			break;
    		case MotionEvent.ACTION_UP:
    			checkForReset();
    			return true;
    		default:
    			break;
    		}
    		return super.onTouchEvent(ev);
    	}
    	
    	/**
    	 * 在底部加入一个View,并移除第一个View
    	 */
    	private void addChildToLast()
    	{
    		Log.e("TAG", "addChildToLast");
    		int pos = (Integer) mContainer.getChildAt(1).getTag();
    		addChildView(pos);
    		mContainer.removeViewAt(0);
    		this.scrollTo(0, 0);
    	}
    
    	/**
    	 * 在顶部加入一个View。并移除最后一个View
    	 */
    	protected void addChildToFirst()
    	{
    		Log.e("TAG", "addChildToFirst");
    		int pos = (Integer) mContainer.getChildAt(mItemCount - 1).getTag();
    		addChildView(pos, 0);
    		mContainer.removeViewAt(mContainer.getChildCount() - 1);
    		this.scrollTo(0, mItemHeight);
    	}
    
    	/**
    	 * 检查当前getScrollY,显示完毕Item,或者收缩此Item
    	 */
    	private void checkForReset()
    	{
    		int val = getScrollY() % mItemHeight;
    		if (val >= mItemHeight / 2)
    		{
    			smoothScrollTo(0, mItemHeight);
    		} else
    		{
    			smoothScrollTo(0, 0);
    		}
    
    	}
    
    能够看到ACTION_MOVE中我们仅仅推断是否到达顶部或者底部。

    if (Math.abs(scrollY - mItemHeight) <= mItemCount)这种推断,主要是由于,操心用户设置的个数拿屏幕的高度来除并非整除的。整数除整数难免有个四舍五入什么的,所以我设置了一个小的范围。

    当到达顶部的时候。顶部事实上已经没有Item了,此时我们为顶部加入一个Item。同一时候移除底部的最后一个。而且我们须要将scrollY移动到未加入前的位置;给用户一个无缝加入的体验;

    到达底部同理了~

    当ACTION_UP的时候,我们对当前的scrollY进行检查,假设对Item高度取余后小于Item的高度的一半,小于Item的高度的一半意味中隐藏部分是小于一般的,而显示部分是大于一半的,于是我们smoothScrollTo(0, 0);把完整的Item显示出来。反之则反之;


    取余以后得到的值事实上去超出屏幕的部分,也就是隐藏的部分,它要是大于一半。那么显示部分就小于一半;反之则反之;

    MainActivity中用户的使用

    package com.example.zhy_wangandroid_hownoon;
    
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.List;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.Window;
    import android.widget.ImageView;
    import android.widget.Toast;
    
    import com.example.zhy_wangandroid_hownoon.SingleItemScrollView.Adapter;
    import com.example.zhy_wangandroid_hownoon.SingleItemScrollView.OnItemClickListener;
    
    public class MainActivity extends Activity
    {
    	private SingleItemScrollView mScrollView;
    	private Adapter mAdapter;
    	private LayoutInflater mInflater;
    	private List<Bean> mDatas = new ArrayList<Bean>(Arrays.asList(//
    			new Bean(R.drawable.icon_about, Color.rgb(123, 34, 45)),//
    			new Bean(R.drawable.icon_map, Color.rgb(12, 34, 145)),//
    			new Bean(R.drawable.icon_message, Color.rgb(177, 234, 145)),//
    			new Bean(R.drawable.icon_oil, Color.rgb(88, 134, 145))//
    			));
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState)
    	{
    		super.onCreate(savedInstanceState);
    		requestWindowFeature(Window.FEATURE_NO_TITLE);
    		setContentView(R.layout.activity_main);
    
    		mInflater = LayoutInflater.from(this);
    
    		mScrollView = (SingleItemScrollView) findViewById(R.id.id_scrollview);
    		mAdapter = new Adapter()
    		{
    
    			@Override
    			public View getView(SingleItemScrollView parent, int pos)
    			{
    				View view = mInflater.inflate(R.layout.item, null);
    				ImageView iv = (ImageView) view.findViewById(R.id.id_title);
    				iv.setImageResource(mDatas.get(pos).getResId());
    				view.setBackgroundColor(mDatas.get(pos).getColor());
    				return view;
    			}
    
    			@Override
    			public int getCount()
    			{
    				return 4;
    			}
    			
    		};
    
    		mScrollView.setAdapter(mAdapter);
    
    		mScrollView.setOnItemClickListener(new OnItemClickListener()
    		{
    			@Override
    			public void onItemClick(int pos, View view)
    			{
    				Toast.makeText(getApplicationContext(), pos + "",
    						Toast.LENGTH_SHORT).show();
    			}
    		});
    	}
    
    }
    

    用户拿到控件,设置Adapter,在getView里面设置数据以及决定Item的样子。提供一个setOnItemClickListener的回调,供用户设置点击每一个Item的处理。和ListView的使用风格基本是一致的。

    4、布局文件

    主布局文件:

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/id_scrollview"
        android:scrollbars="none"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    
        <LinearLayout
            android:id="@+id/id_container"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
        </LinearLayout>
    
    </ScrollView>

    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="match_parent" android:background="#000000" android:gravity="center" > <ImageView android:id="@+id/id_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitCenter" android:src="@drawable/icon_about" /> </LinearLayout>



    3、自己定义ListView使用滑动结束完整显示Item

    1、效果图:


    2、实现原理

    先分析一下:

    想要结束显示完整的。那么有个前提是,你的Item初始化一屏幕的时候应该刚好是固定数量完整的Item;

    这样,就须要一个參数指定一屏幕显示多少个Item;同一时候会依据Item数量为每一个Item设置高度。

    存在一个问题,Item布局是在Adapter中设置的。也就是说。我们必须在getView中设置这个高度,可是这个高度实在ListView中计算的,所以对外发布出这个高度;

    最后无非就是监听滚动结束后。推断当前显示是否是完整的,假设是则,假设不是则;

    3、实现代码

    a、自己定义属性

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <attr name="itemCount" format="integer" />
    
        <declare-styleable name="MyListView">
            <attr name="itemCount" />
        </declare-styleable>
    
    </resources>

    非常easy就一个属性。

    b、布局文件:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:zhy="http://schemas.android.com/apk/res/com.example.zhy_wangandroid_hownoon"
        android:id="@+id/id_scrollview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
    
        <com.example.zhy_wangandroid_hownoon.MyListView
            android:id="@+id/id_lv"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:divider="@null"
            zhy:itemCount="8" >
        </com.example.zhy_wangandroid_hownoon.MyListView>
    
    </LinearLayout>

    c、MyListView

    package com.example.zhy_wangandroid_hownoon;
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.util.AttributeSet;
    import android.util.DisplayMetrics;
    import android.util.Log;
    import android.view.WindowManager;
    import android.widget.AbsListView;
    import android.widget.AbsListView.OnScrollListener;
    import android.widget.ListView;
    
    public class MyListView extends ListView implements OnScrollListener
    {
    	private static final String TAG = MyListView.class.getSimpleName();
    
    	/**
    	 * 每一个屏幕显示多少个Item
    	 */
    	private int mItemCountInOneScreen ;
    	/**
    	 * 每一个Item的高度
    	 */
    	private int mItemHeight;
    	/**
    	 * 记录第一个显示的Item
    	 */
    	private int mFirstVisibleItem;
    
    	public MyListView(Context context, AttributeSet attrs)
    	{
    		this(context, attrs, 0);
    
    	}
    	/**
    	 * 构造方法中拿到自己定义属性ItemCount,计算每一个Item高度
    	 * @param context
    	 * @param attrs
    	 * @param defStyle
    	 */
    	public MyListView(Context context, AttributeSet attrs, int defStyle)
    	{
    		super(context, attrs, defStyle);
    
    		WindowManager wm = (WindowManager) context
    				.getSystemService(Context.WINDOW_SERVICE);
    		DisplayMetrics outMetrics = new DisplayMetrics();
    		wm.getDefaultDisplay().getMetrics(outMetrics);
    	
    		
    		//获取MyListView_itemCount
    		TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
    				R.styleable.MyListView, defStyle, 0);
    
    		int n = a.getIndexCount();
    		for (int i = 0; i < n; i++)
    		{
    			int attr = a.getIndex(i);
    			switch (attr)
    			{
    			case R.styleable.MyListView_itemCount:
    				mItemCountInOneScreen = a.getInt(attr, 6);
    				break;
    			}
    		}
    		a.recycle();
    		
    		//计算每一个Item高度
    		mItemHeight = (outMetrics.heightPixels - getStatusHeight(context))
    				/ mItemCountInOneScreen;
    		
    		//设置一个滚动监听
    		setOnScrollListener(this);
    
    		Log.e(TAG, mItemCountInOneScreen + "");
    	}
    	
    	
    
    	@Override
    	public void onScrollStateChanged(AbsListView view, int scrollState)
    	{
    		//滚动结束
    		if (scrollState == OnScrollListener.SCROLL_STATE_IDLE)
    		{
    			// Log.e(TAG, getChildAt(0).getTop() + " getTop()");
    
    			Log.e(TAG, mFirstVisibleItem + " SCROLL_STATE_IDLE");
    			//获取第一个Item的top
    			int top = getChildAt(0).getTop();
    			if (top == 0)
    				return;
    			//绝对值不为0时,假设绝对值大于mItemHeight的一半。则收缩,即显示下一个Item
    			if (Math.abs(top) > mItemHeight / 2)
    			{
    				this.setSelection(mFirstVisibleItem + 1);
    
    				// this.scrollTo(x, y)
    				// smoothScrollToPosition(mFirstVisibleItem - 1);
    				// scrollBy(0, mItemHeight- Math.abs(top));
    				// smoothScrollBy(mItemHeight- Math.abs(top), 200);
    
    			} else//绝对值不为0时,假设绝对值小于于mItemHeight的一半。则展开,显示当前完整的Item
    			{
    				this.setSelection(mFirstVisibleItem);
    
    				// this.scrollTo(x, y)
    				// smoothScrollBy( -Math.abs(top), 200);
    				// smoothScrollByOffset(offset);
    				// scrollBy(0, -Math.abs(top));
    				// smoothScrollToPosition(mFirstVisibleItem);
    			}
    			// smoothScrollToPosition(mFirstVisibleItem);
    
    		}
    
    	}
    
    	/**
    	 * 滚动过程中不断记录当前显示的第一个Item
    	 */
    	@Override
    	public void onScroll(AbsListView view, int firstVisibleItem,
    			int visibleItemCount, int totalItemCount)
    	{
    		mFirstVisibleItem = firstVisibleItem;
    		// Log.e(TAG, mFirstVisibleItem + "");
    	}
    	
    	/**
    	 * 对外发布每一个Item的高度
    	 * @return
    	 */
    	public int getItemHeight()
    	{
    		return mItemHeight;
    	}
    
    	/**
    	 * 获得状态栏的高度
    	 * 
    	 * @param context
    	 * @return
    	 */
    	public int getStatusHeight(Context context)
    	{
    
    		int statusHeight = -1;
    		try
    		{
    			Class<?

    > clazz = Class.forName("com.android.internal.R$dimen"); Object object = clazz.newInstance(); int height = Integer.parseInt(clazz.getField("status_bar_height") .get(object).toString()); statusHeight = context.getResources().getDimensionPixelSize(height); } catch (Exception e) { e.printStackTrace(); } return statusHeight; } }


    代码比較少。也比較简单,大家能够关注下。我在onScrollStateChanged凝视掉的那些方法,原则上说每一个应该都能实现;可是我终于选择了setSelection(mFirstVisibleItem);有兴趣的能够拿别的方法试试;

    d、MainActivity中

    package com.example.zhy_wangandroid_hownoon;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Random;
    
    import com.zhy.utils.CommonAdapter;
    import com.zhy.utils.ViewHolder;
    
    import android.app.Activity;
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.View;
    import android.view.ViewGroup;
    import android.view.Window;
    
    public class MainActivity extends Activity
    {
    
    	private MyListView mListView;
    	private CommonAdapter<String> mAdapter;
    	private List<String> mDatas;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState)
    	{
    		super.onCreate(savedInstanceState);
    		requestWindowFeature(Window.FEATURE_NO_TITLE);
    		setContentView(R.layout.activity_main);
    
    		mListView = (MyListView) findViewById(R.id.id_lv);
    		initDatas();
    		initViews();
    
    	}
    
    	private void initViews()
    	{
    		mListView = (MyListView) findViewById(R.id.id_lv);
    		mAdapter = new CommonAdapter<String>(this, mDatas, R.layout.item)
    		{
    			@Override
    			public void convert(ViewHolder helper, String item)
    			{
    				View convertView = helper.getConvertView();
    				convertView.setBackgroundColor(Color.rgb(
    						new Random().nextInt(255), new Random().nextInt(255),
    						new Random().nextInt(255)));
    				ViewGroup.LayoutParams lp = convertView.getLayoutParams();
    				lp.height = mListView.getItemHeight();
    				convertView.setLayoutParams(lp);
    				helper.setText(R.id.id_title, item);
    			}
    		};
    
    		mListView.setAdapter(mAdapter);
    	}
    
    	private void initDatas()
    	{
    		mDatas = new ArrayList<String>();
    
    		for (int i = 'A'; i <= 'Z'; i++)
    		{
    			mDatas.add(String.valueOf((char) +i));
    		}
    	}
    }
    

    使用就没撒说的了,我用了我们之前封装的CommonAdapter,假设不了解能够參考:Android 高速开发系列 打造万能的ListView GridView 适配器;假设看不惯自行改成传统的Adapter,相信大家应该没问题~

    还有些需求是这种,既要满足每次停止显示完整的Item,还希望即使用户给了个加速度,在用户抬起手指时,不会自己主动的滚动;

    4、ListView显示完整Item,屏蔽自己主动滚动

    这个比較容易了。仅仅须要复写onTouchEvent方法,然后在ACTION_UP后,进行检查是显示/影藏当前Item,然后return true;

    @Override
    	public boolean onTouchEvent(MotionEvent ev)
    	{
    		int action = ev.getAction();
    		if (action == MotionEvent.ACTION_UP)
    		{
    			checkForReset();
    			return true;
    		}
    		return super.onTouchEvent(ev);
    	}
    
    	@Override
    	public void onScrollStateChanged(AbsListView view, int scrollState)
    	{
    		// 滚动结束
    		if (scrollState == OnScrollListener.SCROLL_STATE_IDLE)
    		{
    			checkForReset();
    		}
    
    	}
    关键代码如上,其它全部代码和上例一致。
    效果图:




    好了,就介绍到这了。


    源代码点击下载



  • 相关阅读:
    第一个android开发,记录三
    第一个android开发,记录二
    第一个android开发,记录一
    第一行代码LitePal的问题
    第二阶段冲刺个人总结5
    PHP中验证码的制作教程
    选项卡的制作代码
    HTML5布局总结篇
    PHP实现简单的计算器
    PHP中的运算符
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5123250.html
Copyright © 2011-2022 走看看