Android:跟手滑动的布局ViewGroup

跟手滑动

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

原理

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

跟手滑动

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

弹入弹出动画

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

Codexml布局

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

==”match_parent”android:background=”@android:color/white” ><Button==”true”android:text=”show” /><Button===”hide” /><TextView=”wrap_content”android:layout_centerInParent=”true” /><RelativeLayout=”match_parent”android:background=”#00ff00″ ><ListView=>MianActivity-滑动及动画的控制重点关注的方法: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 * */{private RelativeLayout rl_left;private ListView listView;private TextView tvShow;MAX_OFFSET = downX;viewXdown;lastSlidePull = maxOffset = (Bundle savedInstanceState) {super.onCreate(savedInstanceState);System.out.println(“debug:onCreate”);setContentView(R.layout.activity_main);findViewById(R.id.btn_1).setOnClickListener(new OnClickListener() {(View arg0) {slideToShow();}});findViewById(R.id.btn_2).setOnClickListener(new OnClickListener() {(View arg0) {slideToHide();}});tvShow = (TextView) findViewById(R.id.tv_show);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() {(AdapterView<?> arg0, View arg1, int arg2,long arg3) {slideToHide();tvShow.setText(String.format(“you click item %s!”, arg2));}};/*** 使用ValueAnimator将rl_left以动画的形式弹入到界面*/() {float startX = rl_left.getX();ValueAnimator valueAnimator = ValueAnimator.ofInt((int) startX, 0);valueAnimator.addUpdateListener(new AnimatorUpdateListener() {(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以动画的形式弹出去*/() {float startX = rl_left.getX();ValueAnimator valueAnimator = ValueAnimator.ofInt((int) startX,-rlWidth);valueAnimator.addUpdateListener(new AnimatorUpdateListener() {(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();}(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 showrl_left.setX(posX < 0 ? posX : 0);if (posX >= 0) {// 防止不跟手,更新downX的值this.downX += posX;}lastSlidePull = true;} else {// push to hiderl_left.setX(posX > -rlWidth ? posX : -rlWidth);if (posX <= -rlWidth) {// 防止不跟手,更新downX的值this.downX += (posX + rlWidth);}lastSlidePull = false;}break;case MotionEvent.ACTION_UP:.onTouchEvent(event);}// 使用动画滑动到指定位置if (lastSlidePull) {slideToShow();} else {slideToHide();}break;default:break;}return super.onTouchEvent(event);}() {super.onDestroy();}}效果

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

更多交流

Android开发联盟QQ群:272209595

人生就是要感受美丽的、善良的,丑恶的、病态的。

Android:跟手滑动的布局ViewGroup

相关文章:

你感兴趣的文章:

标签云: