利用Recycleview水平平移并自动挪动Item位置(仿Instagram效果)

先来看看Instagram在编辑图片水平挪动的过程中的效果图


这个效果分两个,一个是水平滑动的效果,另一个是当我点击靠边的某个选项的时候,若这个选项与它靠近的边之间还隔着一个没有完全显示的选项,会自动平移位置,将这个没有完全显示的选项显示出来,或者当点击的选项就是最边上的选项,它也会自动移动将它之前(或者之后)的选项移动出来。


知道效果后,我们就要用代码实现这个效果,按照庖丁解牛一步步达到我们的功能。

首先第一步是做一个能水平滑动的view,最早之前android只提供了竖直滑动的ListView(大家都很熟悉吧),这两年又提供了一个Recycleview可以自由控制水平还是竖直滚动,同时它的适配器的写法也比ListView更简单些,Recylerview用法网上的例子很多了,大家自己百度下。我们的这个demo就是自定义一个继承Recycleview的View,在本身就有水平滚动功能的基础上加入自动平移的功能。所以写贴出关键代码的自定义View的代码


package com.jc.demo.recylerview;

import android.content.Context;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.Interpolator;
import android.widget.Scroller;

public class AutoAdjustRecylerView extends RecyclerView {
	private final String TAG = "AutoAdjustRecylerView";
	private Scroller mScroller = null;
	private int mLastx = 0;
	//用于设置自动平移时候的速度
	private float mPxPerMillsec = 0;
	private AutoAdjustItemClickListener mListener = null;
	
	public AutoAdjustRecylerView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		initData(context);
	}

	public AutoAdjustRecylerView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		initData(context);
	}

	public AutoAdjustRecylerView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		initData(context);
	}
	
	private void initData(Context context){
		mScroller = new Scroller(context, new Interpolator() {
			public float getInterpolation(float t) {
			      return t;
			  }
		});
	}
	
	public void setScroller(Scroller scroller){
		if(mScroller != scroller){
			mScroller = scroller; 
		}
	}
	
	@Override
	public void computeScroll() {
		// TODO Auto-generated method stub
		super.computeScroll();
		if(mScroller != null){
			if (mScroller.computeScrollOffset())//如果mScroller没有调用startScroll,这里将会返回false。    
		    {      
		        Log.d(TAG, "getCurrX = " +  mScroller.getCurrX());    
		        scrollBy(mLastx - mScroller.getCurrX(), 0);
		        mLastx = mScroller.getCurrX();
		        //继续让系统重绘    
		        postInvalidate();  
		     } 
		}
	}
	
	public AutoAdjustItemClickListener getItemClickListener() {
		return mListener;
	}

	public void setItemClickListener(AutoAdjustItemClickListener listener) {
		this.mListener = listener;
	}
	
	public float getPxPerMillsec() {
		return mPxPerMillsec;
	}

	public void setPxPerMillsec(float pxPerMillsec) {
		this.mPxPerMillsec = pxPerMillsec;
	}
	
	public void checkAutoAdjust(int position){
		int childcount = getChildCount();
		//获取可视范围内的选项的头尾位置
		int firstvisiableposition = ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition();
		int lastvisiableposition = ((LinearLayoutManager) getLayoutManager()).findLastVisibleItemPosition();
		Log.d(TAG, "childcount:" + childcount + " position:"+ position +" firstvisiableposition:" + firstvisiableposition
				+ " lastvisiableposition" + lastvisiableposition);
		if(position == (firstvisiableposition + 1) || position == firstvisiableposition){
			//当前位置需要向右平移
			leftScrollBy(position, firstvisiableposition);
		}
		else if(position == (lastvisiableposition - 1) || position == lastvisiableposition){
			//当前位置需要向做平移
			rightScrollBy(position, lastvisiableposition);
		}
	}
	
	private void leftScrollBy(int position, int firstvisiableposition){
		View leftChild = getChildAt(0);
		if(leftChild != null){
			int leftx = leftChild.getLeft();
			Log.d(TAG, "leftChild left:" + leftx);
			int startleft = leftx;
			int endleft = position == firstvisiableposition?leftChild.getWidth():0;
			Log.d(TAG, "startleft:" + startleft + " endleft" + endleft);
			autoAdjustScroll(startleft, endleft);
		}
	}
	
	
	private void rightScrollBy(int position, int lastvisiableposition){
		int childcount = getChildCount();
		View rightChild = getChildAt(childcount - 1);
		if(rightChild != null){
			int rightx = rightChild.getRight();
			int dx = rightx - getWidth();
			Log.d(TAG, "rightChild right:" + rightx + " dx:" + dx);
			int startright = dx;
			int endright = position == lastvisiableposition?-1 * rightChild.getWidth():0;
			Log.d(TAG,"startright:" + startright + " endright:" + endright);
			autoAdjustScroll(startright, endright);
		}
	}
	
	/**
	 * 
	 * @param start 滑动起始位置
	 * @param end 滑动结束位置
	 */
	private void autoAdjustScroll(int start, int end){
		int duration = 0;
        if(mPxPerMillsec != 0){
        	duration = (int)((Math.abs(end - start)/mPxPerMillsec));
        }
        Log.d(TAG, "duration:" + duration);
		mLastx = start;
		mScroller.startScroll(start, 0, end - start, 0, duration);
		postInvalidate();
	}
	
	public abstract class AbstractAutoAdjustViewHolder extends ViewHolder implements OnClickListener{
		
		private final static String TAG = "AutoAdjustViewHolder";
		
		public AbstractAutoAdjustViewHolder(View view) {
			super(view);
			view.setOnClickListener(this);
			initView(view);
		}
		
		protected abstract void initView(View view);
		
		/**
		 * 点击监听
		 */
		@Override
		public void onClick(View v) {
			//单击选项的时候判断是否需要移动
			checkAutoAdjust(getPosition());
			if(mListener != null){
				mListener.onItemClick(v,getPosition());
			}
		}
	}
}

