利用NestedScrolling实现悬浮式导航详情页

最新推荐文章于 2024-04-26 10:02:53 发布
最新推荐文章于 2024-04-26 10:02:53 发布
阅读量994 收藏 1
点赞数
分类专栏： NestedScroll 悬浮导航 scoller android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxf_access/article/details/79448920
版权

1.需要实现的效果图如下:


实现方式主要有两种:

1)、ScrollView内嵌软件介绍+ViewPager+ViewPager中是ScrollView，这种方式呢，纯原生，没有涉及到自定义控件，但是这样嵌套呢，涉及到测量以及事件的冲突处理。

2)、将做外层的ScrollView改为了自定义的一个控件，继承自LinearLayout，叫做StickyNavLayout，利用NestedScrolling特性:子view和父view共同消费滑动来实现。

详细代码如下:

import android.animation.ValueAnimator;
import android.content.Context;
import android.support.v4.view.NestedScrollingParent;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.util.Log;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.view.animation.Interpolator;
import android.widget.LinearLayout;
import android.widget.OverScroller;

public class StickyNavLayout extends LinearLayout implements NestedScrollingParent
{
    private static final String TAG = "StickyNavLayout";

/*首先子View需要找到一个支持NestedScrollingParent的父View，
告知父View我准备开始和你一起处理滑动事件了，
一般情况下都是在onTouchEvent的ACTION_DOWN中调用public boolean startNestedScroll(int axes)，
然后父View就会被回调public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes)
和public void onNestedScrollAccepted(View child, View target, int nestedScrollAxes)

onStartNestedScroll可以理解是父View的一个验证机制，
父View可以在此方法中根据滑动方向等信息决定是否要和子View一起处理此次滑动，
只有在onStartNestedScroll返回true的时候才会接着调用onNestedScrollAccepted*/
    @Override
    public boolean onStartNestedScroll(View child, View target, int nestedScrollAxes)
    {
        Log.e(TAG, "onStartNestedScroll");
        return true;
    }
/*父View接受了子View的邀请，可以在此方法中做一些初始化的操作*/
    @Override
    public void onNestedScrollAccepted(View child, View target, int nestedScrollAxes)
    {
        Log.e(TAG, "onNestedScrollAccepted");
    }
/*
* 随着ACTION_UP或者ACTION_CANCEL的到来，子View需要调用public void stopNestedScroll()
* 来告知父View本次NestedScrollig结束，父View对应的会被回调public void onStopNestedScroll(View target)，
* 可以在此方法中做一些对应停止的逻辑操作比如资源释放等
* */
    @Override
    public void onStopNestedScroll(View target)
    {
        Log.e(TAG, "onStopNestedScroll");
    }
/*
* 父View处理完后，接下来子View就要进自己的滑动操作了，滑动完成后子View还需要调用public boolean dispatchNestedScroll(int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int[] offsetInWindow)
* 将自己的滑动结果再次传递给父View，父View对应的会被回调public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed)，但这步操作有一个前提，
* 就是父View没有将滑动值全部消耗掉，因为父View全部消耗掉，子View就不应该再进行滑动了，这一步也就没有必要了
*
* */
    @Override
    public void onNestedScroll(View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed)
    {
        Log.e(TAG, "onNestedScroll");
    }
/*
* 每次子View在滑动前都需要将滑动细节传递给父View，
* 一般情况下是在ACTION_MOVE中调用public boolean dispatchNestedPreScroll(int dx, int dy, int[] consumed, int[] offsetInWindow)，
* 然后父View就会被回调public void onNestedPreScroll(View target, int dx, int dy, int[] consumed)
* dx dy代表本次滑动 x y方向的距离，consumed需要子View创建并传递给父View，
* 如果父View选择要消耗掉滑动的值就需要通过此数组传递给子View,consumed[0]:x轴消费的距离;consumed[1]:y轴消费的距离
* */
    @Override
    public void onNestedPreScroll(View target, int dx, int dy, int[] consumed)
    {
        Log.e(TAG, "onNestedPreScroll");
        Log.e(TAG, "onNestedPreScroll scrollY=" + getScrollY());
        Log.e(TAG, "onNestedPreScroll dy=" + dy);
        boolean hiddenTop = dy > 0 && getScrollY() < mTopViewHeight;
        boolean showTop = dy < 0 && getScrollY() >= 0 && !ViewCompat.canScrollVertically(target, -1);

        if (hiddenTop || showTop)
        {
            scrollBy(0, dy);
            consumed[1] = dy;
        }
    }

