Android：跟手滑动的布局ViewGroup

跟手滑动

很多开发者对布局的跟手滑动不太了解，在此就举一个例子，看一个RelativeLayout的滑动显示

原理

无论是跟手滑动，还是弹入弹出动画，本质上都是修改View或ViewGroup的位置，也即是setX() setY()这两个方法。

• 跟手滑动

跟手滑动是指，当用户在屏幕上滑动时，某一块布局，随着手指的滑动而滑动。所以，它的实现原理就是在onTouch事件中动态获得手指滑动的距离，然后修改view的位置。

• 弹入弹出动画

跟手滑动时，有可能用户只滑出来View的一部分就松手了，为了效果更好，我们按照用户的滑动方向，将view以动画的形式显示出来。所以，它的原理就是使用ValueAnimator，动态修改view的位置

Code

xml布局

我们的目的是让id为rl_left的RelativeLayout，从屏幕左边随手滑出，也可以隐藏到屏幕左侧。

<RelativeLayout 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:background="@android:color/white" >

    <Button
        android:id="@+id/btn_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:text="show" />

    <Button
        android:id="@+id/btn_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/btn_1"
        android:text="hide" />

    <TextView
        android:id="@+id/tv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />

    <RelativeLayout
        android:id="@+id/rl_left"
        android:layout_width="@dimen/rl_left_w"
        android:layout_height="match_parent"
        android:background="#00ff00" >

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

</RelativeLayout>

MianActivity-滑动及动画的控制

重点关注的方法：

• slideToShow
• slideToHide
• onTouch

package com.example.net.mobctrl.ottotest;

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

import android.animation.ValueAnimator;
import android.animation.ValueAnimator.AnimatorUpdateListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.DecelerateInterpolator;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * 
 * @author Zheng Haibo
 *
 */
public class MainActivity extends Activity {

    private RelativeLayout rl_left;
    private ListView listView;
    private TextView tvShow;
    private int rlWidth;// 布局的宽度

    private static final int MAX_OFFSET = 5;// 5个像素误差，滑动小于5个像素就没有动画
    private float downX;// 按下时的点
    private float viewXdown;// 按下时View的位置
    private boolean lastSlidePull = false;// 最后一次滑动的方向
    private float maxOffset = 0;// 最大的滑动距离

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        System.out.println("debug:onCreate");
        setContentView(R.layout.activity_main);
        findViewById(R.id.btn_1).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                slideToShow();
            }
        });
        findViewById(R.id.btn_2).setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {
                slideToHide();
            }
        });

        tvShow = (TextView) findViewById(R.id.tv_show);

        initLeftView();

    }

    private void initLeftView() {
        rl_left = (RelativeLayout) findViewById(R.id.rl_left);
        rlWidth = getResources().getDimensionPixelSize(R.dimen.rl_left_w);
        rl_left.setX(-rlWidth);// 将rl_left的位置移动到手机屏幕左外

        // 初始化RelativeLayout的View，此处以ListView举例
        listView = (ListView) rl_left.findViewById(R.id.lv_test);
        listView.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_expandable_list_item_1, getItemData()));
        listView.setOnItemClickListener(itemListener);
    }

    /**
     * 填充假数据
     * 
     * @return
     */
    private List<String> getItemData() {
        List<String> list = new ArrayList<String>();
        for (int i = 0; i < 16; i++) {
            list.add("item" + i);
        }
        return list;
    }

    private OnItemClickListener itemListener = new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                long arg3) {
            slideToHide();
            tvShow.setText(String.format("you click item %s!", arg2));
        }
    };

    /**
     * 使用ValueAnimator将rl_left以动画的形式弹入到界面
     */
    private void slideToShow() {
        float startX = rl_left.getX();
        ValueAnimator valueAnimator = ValueAnimator.ofInt((int) startX, 0);
        valueAnimator.addUpdateListener(new AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int offset = (Integer) animation.getAnimatedValue();
                rl_left.setX(offset);
            }
        });
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        float fraction = Math.abs(startX / rlWidth);
        valueAnimator.setDuration((long) (600 * fraction));
        valueAnimator.start();
    }

    /**
     * 使用ValueAnimator将rl_left以动画的形式弹出去
     */
    private void slideToHide() {
        float startX = rl_left.getX();
        ValueAnimator valueAnimator = ValueAnimator.ofInt((int) startX,
                -rlWidth);
        valueAnimator.addUpdateListener(new AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                int offset = (Integer) animation.getAnimatedValue();
                rl_left.setX(offset);
            }
        });
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        float fraction = Math.abs((rlWidth + startX) / rlWidth);
        valueAnimator.setDuration((long) (400 * fraction));
        valueAnimator.start();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            this.downX = x;
            this.viewXdown = rl_left.getX();
            break;
        case MotionEvent.ACTION_MOVE:
            float offset = (event.getX() - downX);// 滑动距离
            float posX = viewXdown + offset;// 计算可能的位置
            maxOffset = maxOffset > Math.abs(offset) ? maxOffset : Math
                    .abs(offset);
            if (offset > 0) {// pull to show
                rl_left.setX(posX < 0 ? posX : 0);
                if (posX >= 0) {// 防止不跟手，更新downX的值
                    this.downX += posX;
                }
                lastSlidePull = true;
            } else {// push to hide
                rl_left.setX(posX > -rlWidth ? posX : -rlWidth);
                if (posX <= -rlWidth) {// 防止不跟手，更新downX的值
                    this.downX += (posX + rlWidth);
                }
                lastSlidePull = false;
            }
            break;
        case MotionEvent.ACTION_UP:
            if (maxOffset < MAX_OFFSET) {// 防止抖动
                return super.onTouchEvent(event);
            }
            // 使用动画滑动到指定位置
            if (lastSlidePull) {
                slideToShow();
            } else {
                slideToHide();
            }
            break;
        default:
            break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }
}

效果

原谅我，做截Gif太麻烦了。。

更多交流

Android开发联盟QQ群：272209595