Android自定义组合控件：UIScrollLayout（支持界面滑动及左右菜单滑动）

最新推荐文章于 2021-05-28 11:35:57 发布
最新推荐文章于 2021-05-28 11:35:57 发布
阅读量819 收藏
点赞数
文章标签： 移动开发 ui

一、前言：

        我之前很早的时候，写过一篇《左右滑出菜单》的文章：

        http://blog.csdn.net/qingye_love/article/details/8776650

        用的是对View的LeftMargin / RightMargin进行不断的计算，并且用AsynTask来完成动画，性能不是很好，大家也在资源下载中有评论，因此，本篇文件，将会采用ViewGroup的方式来自定义控件，且支持文章标题中的两种滑动方式的展现，也希望大家多多评论。（可惜，大家都去下载资源，在资源中评论了！呜呜~~）。

二、实现：

        2.1 核心程序及知识点：

        本次，采用ViewGroup来管理整个的Child，并且采用scrollTo / scrollBy，以及 Scroller 这么个系统方法来完成这些事。先来上主要代码：

package com.chris.apps.uiscroll;

import com.chris.apps.uiscroll.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.Scroller;

public class UIScrollLayout extends ViewGroup {

	private final static String TAG = "UIScrollLayout";
	private int mCurScreen = 0;
	
	private final static String ATTR_NAVIGATOR	= "navigator";
	private final static String ATTR_SLIDEMENU	= "slidemenu";
	public final static int VIEW_NAVIGATOR 		= 0;
	public final static int VIEW_MAIN_SLIDEMENU	= 1;
	private int mViewType = VIEW_NAVIGATOR;

	private int mTouchSlop = 0;
	private int mLastX = 0;
	private VelocityTracker mVelocityTracker = null;
	private final static int VELOCITY_X_DISTANCE = 1000;

	private Scroller mScroller = null;
	
	public UIScrollLayout(Context context) {
		this(context, null);
	}
	