    private int TOP_CHILD_FLING_THRESHOLD = 3;

    /*
    * 如果产生了fling，就需要子View在stopNestedScroll前调用public boolean dispatchNestedPreFling(View target, float velocityX, float velocityY)
    * 和public boolean dispatchNestedFling(View target, float velocityX, float velocityY, boolean consumed)，
    * 父View对应的会被回调public boolean onNestedPreFling(View target, float velocityX, float velocityY)
    * 和public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed)
    *参数consumed代表子View是否消耗掉了fling，fling不存在部分消耗，一旦被消耗就是指全部
    *返回值代表父View是否消耗掉了fling
     *  */
    @Override
    public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed)
    {
        Log.e(TAG, "onNestedFling, velocityX=" + velocityX + ",velocityY=" + velocityY);
        //如果是recyclerView 根据判断第一个元素是哪个位置可以判断是否消耗
        //这里判断如果第一个元素的位置是大于TOP_CHILD_FLING_THRESHOLD的
        //认为已经被消耗，在animateScroll里不会对velocityY<0时做处理
        if (target instanceof RecyclerView && velocityY < 0) {
            final RecyclerView recyclerView = (RecyclerView) target;
            final View firstChild = recyclerView.getChildAt(0);
            final int childAdapterPosition = recyclerView.getChildAdapterPosition(firstChild);
            Log.d(TAG,"onNestedFling childAdapterPosition" + childAdapterPosition);
            consumed = childAdapterPosition > TOP_CHILD_FLING_THRESHOLD;
        }
        if (!consumed) {
            animateScroll(velocityY, computeDuration(0),consumed);
        } else {
            animateScroll(velocityY, computeDuration(velocityY),consumed);
        }
        return true;
    }

    @Override
    public boolean onNestedPreFling(View target, float velocityX, float velocityY)
    {
       //不做拦截 可以传递给子View
       return false;
    }

    @Override
    public int getNestedScrollAxes()
    {
        Log.e(TAG, "getNestedScrollAxes");
        return 0;
    }

    /**
     * 根据速度计算滚动动画持续时间
     * @param velocityY
     * @return
     */
    private int computeDuration(float velocityY) {
        final int distance;
        if (velocityY > 0) {
            distance = Math.abs(mTop.getHeight() - getScrollY());
        } else {
            distance = Math.abs(mTop.getHeight() - (mTop.getHeight() - getScrollY()));
        }


        final int duration;
        velocityY = Math.abs(velocityY);
        if (velocityY > 0) {
            duration = 3 * Math.round(1000 * (distance / velocityY));
        } else {
            final float distanceRatio = (float) distance / getHeight();
            duration = (int) ((distanceRatio + 1) * 150);
        }

        return duration;

    }

    private void animateScroll(float velocityY, final int duration,boolean consumed) {
        final int currentOffset = getScrollY();
        final int topHeight = mTop.getHeight();
        if (mOffsetAnimator == null) {
            mOffsetAnimator = new ValueAnimator();
            mOffsetAnimator.setInterpolator(mInterpolator);
            mOffsetAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    if (animation.getAnimatedValue() instanceof Integer) {
                        scrollTo(0, (Integer) animation.getAnimatedValue());
                    }
                }
            });
        } else {
            mOffsetAnimator.cancel();
        }
        mOffsetAnimator.setDuration(Math.min(duration, 600));

        if (velocityY >= 0) {
            mOffsetAnimator.setIntValues(currentOffset, topHeight);
            mOffsetAnimator.start();
        }else {
            //如果子View没有消耗down事件 那么就让自身滑倒0位置
            if(!consumed){
                mOffsetAnimator.setIntValues(currentOffset, 0);
                mOffsetAnimator.start();
            }

        }
    }

    private View mTop;
    private View mNav;
    private ViewPager mViewPager;

    private int mTopViewHeight;

    private OverScroller mScroller;
    private VelocityTracker mVelocityTracker;
    private ValueAnimator mOffsetAnimator;
    private Interpolator mInterpolator;
    private int mTouchSlop;
    private int mMaximumVelocity, mMinimumVelocity;

    private float mLastY;
    private boolean mDragging;

    public StickyNavLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        setOrientation(LinearLayout.VERTICAL);

        mScroller = new OverScroller(context);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        mMaximumVelocity = ViewConfiguration.get(context)
                .getScaledMaximumFlingVelocity();
        mMinimumVelocity = ViewConfiguration.get(context)
                .getScaledMinimumFlingVelocity();

    }

    private void initVelocityTrackerIfNotExists()
    {
        if (mVelocityTracker == null)
        {
            mVelocityTracker = VelocityTracker.obtain();
        }
    }

    private void recycleVelocityTracker()
    {
        if (mVelocityTracker != null)
        {
            mVelocityTracker.recycle();
            mVelocityTracker = null;
        }
    }


