当前位置: 代码迷 >> Android >> Android:跟手滑动的格局ViewGroup
  详细解决方案

Android:跟手滑动的格局ViewGroup

热度:68   发布时间:2016-04-28 00:50:31.0
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

  相关解决方案