	public UIScrollLayout(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public UIScrollLayout(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		
		TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.UIScroll);
		String type = a.getString(R.styleable.UIScroll_view_type);
		a.recycle();
		
		Log.d(TAG, "type = " + type);
		if(type.equals(ATTR_NAVIGATOR)){
			mViewType = VIEW_NAVIGATOR;
		}else if(type.equals(ATTR_SLIDEMENU)){
			mViewType = VIEW_MAIN_SLIDEMENU;
		}

		mScroller = new Scroller(context);
		mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); 
		Log.d(TAG, "mTouchSlop = " + mTouchSlop);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		
		if(mViewType == VIEW_NAVIGATOR){
			for(int i = 0; i < getChildCount(); i ++){
				getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
			}
		}else if(mViewType == VIEW_MAIN_SLIDEMENU){
			for(int i = 0; i < getChildCount(); i ++){
				View child = getChildAt(i);
				LayoutParams lp = child.getLayoutParams();
				int widthSpec = 0;
				if(lp.width > 0){
					widthSpec = MeasureSpec.makeMeasureSpec(lp.width, MeasureSpec.EXACTLY);
				}else{
					widthSpec = widthMeasureSpec;
				}
				
				child.measure(widthSpec, heightMeasureSpec);
			}
		}
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		if(changed){
			int n = getChildCount();
			View child = null;
			int childLeft = 0;
			mCurScreen = 0;
			
			for(int i = 0; i < n; i ++){
				child = getChildAt(i);
				child.layout(childLeft, 0, 
						childLeft + child.getMeasuredWidth(), 
						child.getMeasuredHeight());
				childLeft += child.getMeasuredWidth();
			}
			
			if(mViewType == VIEW_MAIN_SLIDEMENU){
				if(n > 3){
					Log.d(TAG, "error: Main SlideMenu num must <= 3");
					return;
				}
				if(getChildAt(0).getMeasuredWidth() < getMeasuredWidth()){
					mCurScreen = 1;
					scrollTo(getChildAt(0).getMeasuredWidth(), 0);
				}else{
					mCurScreen = 0;
				}
			}
			Log.d(TAG, "mCurScreen = " + mCurScreen);
		}
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		switch(ev.getAction()){
		case MotionEvent.ACTION_DOWN:
			mLastX = (int) ev.getX();
			break;
			
		case MotionEvent.ACTION_MOVE:
			int x = (int) ev.getX();
			if(Math.abs(x - mLastX) > mTouchSlop){
				return true;
			}
			break;
			
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			// TODO: clean or reset
			break;
		}
		return super.onInterceptTouchEvent(ev);
	}

	/**
	 * 使用VelocityTracker来记录每次的event，
	 * 并在ACTION_UP时computeCurrentVelocity，
	 * 得出X,Y轴方向上的移动速率
	 * velocityX > 0 向右移动, velocityX < 0 向左移动
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if(mVelocityTracker == null){
			mVelocityTracker = VelocityTracker.obtain();
		}
		mVelocityTracker.addMovement(event);
		
		switch(event.getAction()){
		case MotionEvent.ACTION_DOWN:
			mLastX = (int) event.getX();
			break;
			
		case MotionEvent.ACTION_MOVE:
			int deltaX = mLastX - (int)event.getX(); // delta > 0向右滚动
			mLastX = (int) event.getX();
			scrollChild(deltaX, 0);
			break;
			
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			mVelocityTracker.computeCurrentVelocity(VELOCITY_X_DISTANCE);
			int velocityX = (int) mVelocityTracker.getXVelocity();
			animateChild(velocityX);
			if(mVelocityTracker != null){
				mVelocityTracker.recycle();
				mVelocityTracker = null;
			}
			break;
		}
		return true;
	}

	private void scrollChild(int distanceX, int distanceY){
		int firstChildPosX = getChildAt(0).getLeft() - getScrollX();
		int lastChildPosX = getChildAt(getChildCount()-1).getLeft() - getScrollX();
		
		if(mViewType == VIEW_MAIN_SLIDEMENU){
			lastChildPosX -= (getWidth() - getChildAt(getChildCount()-1).getWidth());
		}
		
		if(firstChildPosX != 0 && Math.abs(firstChildPosX) < Math.abs(distanceX)){
			distanceX = firstChildPosX;
		}else if(lastChildPosX != 0 && Math.abs(lastChildPosX) < Math.abs(distanceX)){
			distanceX = lastChildPosX;
		}

		if(firstChildPosX == 0 && distanceX < 0){
			return;
		}else if(lastChildPosX == 0 && distanceX > 0){
			return;
		}
		scrollBy(distanceX, 0);
	}

	private void animateChild(int velocityX){
		int width = 0;
		int offset = 0;
		if(mViewType == VIEW_NAVIGATOR){
			width = getWidth();
		}else if(mViewType == VIEW_MAIN_SLIDEMENU){
			// 默认左右两页菜单宽度一致
			width = getChildAt(0).getWidth();
		}
		
		/*
		 * velocityX > 0, 向右滚动; velocityX < 0, 向左滚动
		 */
		if(velocityX > VELOCITY_X_DISTANCE && mCurScreen > 0){
			offset = (--mCurScreen) * width - getScrollX();
		}else if(velocityX < -VELOCITY_X_DISTANCE && mCurScreen < getChildCount()-1){
			offset = (++mCurScreen) * width - getScrollX();
		}else{
			mCurScreen = (getScrollX() + width/2) / width;
			offset = mCurScreen * width - getScrollX();
		}

		//Log.d(TAG, "offset = " + offset);
		mScroller.startScroll(getScrollX(), 0, offset, 0, Math.abs(offset));
		invalidate();
	}

	@Override
	public void computeScroll() {
		if(mScroller.computeScrollOffset()){
			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			postInvalidate();
		}
		super.computeScroll();
	}
}

        这篇文章除了以上介绍，还用到了以下知识点：

        1. VelocityTracker类来跟踪手指滑动速率；（网上有很多，使用也很简单）

        2. 自定义XML属性；（可以看看这篇讲解：http://blog.csdn.net/qingye_love/article/details/10904691）

        3. onIntercepterTouchEvent，事件拦截（可以参考这篇：http://blog.csdn.net/qingye_love/article/details/10382171）
        2.2 代码解读：

        2.2.1 初始化

	public UIScrollLayout(Context context) {
		this(context, null);
	}
	
	public UIScrollLayout(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public UIScrollLayout(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		
		TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.UIScroll);
		String type = a.getString(R.styleable.UIScroll_view_type);
		a.recycle();
		
		Log.d(TAG, "type = " + type);
		if(type.equals(ATTR_NAVIGATOR)){
			mViewType = VIEW_NAVIGATOR;
		}else if(type.equals(ATTR_SLIDEMENU)){
			mViewType = VIEW_MAIN_SLIDEMENU;
		}

		mScroller = new Scroller(context);
		mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); 
		Log.d(TAG, "mTouchSlop = " + mTouchSlop);
	}

        查找自定义属性有没有，然后设置当前使用的类型，初始化Scroller，并使用ViewConfiguration来获取系统设置（这里用来判断当Touch时，是水平滚动，还是上下滚动，若含有ListView时，需要通过onInterceptTouchEvent来判断）。

        2.2.2 测量child

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		
		if(mViewType == VIEW_NAVIGATOR){
			for(int i = 0; i < getChildCount(); i ++){
				getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
			}
		}else if(mViewType == VIEW_MAIN_SLIDEMENU){
			for(int i = 0; i < getChildCount(); i ++){
				View child = getChildAt(i);
				LayoutParams lp = child.getLayoutParams();
				int widthSpec = 0;
				if(lp.width > 0){
					widthSpec = MeasureSpec.makeMeasureSpec(lp.width, MeasureSpec.EXACTLY);
				}else{
					widthSpec = widthMeasureSpec;
				}
				
				child.measure(widthSpec, heightMeasureSpec);
			}
		}
	}

        根据VIEW类型，来逐个测量child大小。

        2.2.3 调整child位置：

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		if(changed){
			int n = getChildCount();
			View child = null;
			int childLeft = 0;
			mCurScreen = 0;
			
			for(int i = 0; i < n; i ++){
				child = getChildAt(i);
				child.layout(childLeft, 0, 
						childLeft + child.getMeasuredWidth(), 
						child.getMeasuredHeight());
				childLeft += child.getMeasuredWidth();
			}
			
			if(mViewType == VIEW_MAIN_SLIDEMENU){
				if(n > 3){
					Log.d(TAG, "error: Main SlideMenu num must <= 3");
					return;
				}
				if(getChildAt(0).getMeasuredWidth() < getMeasuredWidth()){
					mCurScreen = 1;
					scrollTo(getChildAt(0).getMeasuredWidth(), 0);
				}else{
					mCurScreen = 0;
				}
			}
			Log.d(TAG, "mCurScreen = " + mCurScreen);
		}
	}

        onMeasure和onLayout都是有ViewRoot来调用，并且是在draw之前，然后，开始显示各个child。

        2.2.4 消息拦截处理：

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		switch(ev.getAction()){
		case MotionEvent.ACTION_DOWN:
			mLastX = (int) ev.getX();
			break;
			
		case MotionEvent.ACTION_MOVE:
			int x = (int) ev.getX();
			if(Math.abs(x - mLastX) > mTouchSlop){
				return true;
			}
			break;
			
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			// TODO: clean or reset
			break;
		}
		return super.onInterceptTouchEvent(ev);
	}

        当child中，有ListView, GridView或ScrollView时，DOWN/MOVE/UP等消息是不会跑到当前ViewGroup的onTouchEvent中的，只有当在onInterceptTouchEvent中返回true之后，才会收到消息，因为，需要在ACTION_DOWN时，记住X点坐标，并在ACTION_MOVE中判断是否需要拦截。

        2.2.5 滚动消息处理：

	/**
	 * 使用VelocityTracker来记录每次的event，
	 * 并在ACTION_UP时computeCurrentVelocity，
	 * 得出X,Y轴方向上的移动速率
	 * velocityX > 0 向右移动, velocityX < 0 向左移动
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		if(mVelocityTracker == null){
			mVelocityTracker = VelocityTracker.obtain();
		}
		mVelocityTracker.addMovement(event);
		
		switch(event.getAction()){
		case MotionEvent.ACTION_DOWN:
			mLastX = (int) event.getX();
			break;
			
		case MotionEvent.ACTION_MOVE:
			int deltaX = mLastX - (int)event.getX(); // delta > 0向右滚动
			mLastX = (int) event.getX();
			scrollChild(deltaX, 0);
			break;
			
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			mVelocityTracker.computeCurrentVelocity(VELOCITY_X_DISTANCE);
			int velocityX = (int) mVelocityTracker.getXVelocity();
			animateChild(velocityX);
			if(mVelocityTracker != null){
				mVelocityTracker.recycle();
				mVelocityTracker = null;
			}
			break;
		}
		return true;
	}

        在ACTION_MOVE中，计算每次移动的距离，调用scrollChild来随手滚动：

	private void scrollChild(int distanceX, int distanceY){
		int firstChildPosX = getChildAt(0).getLeft() - getScrollX();
		int lastChildPosX = getChildAt(getChildCount()-1).getLeft() - getScrollX();
		
		if(mViewType == VIEW_MAIN_SLIDEMENU){
			lastChildPosX -= (getWidth() - getChildAt(getChildCount()-1).getWidth());
		}
		
		if(firstChildPosX != 0 && Math.abs(firstChildPosX) < Math.abs(distanceX)){
			distanceX = firstChildPosX;
		}else if(lastChildPosX != 0 && Math.abs(lastChildPosX) < Math.abs(distanceX)){
			distanceX = lastChildPosX;
		}

		if(firstChildPosX == 0 && distanceX < 0){
			return;
		}else if(lastChildPosX == 0 && distanceX > 0){
			return;
		}
		scrollBy(distanceX, 0);
	}

        这个方法，主要是判断当然是否超过边界，若本次移动的距离超过边界，则计算滚动的距离最大不超过边界，并调用系统scrollBy方法，这个方法最终会调用scrollTo方法。

        2.2.6 完成自动滚动：

	private void animateChild(int velocityX){
		int width = 0;
		int offset = 0;
		if(mViewType == VIEW_NAVIGATOR){
			width = getWidth();
		}else if(mViewType == VIEW_MAIN_SLIDEMENU){
			// 默认左右两页菜单宽度一致
			width = getChildAt(0).getWidth();
		}
		
		/*
		 * velocityX > 0, 向右滚动; velocityX < 0, 向左滚动
		 */
		if(velocityX > VELOCITY_X_DISTANCE && mCurScreen > 0){
			offset = (--mCurScreen) * width - getScrollX();
		}else if(velocityX < -VELOCITY_X_DISTANCE && mCurScreen < getChildCount()-1){
			offset = (++mCurScreen) * width - getScrollX();
		}else{
			mCurScreen = (getScrollX() + width/2) / width;
			offset = mCurScreen * width - getScrollX();
		}

		//Log.d(TAG, "offset = " + offset);
		mScroller.startScroll(getScrollX(), 0, offset, 0, Math.abs(offset));
		invalidate();
	}

        在收到ACTION_UP/ACTION_CANCEL消息后，就表明本次交互完成，判断当前界面滚动的距离，以及手势速度，然后调用Scroller.startScroll方法并最终通过invalidate来完成滚动。

        光有startScroll是无法完成，还必需继承computeScroll，并不断的invalidate，直到Scroller移动到终点。

	@Override
	public void computeScroll() {
		if(mScroller.computeScrollOffset()){
			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			postInvalidate();
		}
		super.computeScroll();
	}

