xiaoguozi's Blog
Pay it forword - 我并不觉的自豪,我所尝试的事情都失败了······习惯原本生活的人不容易改变,就算现状很糟,他们也很难改变,在过程中,他们还是放弃了······他们一放弃,大家就都是输家······让爱传出去,很困难,也无法预料,人们需要更细心的观察别人,要随时注意才能保护别人,因为他们未必知道自己要什么·····
实现思路,刚开始的时候我是用ViewFlipper控件来做非常的简单但是实现不了拖拽移动屏幕的效果,最终放弃决定自定义一个控件实现这样效果。

接下来我详细的解说一下我开发时写的这个实验demo,软件中用的滑屏就是由这样的代码实现的。

       首先新建一个控件类TouchPageView并且继承自ViewGroup,左右滑动换屏我的实现是在TouchPageView添加3个子view 分别代表看不到的左边屏幕、可以看到的中间屏幕、看不到的右边屏幕,这样在滑屏时候就可以通过不断调整这3个view的位置实现连续不间断滑屏换屏,下面 的实验中我分别把3个view设置成红色、绿色、黄色这样切换的时候可以看到明显效果,这3个view在TouchPageView的构造方法中调用 init方法进行初始化:

private void init()
{
views= new ArrayList<LinearLayout>();
view1=new LinearLayout(context);
view1.setBackgroundColor(Color.YELLOW);
this.addView(view1);
TextView tv=new TextView(context);
tv.setText("测试");
view1.addView(tv);
views.add(view1);


view2=new LinearLayout(context);
view2.setBackgroundColor(Color.RED);
this.addView(view2);
views.add(view2);

view3=new LinearLayout(context);
view3.setBackgroundColor(Color.GREEN);
this.addView(view3);
views.add(view3);

final ViewConfiguration configuration = ViewConfiguration.get(getContext());
mMaximumVelocity = configuration.getScaledMaximumFlingVelocity();
}

       接下来的实现是关键,重写onLayout方法对3个view的显示位置布局进行控制,通过下面的这个方法,把3个view进行水平一个跟着一个进行布局显示。

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childLeft = -1;
final int count = views.size();
//水平从左到右放置
for (int i = 0; i < count; i++) {

final View child =views.get(i);
if (child.getVisibility() != View.GONE) {
final int childWidth = child.getMeasuredWidth();
if(childLeft==-1)
{
childLeft=-childWidth;
}
child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
childLeft += childWidth;
}
}

}

       3个view位置放置好之后,接下来的实现实现手指在屏幕拖拽滑动时让3个view跟着手指的位置进行变化显示,这个肯定是在onTouchEvent 方法中实现了,分别在MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE、 MotionEvent.ACTION_UP三个手指状态中进行控制,在下面的实现中还采用了VelocityTracker的方法对手指的滑动速度进行 跟踪,这样根据滑动速度决定屏幕往哪个方向换屏,关键的代码如下:

@Override
public boolean onTouchEvent(MotionEvent ev){

if(!lock)
{
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(ev);

final int action = ev.getAction();
final float x = ev.getX();
final float y = ev.getY();

switch (action) {
case MotionEvent.ACTION_DOWN://按下去
if(touchState==TOUCH_STATE_REST)

{
//记录按下去的的x坐标
lastMotionX = x;

touchState=TOUCH_STATE_MOVING;

isMoved=false;
}

break;
case MotionEvent.ACTION_MOVE://拖动时
if(touchState==TOUCH_STATE_MOVING)

{
float offsetX=x-lastMotionX;
float offsetY=y-lastMotionY;

if(isMoved)
{
lastMotionX=x;
lastMotionY=y;

final int count = views.size();
//水平从左到右放置
for (int i = 0; i < count; i++) {

final View child =views.get(i);
if (child.getVisibility() != View.GONE) {
final int childWidth = child.getMeasuredWidth();
int childLeft = child.getLeft()+(int)offsetX;
child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
childLeft += childWidth;
}
}
}
else if(Math.abs(offsetX)>TOUCH_SLOP||Math.abs(offsetY)>TOUCH_SLOP)
{
//移动超过阈值,则表示移动了
isMoved=true;

removeCallbacks(mLongPressRunnable);
}
}

break;
case MotionEvent.ACTION_UP://放开时
//释放了
removeCallbacks(mLongPressRunnable);


if(isMoved)
{
if(touchState==TOUCH_STATE_MOVING)
{
touchState=TOUCH_STATE_SLOWING;
int sign=0;
final VelocityTracker velocityTracker = mVelocityTracker;
//计算当前速度
velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);

//x方向的速度
int velocityX = (int) velocityTracker.getXVelocity();

if(velocityX > SNAP_VELOCITY)//足够的能力向左
{

sign=1;
Log.e("enough to move left", "true");
}
else if (velocityX < -SNAP_VELOCITY)//足够的能力向右
{

sign=-1;
Log.e("enough to move right", "right");
}
else
{
sign=0;
}
moveToFitView(sign);
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}

}
}


break;
}
}
return true;
}

       完成手指滑的功能后,最后在手指离开屏幕的时候,让3个view滑动到合适的位置,保证当前屏幕只能看到一个完整的view另外2个view不可见,并 且在滑动的过程中为了达到比较自然的效果,采用减速滑动的实现,这里是用了Handler进行间隔的减速移动效果,这样滑动起来比较舒服,其实最好的效果 应该加入阻尼效果,就是让view一定程度的冲过屏幕边界然后在回弹,经过几次这样的缓减至速度为零然后最终停止,这个可以由各位自己去实现,并不难写。

int offset=0;
private void moveToFitView(int sign)
{
boolean b=swapView(sign);
if(true)
{
View view1=views.get(1);
int left=view1.getLeft();
//int offset=0;
if(left!=0)

{
offset=-1*left;
}

moveView();
}
}

FlipAnimationHandler mAnimationHandler;
int ovv=40;
private void moveView()
{
final int count = views.size();

if(offset!=0)
{
int ov=0;
if(offset>0)
{
ov=ovv;
}
else
{
ov=-1*ovv;
}
ovv=ovv-3;
if(ovv<1)
{
ovv=3;
}
if(Math.abs(offset)<Math.abs(ov))
{
ov=offset;
offset=0;

}
else
{
offset=offset-ov;
}

//水平从左到右放置
for (int i = 0; i < count; i++) {

final View child =views.get(i);
final int childWidth = child.getMeasuredWidth();
int childLeft = child.getLeft()+ov;
child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
childLeft += childWidth;
}

if(mAnimationHandler==null)
{
mAnimationHandler = new FlipAnimationHandler();
}
mAnimationHandler.sleep(1);
}
else
{
ovv=40;
touchState=TOUCH_STATE_REST;
}
}

class FlipAnimationHandler extends Handler {
@Override
public void handleMessage(Message msg) {
TouchPageView.this.moveView();
}

public void sleep(long millis) {
this.removeMessages(0);
sendMessageDelayed(obtainMessage(0), millis);
}
}

整个自定义控件核心的思路和代码就上面这些了,实现效果请参看我的微读效果。

完整的代码:

 

package xx.weidu;
 
import java.util.ArrayList;
import java.util.List;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.os.Handler;
import android.os.Message;
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.LinearLayout;
import android.widget.TextView;
 
public class TouchPageView extends ViewGroup{
 
    private LinearLayout view1;
    private LinearLayout view2;
    private LinearLayout view3;
     
 
    //速度跟踪
    private VelocityTracker mVelocityTracker;
    private int mMaximumVelocity;
     
    //手势临界速度,当速度超过这个时切换到下一屏
    private static final int SNAP_VELOCITY = 100;
     
    //停止状态
    private final static int TOUCH_STATE_REST = 0;
    //滚动状态
    private final static int TOUCH_STATE_MOVING = 1;
    //减速停止状态
    private final static int TOUCH_STATE_SLOWING = 2;
     
    //当前触摸状态
    private int touchState = TOUCH_STATE_REST;
     
    private boolean lock=false;
     
    private float lastMotionX;
    private float lastMotionY;
     
    private Context context;
    private List<LinearLayout> views;
    //是否移动了
    private boolean isMoved;
    //长按的runnable
    private Runnable mLongPressRunnable;
    //移动的阈值
    private static final int TOUCH_SLOP=10;
     