//    @Override
//    public boolean onTouchEvent(MotionEvent event)
//    {
//        initVelocityTrackerIfNotExists();
//        mVelocityTracker.addMovement(event);
//        int action = event.getAction();
//        float y = event.getY();
//
//        switch (action)
//        {
//            case MotionEvent.ACTION_DOWN:
//                if (!mScroller.isFinished())
//                    mScroller.abortAnimation();
//                mLastY = y;
//                return true;
//            case MotionEvent.ACTION_MOVE:
//                float dy = y - mLastY;
//
//                if (!mDragging && Math.abs(dy) > mTouchSlop)
//                {
//                    mDragging = true;
//                }
//                if (mDragging)
//                {
//                    scrollBy(0, (int) -dy);
//                }
//
//                mLastY = y;
//                break;
//            case MotionEvent.ACTION_CANCEL:
//                mDragging = false;
//                recycleVelocityTracker();
//                if (!mScroller.isFinished())
//                {
//                    mScroller.abortAnimation();
//                }
//                break;
//            case MotionEvent.ACTION_UP:
//                mDragging = false;
//                mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
//                int velocityY = (int) mVelocityTracker.getYVelocity();
//                if (Math.abs(velocityY) > mMinimumVelocity)
//                {
//                    fling(-velocityY);
//                }
//                recycleVelocityTracker();
//                break;
//        }
//
//        return super.onTouchEvent(event);
//    }


    @Override
    protected void onFinishInflate()
    {
        super.onFinishInflate();
        mTop = findViewById(R.id.id_stickynavlayout_topview);
        mNav = findViewById(R.id.id_stickynavlayout_indicator);
        View view = findViewById(R.id.id_stickynavlayout_viewpager);
        if (!(view instanceof ViewPager))
        {
            throw new RuntimeException(
                    "id_stickynavlayout_viewpager show used by ViewPager !");
        }
        mViewPager = (ViewPager) view;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        //不限制顶部的高度
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        getChildAt(0).measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
        ViewGroup.LayoutParams params = mViewPager.getLayoutParams();
        params.height = getMeasuredHeight() - mNav.getMeasuredHeight();
        setMeasuredDimension(getMeasuredWidth(), mTop.getMeasuredHeight() + mNav.getMeasuredHeight() + mViewPager.getMeasuredHeight());

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
        super.onSizeChanged(w, h, oldw, oldh);
        mTopViewHeight = mTop.getMeasuredHeight();
    }


    public void fling(int velocityY)
    {
        mScroller.fling(0, getScrollY(), 0, velocityY, 0, 0, 0, mTopViewHeight);
        invalidate();
    }

    @Override
    public void scrollTo(int x, int y)
    {
        if (y < 0)
        {
            y = 0;
        }
        if (y > mTopViewHeight)
        {
            y = mTopViewHeight;
        }
        if (y != getScrollY())
        {
            super.scrollTo(x, y);
        }
    }

    @Override
    public void computeScroll()
    {
        Log.d(TAG,"computeScroll getCurrY():" + mScroller.getCurrY());
        if (mScroller.computeScrollOffset())
        {
            scrollTo(0, mScroller.getCurrY());
            invalidate();
        }
    }


}

主要原理就是，子View和父view一起处理一个滑动事件。在public void onNestedPreScroll(View target, int dx, int dy, int[] consumed) 中获取父view在x，y轴上要滑动的距离，并调用scrollBy(0, dy); 不断进行滑动。

对Fling的滑动，则在public boolean onNestedFling(View target, float velocityX, float velocityY, boolean consumed)中获取到y轴的滑动速度，并利用ValueAnimator .addUpdateListener 获取不断变化的y轴值，调用scrollTo来进行滑动操作。

2.使用

详情页布局如下:

    <com.zhy.view.StickyNavLayout xmlns:tools="http://schemas.android.com/tools"  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:orientation="vertical" >  
      
        <RelativeLayout  
            android:id="@id/id_stickynavlayout_topview"  
            android:layout_width="match_parent"  
            android:layout_height="300dp"  
            android:background="#4400ff00" >  
      
            <TextView  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                android:gravity="center"  
                android:text="软件介绍"  
                android:textSize="30sp"  
                android:textStyle="bold" />  
        </RelativeLayout>  
      
        <com.zhy.view.SimpleViewPagerIndicator  
            android:id="@id/id_stickynavlayout_indicator"  
            android:layout_width="match_parent"  
            android:layout_height="50dp"  
            android:background="#ffffffff" >  
        </com.zhy.view.SimpleViewPagerIndicator>  
      
        <android.support.v4.view.ViewPager  
            android:id="@id/id_stickynavlayout_viewpager"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:background="#44ff0000" >  
        </android.support.v4.view.ViewPager>  
      
    </com.zhy.view.StickyNavLayout>

最外层是父view StickyNavLayout 再往下，依次是header, viewpageIndicator, 和viewpager



只是一条程序狗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android-DZStickyNavLayout仿饿了么横向列表滑动释放查看更多
08-13
DZStickyNavLayout 仿饿了么横向列表滑动释放查看更多
简单实现js悬浮导航效果
10-20
通过动态改变元素的定位属性，我们可以实现导航栏随滚动而悬浮的效果，从而提高用户体验。 总结来说，实现JavaScript悬浮导航效果主要涉及以下知识点： 1. HTML结构的创建，包括`div`和`ul`元素的使用。 2. CSS...
Android实现滑动悬浮置顶(二)采用改写Scroview实现
fictionss的博客
10-20 2224
话不多说直接上代码： package t.s.com.wogdet; import android.content.Context; import android.support.v4.widget.NestedScrollView; import android.util.AttributeSet; import android.view.MotionEvent; import androi
推荐开源项目：StickyNavLayout —— 优雅的固定导航布局解决方案
最新发布
gitblog_00076的博客
04-26 284
推荐开源项目：StickyNavLayout —— 优雅的固定导航布局解决方案 项目地址:https://gitcode.com/ta893115871/StickyNavLayout 在网页和移动应用开发中，一个常见的设计需求就是固定顶部导航（Sticky Navigation），它能让用户在滚动页面时始终保持导航栏可见，从而提供更好的用户体验。今天我们要推荐的开源项目，StickyNavLay...
android 仿360悬浮按钮,StickyNavLayout
weixin_39566593的博客
05-26 194
StickyNavLayout 悬浮控件该项目是在一个开源项目的基础上修改的原项目地址:https://github.com/hongyangAndroid/Android-StickyNavLayout/修改如下:1.在原基础上支持对内容listview等控件空布局的滑动支持2.修改当刚刚悬浮的时候抬起手触发onItemClick事件的bug3.修改手快速滑动的时候触发onItemClick事件...
Android滑动到某个界面悬浮置顶的解决
kururunga的博客
09-20 1475
如上图,表面上来看是精选,最新,价格这个区域是滑动到该位置后直接悬浮的,其实是一个控件在微课那位置下面刚开始设置为空,当netscrollview滑动到相应高度的时候设置visibility为visible即可. 如下: mScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener...
JS实现悬浮导航(实用)
05-05
实现悬浮导航的关键在于理解JavaScript事件处理、DOM操作和CSS定位。通过监听滚动事件并根据用户的滚动行为动态调整导航栏的定位，我们可以创建出与用户滚动行为同步的悬浮导航效果。这是一种增强用户体验的有效方法...
CSS3实现圆形悬浮导航
04-02
CSS3实现圆形悬浮导航是一款鼠标响应式悬浮弹出遮罩导航菜单特效代码下载。本作品由【站长素材】收集整理，转载请注明出处！
Android利用WindowManager实现悬浮窗
08-27
Android悬浮窗实现原理和WindowManager详解 Android悬浮窗是指在Android系统中，可以悬浮在屏幕上的一种窗口，常见于QQ视频、手机杀毒软件的桌面小助手等应用中。要实现悬浮窗，需要使用WindowManager来管理窗口。...
Android 点击 悬浮穿回到顶部。ScrollView实现
Yw的博客
04-22 168
这里 我用ScrollView的scroto(0,0);方法就可以实现。 具体代码如下： MainActivity.class public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(
Android-StickyNavLayout:修改鸿神源码，仿微博
03-24
Android-StickyNavLayout 导航器的Android库位于顶部 效果图 用法 直接作为跟布局，内部一次放置，顶部内容区域，导航，ViewPager。 < com xss=removed xss=removed xss=removed xss=removed xss=removed> < RelativeLayout
JR-CoordinatorLayout:CoordinatorLayout + AppBarLayout + NestedScrollView组合使用实现地图背景，滑动悬停华丽效果。
03-11
JR协调器布局 CoordinatorLayout + AppBarLayout + NestedScrollView组合使用实现地图背景，滑动悬停华丽效果。 CoordinatorLayout即加强版FrameLayout，适合作为应用程序布局的布局（必须是根部局），提供交互行为通过给子视图设置行为可以实现他们的交互性为。侧滑菜单，可滑动删除的UI元素，视图之间跟随移动。常用支持滑动效果的子视图有：那种RecyclerView，NestedScrollView，TabLayout等切记ScrollView是无效的！ AppBarLayout是一个垂直的LinearLayout，其子视图应通过setScrollFlags（int）或者xmL中的app：layout_scrollFlags来提供他们的行为。 AppBarLayout下面的滑​​动控件，放在RecyclerView，Nes
ScrollView滑动悬停效果
03-20
ScrollView滑动悬停效果
StickyNavLayout:仿360软件介绍的一个UI
06-10
粘性导航布局 仿360软件介绍的一个UI，代码和思路主要是学习别人。 ##Author Wangjia55( ） 博客： ##效果图 ##LICENSE 版权所有 (c) 2015 WangJia55 特此授予任何人免费获得本软件和相关文档文件（“软件”）副本的许可，以不受限制地处理本软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许向其提供软件的人这样做，但须符合以下条件：上述版权声明和本许可声明应包含在软件的所有副本或重要部分中。
Android NestedScrollView悬浮固定顶部
吕氏春秋i
01-10 1599
项目中有页面涉及到多个元素组 需要NestedScrollView包裹来上下滑动接到需求 一些标题在滑动到顶部时需要置顶我之前做过关于Android Behavior之ViewPager+Fragment+RecyclerView实现吸顶效果大概就是这种效果 只不过这次是随意的组件 比如TextView或布局组件等废话不多说来看下实现效果。
推荐项目：Android StickyNavLayout - 优雅的顶部悬浮导航布局
gitblog_00070的博客
03-25 303
推荐项目：Android StickyNavLayout - 优雅的顶部悬浮导航布局 项目地址:https://gitcode.com/hongyangAndroid/Android-StickyNavLayout 项目简介 在移动应用开发中，实现一个固定在屏幕顶部、随着滚动上下隐藏或显示的导航栏是一项常见的需求。Android-StickyNavLayout 就是这样一个开源项目，由开发者@ho...
仿知乎程序（四）swipebacklayout的使用，处理TextView中图片的显示以及类360滚动布局
我本无名的专栏
01-13 2503
今天我们来完成，点击信息，进入到详细的信息页面。我们先根据下面的图，来分析一下我们要如何布局，如何实现。             首先，我们看到，在这个详细页面的title中，文字是这个信息的标题，其中有一个共享按钮的功能，可以将信息共享到其它程序中，还有一个更多，里面，有几个功能，其中主要的就是修改文字的大小。下面，就是一个正常的信息显示，大家注意，这个信息显示有一个特点，就是在兰色的ti
Android开发滑动到顶部悬停效果
聪哥的专栏
10-15 9468
之前也出个微博悬停效果，但是它里面是底部是viewpager的，还有它的自定义控件过于复杂。 这次写一个底部就一个recyclerview，算是改良版本。 废话先来看下效果图，是不是你们要的。由于我找不到csdn博客上上传视频的地方，只能上传效果。 第一张：首屏画面 第二张：滑动画面 第三张：滑动留言精选处悬停效果 希望大家能看懂三张图，联想到其中的操作，第三张图的发表
showModalBottomSheet 悬浮式导航栏
09-05
在 Flutter 中，使用 `showModalBottomSheet` 组件可以很方便地实现悬浮式导航栏。使用该组件需要传入一个BuildContext对象和一个Widget对象，Widget对象可以是任何自定义的Widget，用于显示在弹出的窗口中。同时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值