三、Demo：

        例子下载地址：http://download.csdn.net/detail/qingye_love/6197657

        通过设置view_type属性来显示不同UI。 （"navigator" 或 "slidemenu"）

weixin_33811961
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义控件实现可左右滑动的导航条
09-02
本文将详细解析如何实现一个可左右滑动的导航条，该控件能够响应快速滑动，并具备一定的自定义样式功能。 首先，我们需要理解这个自定义控件的主要功能。该控件需具备以下特性： 1. **响应左右滑动**：用户可以...
引领创新的Android滑动布局库：SwipeableLayout
最新发布
gitblog_00007的博客
06-26 334
引领创新的Android滑动布局库：SwipeableLayout 项目地址:https://gitcode.com/wmbest2/SwipeableLayout 在Android开发中，创新和用户体验是两大核心要素，而今天我们将向您推荐一个能够提升应用交互性的神器——SwipeableLayout。这是一个自适应大小的视图组，允许用户通过简单的滑动手势切换前后两个视图，为您打造更流畅的用户体验...
Android自定义组件系列【10】——随ViewPager滑动的导航条
weixin_34096182的博客
07-05 75
昨天在用到ViewPager实现滑动导航的时候发现微信的导航条效果是跟随ViewPager的滑动而动的，刚开始想了一下，感觉可以使用动画实现，但是这个滑动是随手指时时变化的，貌似不可行，后来再网上搜了一下，找到一个开源代码，结果打开一看大吃一惊，这么简单的效果代码居然大概有300多行，太占手机存储空间了！后来自己干脆重写ViewGroup使用scrollTo方法实现了一下，具体实现过程如下：p...
自定义布局-ScrollLayout
weixin_34232363的博客
08-22 109
原文地址：http://www.cnblogs.com/wader2011/archive/2011/10/10/2205142.html 该类的功能是实现随手指滑动切换页面的功能，类似Gallery（但是Gallery限制太多，比如每页布局必须相同）。有的同学可能会想到我们可以在 onTouchEvent (MotionEvent event)方法中进行判断，当左右滑动时，执行s...
自定义组件：ScrollLayout
gundumw100的专栏
04-10 474
import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.VelocityTracker; i
Android自定义横向滑动菜单的实现
08-27
Android 自定义横向滑动菜单的实现是 Android 开发中一个常见的需求，通过自定义控件来实现横向滑动菜单，可以满足开发者的需求。下面是 Android 自定义横向滑动菜单的实现的相关知识点： 1. ...
Android自定义控件ScrollView实现上下滑动功能
08-27
Android 自定义控件 ScrollView 实现上下滑动功能 Android 自定义控件 ScrollView 是 Android 开发中常用的控件之一，它可以实现上下滑动功能，今天我们将详细介绍如何实现这个功能。 标题解释 Android 自定义...
Android自定义星星可滑动评分控件
08-27
Android自定义星星可滑动评分控件 Android自定义星星可滑动评分控件是指在Android应用程序中实现的星星评分控件，可以滑动评分，具有一定的参考价值。本控件通过线性布局结合ImageView实现，具有展示分数、滑动评分...
安卓scrollLayout
02-28
安卓scrollLayout 忘了哪儿下载的 感觉很好用
Android实现导航菜单左右滑动效果
03-20
Android中实现导航菜单左右滑动效果，实现原理是使用android-support-v4.jar包中ViewPager控件，在ViewPager控件中设置流布局。
Android 自定义可上下左右滑动table
07-30
这是一款可以上下左右滑动的android控件，和前端的table tr、td、差不多，全部源码，可以自己重新定义
ScrollLayout
01-11
类似酷狗音乐主页面左右滑动，ScrollLayout
Android之ScrollLayout左右滑动效果实现
11-17
通过一个小程序实现ScrollLayout左右滑动效果，需要的可以看看
android左右滑动页面控件,Android自定义组合控件：UIScrollLayout（支持界面滑动及左右菜单滑动）...
weixin_34900026的博客
05-28 927
【实例简介】流畅的界面左右滑动，两种类型显示，通过设置view_type来完成。【实例截图】【核心代码】UIScrollLayout└── UIScrollLayout├── AndroidManifest.xml├── gen│ └── com│ └── chris│ └── apps│ └── uiscroll│ ...
Android自定义控件，可以滑动的导航栏(Navigation Bar)
caicdd007的专栏
06-24 3516
前段时间android项目中用到一个可以滑动的导航栏，在网上也没找到合适的替代品，所以就自定义了个该控件，在此分享一下该控件，给有需要的人。 首先，来看看我们要实现的效果是什么样的。       上图就是我们要实现的最终效果图了，下面就说一下实现的过程。 考虑到能支持横向滑动，android提供的横向滑动的控件我选择了HorizontalScrollView作为基类，当然横向的Lis
android ScrollLayout VelocityTracker
ainibaifenbai的专栏
06-09 1709
scrollTo(x,y);scrollBy(x, y);网上一些都说没有什么区别只是解释上不太一样，看过源码后发现  :public void scrollBy(int x, int y) {        scrollTo(mScrollX + x, mScrollY + y); }个人猜测可能是相对位置？（没有具体测试） startScroll  和 comput
Android自定义日历控件：节日标记与互动设计
在Android开发中，自定义日历控件是一项常见的需求，特别是在定制化应用界面时。本文档详细介绍了如何实现一个支持旧历、节气显示、日期标注以及点击操作的自定义日历组件，参考了网络上现有的日历控件并进行了一些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值