    public int width;
     
    public int height;
     
    public TouchPageView(Context context) {
        super(context);
        this.context=context;
        init();
    }
     
    private void init()
    {
        views= new ArrayList<LinearLayout>();
        view1=new LinearLayout(context);
        view1.setBackgroundColor(Color.YELLOW);
        this.addView(view1);
        TextView tv=new TextView(context);
        tv.setText("测试");
        view1.addView(tv);
        views.add(view1);
         
         
        view2=new LinearLayout(context);
        view2.setBackgroundColor(Color.RED);
        this.addView(view2);
        views.add(view2);
         
        view3=new LinearLayout(context);
        view3.setBackgroundColor(Color.GREEN);
        this.addView(view3);
        views.add(view3);
         
        final ViewConfiguration configuration = ViewConfiguration.get(getContext());
        mMaximumVelocity = configuration.getScaledMaximumFlingVelocity();
    }
     
     
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        final int count = views.size();
        for (int i = 0; i < count; i++) {
            final View child =views.get(i);
            child.measure(widthMeasureSpec,heightMeasureSpec);
        }
         
        int finalWidth, finalHeight;
        finalWidth = measureWidth(widthMeasureSpec);
        finalHeight = measureHeight(heightMeasureSpec);
 
        this.width=finalWidth;
        this.height=finalHeight;
 
    }
     
    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
 
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = specSize;
        }
 
        return result;
    }
     
    private int measureHeight(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);
 
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = specSize;
        }
        return result;
    }
 
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childLeft = -1;
        final int count = views.size();
        //水平从左到右放置
        for (int i = 0; i < count; i++) {
            final View child =views.get(i);
            if (child.getVisibility() != View.GONE) {
                final int childWidth = child.getMeasuredWidth();
                if(childLeft==-1)
                {
                    childLeft=-childWidth;
                }
                child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
                childLeft += childWidth;
            }
        }
         
    }
     
    //绘制子元素
    @Override
    protected void onDraw(Canvas canvas) {
        //水平从左到右放置
        int count = views.size();
        for (int i = 0; i < count; i++) {
            View child =views.get(i);
            drawChild(canvas, child, getDrawingTime());
        }
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent ev){
         
        if(!lock)
        {
            if (mVelocityTracker == null) {
                mVelocityTracker = VelocityTracker.obtain();
            }
            mVelocityTracker.addMovement(ev);
             
            final int action = ev.getAction();
            final float x = ev.getX();
            final float y = ev.getY();
             
            switch (action) {
            case MotionEvent.ACTION_DOWN://按下去
                if(touchState==TOUCH_STATE_REST)
                {
                    //记录按下去的的x坐标
                    lastMotionX = x;
                    touchState=TOUCH_STATE_MOVING;
                     
                    isMoved=false;
                }
                 
                break;
            case MotionEvent.ACTION_MOVE://拖动时
                if(touchState==TOUCH_STATE_MOVING)
                {
                    float offsetX=x-lastMotionX;
                    float offsetY=y-lastMotionY;
                     
                    if(isMoved)
                    {
                        lastMotionX=x;
                        lastMotionY=y;
 
                        final int count = views.size();
                        //水平从左到右放置
                        for (int i = 0; i < count; i++) {
                            final View child =views.get(i);
                            if (child.getVisibility() != View.GONE) {
                                final int childWidth = child.getMeasuredWidth();
                                int childLeft = child.getLeft()+(int)offsetX;
                                child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
                                childLeft += childWidth;
                            }
                        }
                    }
                    else if(Math.abs(offsetX)>TOUCH_SLOP||Math.abs(offsetY)>TOUCH_SLOP)
                    {
                        //移动超过阈值,则表示移动了
                        isMoved=true;
                        removeCallbacks(mLongPressRunnable);
                    }
                }
                 
                break;
            case MotionEvent.ACTION_UP://放开时
                //释放了
                removeCallbacks(mLongPressRunnable);
                 
                if(isMoved)
                {
                    if(touchState==TOUCH_STATE_MOVING)
                    {
                        touchState=TOUCH_STATE_SLOWING;
                        int sign=0;
                        final VelocityTracker velocityTracker = mVelocityTracker;
                        //计算当前速度
                        velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
                        //x方向的速度
                        int velocityX = (int) velocityTracker.getXVelocity();
                        if(velocityX > SNAP_VELOCITY)//足够的能力向左
                        {
                            sign=1;
                            Log.e("enough to move left", "true");
                        }
                        else if (velocityX < -SNAP_VELOCITY)//足够的能力向右
                        {
                            sign=-1;
                            Log.e("enough to move right", "right");
                        }
                        else
                        {
                            sign=0;
                        }
                        moveToFitView(sign);
                        if (mVelocityTracker != null) {
                            mVelocityTracker.recycle();
                            mVelocityTracker = null;
                        }
                         
                    }
                }
                 
                 
                break;
            }
        }
        return true;
    }
     
    int offset=0;
    private void moveToFitView(int sign)
    {
        boolean b=swapView(sign);
        if(true)
        {
            View view1=views.get(1);
            int left=view1.getLeft();
            //int offset=0;
            if(left!=0)
            {
                offset=-1*left;
            }
             
            moveView();
        }
    }
     
    FlipAnimationHandler mAnimationHandler;
    int ovv=40;
    private void moveView()
    {
        final int count = views.size();
         
        if(offset!=0)
        {
            int ov=0;
            if(offset>0)
            {
                ov=ovv;
            }
            else
            {
                ov=-1*ovv;
            }
            ovv=ovv-3;
            if(ovv<1)
            {
                ovv=3;
            }
            if(Math.abs(offset)<Math.abs(ov))
            {
                ov=offset;
                offset=0;
                 
            }
            else
            {
                offset=offset-ov;
            }
             
            //水平从左到右放置
            for (int i = 0; i < count; i++) {
                final View child =views.get(i);
                final int childWidth = child.getMeasuredWidth();
                int childLeft = child.getLeft()+ov;
                child.layout(childLeft, 0, childLeft + childWidth, child.getMeasuredHeight());
                childLeft += childWidth;
            }
             
            if(mAnimationHandler==null)
            {
                mAnimationHandler = new FlipAnimationHandler();
            }
            mAnimationHandler.sleep(1);
        }
        else
        {
            ovv=40;
            touchState=TOUCH_STATE_REST;
        }
    }
     
    class FlipAnimationHandler extends Handler {
        @Override
        public void handleMessage(Message msg) {
            TouchPageView.this.moveView();
        }
 
        public void sleep(long millis) {
            this.removeMessages(0);
            sendMessageDelayed(obtainMessage(0), millis);
        }
    }
     
    private boolean swapView(int sign)
    {
        boolean b=false;
        if(sign==-1)//向左
        {
            View view0=views.get(0);
            if(view0.getLeft()<=-1*view0.getMeasuredWidth())
            {
                swapViewIndex(sign);
                 
                View view2=views.get(1);
                View view3=views.get(2);
                int childWidth=view2.getMeasuredWidth();
                int childLeft=view2.getLeft()+childWidth;
                view3.layout(childLeft, 0, childLeft + view3.getMeasuredWidth(), view3.getMeasuredHeight());
                b=true;
            }
        }
        else if(sign==1)//向右
        {
            View view3=views.get(2);
            if(view3.getLeft()>view3.getMeasuredWidth())
            {
                swapViewIndex(sign);
                 
                View view1=views.get(0);
                View view2=views.get(1);
                int childRight=view2.getLeft();
                int childLeft=childRight-view1.getMeasuredWidth();
                view1.layout(childLeft, 0, childRight, view1.getMeasuredHeight());
                b=true;
            }
        }
         
        return b;
    }
     
    private void swapViewIndex(int sign)
    {
        if(sign==-1)//向左
        {
            LinearLayout v=views.remove(0);
            views.add(v);
        }
        else if(sign==1)//向右
        {
            LinearLayout v=views.remove(views.size()-1);
            views.add(0, v);
        }
    }
}
posted on 2012-03-01 17:06 小果子 阅读(682) 评论(0)  编辑 收藏 引用 所属分类: Android & Ios

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理