`

让任意view具有滑动效果的SlideUp

阅读更多


基本的类,只有一个:
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.view.animation.DecelerateInterpolator;

public class SlideUp implements View.OnTouchListener, ValueAnimator.AnimatorUpdateListener, Animator.AnimatorListener {
    private View view;
    private float touchableTop;
    private int autoSlideDuration = 300;
    private SlideListener slideListener;

    private ValueAnimator valueAnimator;
    private float slideAnimationTo;

    private float startPositionY;
    private float viewStartPositionY;
    private boolean canSlide = true;
    private float density;
    private float lowerPosition;
    private float viewHeight;

    private boolean hiddenInit;

    public SlideUp(final View view) {
        this.view = view;
        this.density = view.getResources().getDisplayMetrics().density;
        this.touchableTop = 300 * density;
        view.setOnTouchListener(this);
        view.setPivotY(0);
        createAnimation();
        view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (hiddenInit)
                {
                    viewHeight = view.getHeight();
                    hideImmediately();
                }
                view.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });
    }

    public boolean isVisible(){
        return view.getVisibility() == View.VISIBLE;
    }

    public void setSlideListener(SlideListener slideListener) {
        this.slideListener = slideListener;
    }

    public void setAutoSlideDuration(int autoSlideDuration) {
        this.autoSlideDuration = autoSlideDuration;
    }

    public float getAutoSlideDuration(){
        return this.autoSlideDuration;
    }

    public void setTouchableTop(float touchableTop) {
        this.touchableTop = touchableTop * density;
    }

    public float getTouchableTop() {
        return this.touchableTop/density;
    }

    public boolean isAnimationRunning(){
        return valueAnimator != null && valueAnimator.isRunning();
    }

    public void animateIn(){
        this.slideAnimationTo = 0;
        valueAnimator.setFloatValues(viewHeight, slideAnimationTo);
        valueAnimator.start();
    }

    public void animateOut(){
        this.slideAnimationTo = view.getHeight();
        valueAnimator.setFloatValues(view.getTranslationY(), slideAnimationTo);
        valueAnimator.start();
    }

    public void hideImmediately() {
        if (view.getHeight() > 0)
        {
            view.setTranslationY(viewHeight);
            view.setVisibility(View.GONE);
            notifyVisibilityChanged(View.GONE);
        }
        else {
            hiddenInit = true;
        }
    }

    private void createAnimation(){
        valueAnimator = ValueAnimator.ofFloat();
        valueAnimator.setDuration(autoSlideDuration);
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(this);
        valueAnimator.addListener(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        float touchedArea = event.getRawY() - view.getTop();
        if (isAnimationRunning())
        {
            return false;
        }
        switch (event.getActionMasked())
        {
            case MotionEvent.ACTION_DOWN:
                this.viewHeight = view.getHeight();
                startPositionY = event.getRawY();
                viewStartPositionY = view.getTranslationY();
                if (touchableTop < touchedArea)
                {
                    canSlide = false;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                float difference = event.getRawY() - startPositionY;
                float moveTo = viewStartPositionY + difference;
                float percents = moveTo * 100 / view.getHeight();

                if (moveTo > 0 && canSlide){
                    notifyPercentChanged(percents);
                    view.setTranslationY(moveTo);
                }
                if (event.getRawY() > lowerPosition)
                {
                    lowerPosition = event.getRawY();
                }
                break;
            case MotionEvent.ACTION_UP:
                float slideAnimationFrom = view.getTranslationY();
                boolean mustSlideUp = lowerPosition > event.getRawY();
                boolean scrollableAreaConsumed = view.getTranslationY() > view.getHeight() / 5;

                if (scrollableAreaConsumed && !mustSlideUp)
                {
                    slideAnimationTo = view.getHeight();
                }
                else {
                    slideAnimationTo = 0;
                }
                valueAnimator.setFloatValues(slideAnimationFrom, slideAnimationTo);
                valueAnimator.start();
                canSlide = true;
                lowerPosition = 0;
                break;
        }
        return true;
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float val = (float) animation.getAnimatedValue();
        view.setTranslationY(val);
        float percents = (view.getY() - view.getTop()) * 100 / viewHeight;
        notifyPercentChanged(percents);
    }

    private void notifyPercentChanged(float percent){
        if (slideListener != null)
        {
            slideListener.onSlide(percent);
        }
    }

    private void notifyVisibilityChanged(int visibility){
        if (slideListener != null)
        {
            slideListener.onVisibilityChanged(visibility);
        }
    }

    @Override
    public void onAnimationStart(Animator animator) {
        view.setVisibility(View.VISIBLE);
        notifyVisibilityChanged(View.VISIBLE);
    }

    @Override
    public void onAnimationEnd(Animator animator) {
        if (slideAnimationTo > 0)
        {
            view.setVisibility(View.GONE);
            notifyVisibilityChanged(View.GONE);
        }
    }

    @Override
    public void onAnimationCancel(Animator animator) {

    }

    @Override
    public void onAnimationRepeat(Animator animator) {

    }

    public interface SlideListener {
        void onSlide(float percent);
        void onVisibilityChanged(int visibility);
    }

}



基本用法:
创建一个任意类型的布局
<LinearLayout
  android:id="@+id/slideView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

获取这个view,SlideUp对象并传入view
View slideView = findViewById(R.id.slideView);
SlideUp slideUp = new SlideUp(slideView);

更复杂的例子:
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

import com.mancj.slideup.SlideUp;

public class SlideUpViewActivity extends AppCompatActivity {
    private SlideUp slideUp;
    private View dim;
    private View slideView;
    private FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slide_up_view);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        slideView = findViewById(R.id.slideView);
        dim = findViewById(R.id.dim);
        fab = (FloatingActionButton) findViewById(R.id.fab);

        slideUp = new SlideUp(slideView);
        slideUp.hideImmediately();

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                slideUp.animateIn();
                fab.hide();
            }
        });

        slideUp.setSlideListener(new SlideUp.SlideListener() {
            @Override
            public void onSlide(float percent) {
                dim.setAlpha(1 - (percent / 100));
            }

            @Override
            public void onVisibilityChanged(int visibility) {
                if (visibility == View.GONE)
                {
                    fab.show();
                }
            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_slide_up_view, menu);
        return true;
    }
}


布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary">

    <FrameLayout
        android:alpha="0"
        android:id="@+id/dim"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/dimBg" />

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.slideup.SlideUpViewActivity">

            <android.support.design.widget.AppBarLayout
                android:background="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:elevation="0dp"
                app:elevation="0dp"
                android:theme="@style/AppTheme.AppBarOverlay">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@android:color/transparent"
                    app:popupTheme="@style/AppTheme.PopupOverlay" />

            </android.support.design.widget.AppBarLayout>

            <include layout="@layout/content_slide_up_view" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_margin="@dimen/fab_margin"
                app:srcCompat="@drawable/ic_call_black_24dp"
                app:fabSize="normal" />

        </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

  • 大小: 8 MB
分享到:
评论

相关推荐

    jquery实现的2款具有滑动效果的导航代码,鼠标移动可触发导航hover状态的滑动效果

    通过掌握上述知识点,你可以创建出具有滑动效果的导航菜单,并在用户鼠标移动时触发滑动效果,同时确保在不同浏览器上的兼容性。对于前端开发者来说,熟悉jQuery和CSS动画是提升网站交互性和用户体验的关键技能。在...

    jquery实现滑动效果

    1. 确保元素具有明确的高度:滑动效果依赖于元素的高度,因此隐藏的元素必须有非零高度才能正确滑动。 2. 避免与 CSS3 动画冲突:如果同时使用 jQuery 动画和 CSS3 动画,可能产生不预期的效果,确保两者之间的协调...

    网页导航菜单滑动效果

    在压缩包文件"jq导航菜单效果menueffect"中,可能包含了实现这种效果的HTML文件、CSS文件和JavaScript文件,通过查看和学习这些文件,你可以深入理解如何将ASP、jQuery和CSS3结合起来,创建出具有滑动效果的网页导航...

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    在微信小程序中实现slideUp和slideDown滑动效果就可以利用transform属性的translateY()方法。 transform:translateY()方法的作用是移动元素的垂直位置,它的参数可以是百分比或者是像素。例如,translateY(100%)会...

    实现选项卡滑动效果

    实现选项卡滑动效果可以让交互更加生动有趣,提升用户体验。本篇文章将详细探讨如何实现这一功能,主要关注JavaScript和CSS的运用。 首先,我们需要创建HTML结构。一个基本的选项卡组件通常包括一个包含所有选项的...

    jquery的列表滑动效果

    总的来说,jQuery的列表滑动效果是一种常见的网页动态效果,通过结合`slideUp()`, `slideDown()`和`slideToggle()`方法,以及适当的DOM操作,可以轻松实现。在实际开发中,我们还需要考虑用户体验、性能优化和兼容性...

    jquery ui 的一个菜单滑动效果

    标题 "jquery ui 的一个菜单滑动效果" 涉及的是使用 jQuery UI 库来创建具有滑动动画的交互式菜单。jQuery UI 是基于 jQuery JavaScript 库的一个扩展,提供了丰富的用户界面组件,如对话框、进度条、日期选择器、...

    jqury QQ相册滑动效果

    标题“jQuery QQ相册滑动效果”涉及...总的来说,这个项目是一个使用jQuery实现的,具有弹出层展示和滑动切换效果的QQ相册模拟。开发者通过巧妙运用jQuery的动画功能和弹出层设计,为用户提供了类似QQ相册的浏览体验。

    国外很流行的jquery滑动效果

    标题中的“国外很流行的jquery滑动效果”指的是利用jQuery库实现的一种动态视觉效果,它通常涉及到页面元素(如图片、文字或整个div)的平滑移动,为网站增添交互性和吸引力。这种效果在网页设计中广泛应用,能创造...

    炫酷滑动效果(css/jquery)

    2. **动画方法**:jQuery提供了一系列的动画方法,如`.slideToggle()`, `.slideUp()`, `.slideDown()`等,用于实现滑动效果。这些方法不仅简单易用,还可以接受时间参数来控制动画速度。 3. **自定义动画**:如果...

    AJAX百度搜索自动提示效果+JQuery滑动效果

    本项目"AJAX百度搜索自动提示效果+JQuery滑动效果"结合了这两者的优势,为用户提供了类似百度搜索那样的实时自动提示功能,并辅以jQuery的平滑滑动效果,让网页界面更加生动且易用。 首先,我们来详细探讨AJAX技术...

    原创拖动与滑动酷炫效果

    jQuery的`slideToggle()`, `slideUp()`, `slideDown()`等方法可以实现这些效果。这些方法能够以动画形式改变元素的高度或可见性,使得页面变化更为流畅和吸引人。例如,一个常见的应用场景是在导航菜单中,当用户...

    Android-SlideUp-Android.zip

    Android-SlideUp-Android.zip,slideup是一个小型库,允许您向任何视图添加甜蜜的幻灯片效果。,安卓系统是谷歌在2008年设计和制造的。操作系统主要写在爪哇,C和C 的核心组件。它是在linux内核之上构建的,具有安全性...

    js滑动效果

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,尤其在实现页面交互和动态效果方面具有强大能力。"js滑动效果"是JS的一个重要应用领域,它可以让网页元素如图片、文本或整个页面按照...

    jQUERY滑动菜单,滑动效果

    3. **动画效果**:在事件处理函数中,使用`.slideUp()`、`.slideDown()`、`.slideToggle()`等方法实现滑动效果。这些方法可以配合`duration`参数设置动画速度,`easing`参数调整动画缓动函数,以实现更加平滑的过渡...

    滑动门效果、html、css

    滑动门效果是一种常见的网页设计技术,主要用于创建具有动态视觉效果的导航菜单或图像展示。在HTML、CSS和JavaScript的组合下,滑动门效果能够实现元素(如按钮或图片)在鼠标悬停时,其上下两部分独立响应,产生...

    jquery滑动显示和隐藏图片效果.rar

    `slideUp()`用于让元素以滑动方式逐渐隐藏,`slideDown()`则相反,让元素滑动显示。根据需求,可能还结合了`animate()`方法来创建自定义动画效果,调整图片显示和隐藏的速度、延迟以及平滑过渡。 此外,可能还会...

    jQuery黄色背景图片的菜单导航滑动效果

    本教程将重点讲解如何利用jQuery创建一个具有黄色背景图片和滑动效果的菜单导航。 首先,我们需要了解jQuery的基本用法。jQuery通过简洁的API简化了JavaScript的DOM操作、事件处理和动画效果。要开始使用jQuery,...

Global site tag (gtag.js) - Google Analytics