首先我们看这个自定义View代码最底下有个AbstractAutoAdjustViewHolder抽象类,看到ViewHolder大家应该都知道它的作用啥吧,由于Recycleview没有ItemClick事件,因此我们必须自己添加了,所以有了这个抽象类,用来给每个Item的View设置OnClick事件,然后在这个OnClick事件里去判断是否需要平移以及将click事件回调出去,这里有一个接口用于回调点击事件

package com.jc.demo.recylerview;

import android.view.View;

public interface AutoAdjustItemClickListener {
	public void onItemClick(View view,int postion);
}

当我们点击了Item的时候,就触发了checkAutoAdjust方法去判断当前点击点的位置在整个可视范围所处的位置,代码91和95行分别判断了点击位置是否处于最左边,临近最左边或者最右边,临近最右边,然后计算好要平移的起始和结束位置,并最终在133行的autoAdjustScroll方法里进行滑动。滑动的方式用比较常用的Scroller的方式,当我们调用了Scroller的startScroller方法后postInvalidate重绘整个view,重绘过程会调用到computeScroll()方法(代码53行),然后在这个方法里取出scroller帮我们计算出来的平移值去做平移,就达到了我们看到的自动平移的效果。



整个核心的类差不多就是这样了,现在贴出UI部分的三个类,一个是ViewHolder继承了我们刚刚的AbstractAutoAdjustViewHolder



package com.jc.demo;

import android.view.View;
import android.widget.ImageView;

import com.jc.demo.recylerview.AutoAdjustRecylerView;
import com.jc.demo.recylerview.AutoAdjustRecylerView.AbstractAutoAdjustViewHolder;


public class TestViewHolder extends AbstractAutoAdjustViewHolder{
	
	public ImageView mImageView;
	
	public TestViewHolder(AutoAdjustRecylerView autoAdjustRecylerView, View view) {
		autoAdjustRecylerView.super(view);
		// TODO Auto-generated constructor stub
	}

	@Override
	protected void initView(View view) {
		// TODO Auto-generated method stub
		mImageView = (ImageView) view.findViewById(R.id.item_iv);
	}
	
	
}

里面的Item布局为

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="10.0dip"
    android:orientation="vertical" >
    
    <ImageView 
        android:id="@+id/item_iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       />
    
</LinearLayout>

要使用自定义view我们得做个适配器Adapter

package com.jc.demo;


import com.jc.demo.recylerview.AutoAdjustRecylerView;

import android.support.v7.widget.RecyclerView.Adapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class TestAdapter extends Adapter<TestViewHolder>{

	private int[] mDatas;
	private AutoAdjustRecylerView mAutoAdjustRecylerView = null;

    public TestAdapter(AutoAdjustRecylerView autoAdjustRecylerView, int[] datas) {
        this.mAutoAdjustRecylerView = autoAdjustRecylerView;
    	mDatas = datas;
    }

    @Override
    public int getItemCount() {
        return mDatas.length;
    }

	@Override
	public void onBindViewHolder(TestViewHolder holder, int position) {
		// TODO Auto-generated method stub
		holder.mImageView.setImageResource(mDatas[position]);
	}

	@Override
	public TestViewHolder onCreateViewHolder(ViewGroup parent, int arg1) {
		// TODO Auto-generated method stub
		View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
        TestViewHolder testViewHolder = new TestViewHolder(mAutoAdjustRecylerView, itemView);
		return testViewHolder;
	}

}

然后就是主界面和主界面布局

package com.jc.demo;


import com.jc.demo.recylerview.AutoAdjustItemClickListener;
import com.jc.demo.recylerview.AutoAdjustRecylerView;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.util.Log;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;


public class AutoAdjustActivity extends Activity implements AutoAdjustItemClickListener{
	private final String TAG = "AutoAdjustActivity";
	private AutoAdjustRecylerView mRecyclerView = null;
	final int[] mIds = {R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d,
	        R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h,
	        R.drawable.i, R.drawable.j, R.drawable.k, R.drawable.l,
	        R.drawable.m, R.drawable.n, R.drawable.o, R.drawable.p,
	        R.drawable.q};
	final int[] mIdsUpper = {R.drawable.aa, R.drawable.bb, R.drawable.cc, R.drawable.dd,
	        R.drawable.ee, R.drawable.ff, R.drawable.gg, R.drawable.hh,
	        R.drawable.ii, R.drawable.jj, R.drawable.kk, R.drawable.ll,
	        R.drawable.mm, R.drawable.nn, R.drawable.oo, R.drawable.pp,
	        R.drawable.qq};
	private TextView mTvText = null;
	private ImageView mImageView1 = null;
	private ImageView mImageView2 = null;
	private ImageView mImageView3 = null;
	private ImageView mImageView4 = null;
	private ImageView mImageView5 = null;
	private int mClickPosition = 0;
	private ScaleAnimation mScaleAni = null;
	private RotateAnimation mRotateAni = null;
	private AnimationSet mAnimationSet = null;
	private AlphaAnimation mAlphaAnimation = null;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTvText = (TextView)findViewById(R.id.tv_text);
        mImageView1 = (ImageView)findViewById(R.id.iv_pic1);
        mImageView2 = (ImageView)findViewById(R.id.iv_pic2);
        mImageView3 = (ImageView)findViewById(R.id.iv_pic3);
        mImageView4 = (ImageView)findViewById(R.id.iv_pic4);
        mImageView5 = (ImageView)findViewById(R.id.iv_pic5);
        mRecyclerView = (AutoAdjustRecylerView) findViewById(R.id.recyclerView);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayout.HORIZONTAL);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        mRecyclerView.setItemClickListener(this);
        mRecyclerView.setPxPerMillsec(0.3f);
        TestAdapter adapter = new TestAdapter(mRecyclerView, mIds);
        mRecyclerView.setAdapter(adapter);
        initData();
    }
    
    private void initData(){
    	mScaleAni = new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f,50,50); //Scale Animation  
		mScaleAni.setRepeatCount(0);  
		mScaleAni.setRepeatMode(Animation.REVERSE);  
		  
		mRotateAni = new RotateAnimation(0, 180, 50, 50); //Rotate Animation  
		mRotateAni.setRepeatMode(Animation.REVERSE);
		mRotateAni.setStartOffset(150);
		mAnimationSet = new AnimationSet(false);   //Animation Set  
		mAnimationSet.addAnimation(mScaleAni);  
		mAnimationSet.addAnimation(mRotateAni);
		mAnimationSet.setAnimationListener(new AnimationListener() {
			
			@Override
			public void onAnimationStart(Animation arg0) {
				Log.d(TAG, "onAnimationStart");
			}

			@Override
			public void onAnimationEnd(Animation arg0) {
				mImageView1.setBackgroundResource(mIds[mClickPosition]);
				mImageView2.setBackgroundResource(mIds[mClickPosition]);
				mImageView3.setBackgroundResource(mIds[mClickPosition]);
				mImageView4.setBackgroundResource(mIds[mClickPosition]);
				mImageView5.setBackgroundResource(mIds[mClickPosition]);
			}

			@Override
			public void onAnimationRepeat(Animation arg0) {
			}
		});
		mAnimationSet.setDuration(300);
		mAlphaAnimation = new AlphaAnimation(1.0f, 0f);
		mAlphaAnimation.setAnimationListener(new AnimationListener() {
			
			@Override
			public void onAnimationStart(Animation arg0) {
				
			}

			@Override
			public void onAnimationRepeat(Animation arg0) {
				
			}
			
			@Override
			public void onAnimationEnd(Animation arg0) {
				mTvText.setText("TEST" + (mClickPosition + 1));
			}
		});
		mAlphaAnimation.setDuration(1000);
    }
    
	@Override
	public void onItemClick(View view, final int position) {
		Log.d(TAG, "position:" + position);
		mClickPosition = position;
		mAnimationSet.setStartOffset(0);
		mImageView1.startAnimation(mAnimationSet);
		mImageView2.startAnimation(mAnimationSet);
		mImageView3.startAnimation(mAnimationSet);
		mImageView4.startAnimation(mAnimationSet);
		mImageView5.startAnimation(mAnimationSet);
		mAlphaAnimation.setStartOffset(0);
		mTvText.startAnimation(mAlphaAnimation);
	}

}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#e5e5e6"
     >
    <LinearLayout 
          android:layout_width="match_parent"
		  android:layout_height="wrap_content"
		  android:orientation="vertical" 
		        >
		    <TextView 
		        android:id="@+id/tv_text"
		        android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    android:text="TEST1"
			    android:layout_gravity="center_horizontal"
			    android:textSize="24sp"
			    android:textColor="@android:color/black"
		        />
		   <ImageView 
			    android:id="@+id/iv_pic1"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    android:background="@drawable/a"
			    android:layout_gravity="center_horizontal"
			    />
		   <ImageView 
			    android:id="@+id/iv_pic2"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    android:background="@drawable/a"
			    android:layout_gravity="center_horizontal"
			    />
		    <ImageView 
			    android:id="@+id/iv_pic3"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    android:background="@drawable/a"
			    android:layout_gravity="center_horizontal"
			    />
		     <ImageView 
			    android:id="@+id/iv_pic4"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    android:background="@drawable/a"
			    android:layout_gravity="center_horizontal"
			    />
		     <ImageView 
			    android:id="@+id/iv_pic5"
			    android:layout_width="wrap_content"
			    android:layout_height="wrap_content"
			    android:background="@drawable/a"
			    android:layout_gravity="center_horizontal"
			    />
    </LinearLayout>
    <com.jc.demo.recylerview.AutoAdjustRecylerView 
        android:id="@+id/recyclerView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</LinearLayout>

Demo源码位置

  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值