viewpager+indicator到达顶部时，indicator悬浮效果

最新推荐文章于 2022-07-21 15:15:23 发布
最新推荐文章于 2022-07-21 15:15:23 发布
阅读量782 收藏
点赞数
分类专栏： 安卓 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013835855/article/details/71195294
版权

首先感谢http://blog.csdn.net/qiushi_1990/article/details/50288131的代码，这里我对代码进行了封装和完善（demo免费下载），处理了更多可能出现的场景，使得该组件更方便使用，最后会给出使用方法和注意事项，封装后源码如下：

package com.stickynavlistview.view;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.OverScroller;
import android.widget.ScrollView;

import com.stickynavlistview.R;

public class StickyNavLayout extends LinearLayout {

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

	private int mTopViewHeight;
	private ViewGroup mInnerScrollView;
	private boolean isTopHidden = false;

	private OverScroller mScroller;
	private VelocityTracker mVelocityTracker;
	private int mTouchSlop;
	private int mMaximumVelocity, mMinimumVelocity;

	private float mLastY;
	private boolean mDragging;

	private boolean isInControl = false;

	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();

	}

	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		if(getChildCount()!=3){
			throw new RuntimeException("should include 3 child and the third view show be ViewPager");
		}
		mTop = getChildAt(0);
		mNav = getChildAt(1);
		View view = getChildAt(2);
		if (!(view instanceof ViewPager)) {
			throw new RuntimeException(
					"the third view show be ViewPager !");
		}
		mViewPager = (ViewPager) view;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		ViewGroup.LayoutParams params = mViewPager.getLayoutParams();
		params.height = getMeasuredHeight() - mNav.getMeasuredHeight();

	}

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

	@Override
	public boolean dispatchTouchEvent(MotionEvent ev) {
		int action = ev.getAction();
		float y = ev.getY();

		switch (action) {
		case MotionEvent.ACTION_DOWN:
			mLastY = y;
			break;
		case MotionEvent.ACTION_MOVE:
			float dy = y - mLastY;
			getCurrentScrollView();

			if (mInnerScrollView instanceof ScrollView) {
				if (mInnerScrollView.getScrollY() == 0 && isTopHidden && dy > 0
						&& !isInControl) {
					isInControl = true;
					ev.setAction(MotionEvent.ACTION_CANCEL);
					MotionEvent ev2 = MotionEvent.obtain(ev);
					dispatchTouchEvent(ev);
					ev2.setAction(MotionEvent.ACTION_DOWN);
					return dispatchTouchEvent(ev2);
				}
			} else if (mInnerScrollView instanceof ListView) {

				ListView lv = (ListView) mInnerScrollView;
				View c = lv.getChildAt(lv.getFirstVisiblePosition());

				if (!isInControl && c != null && c.getTop() == 0 && isTopHidden
						&& dy > 0) {
					isInControl = true;
					ev.setAction(MotionEvent.ACTION_CANCEL);
					MotionEvent ev2 = MotionEvent.obtain(ev);
					dispatchTouchEvent(ev);
					ev2.setAction(MotionEvent.ACTION_DOWN);
					return dispatchTouchEvent(ev2);
				}
			}
			break;
		}
		return super.dispatchTouchEvent(ev);
	}

	/**
	 *
	 */
	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		final int action = ev.getAction();
		float y = ev.getY();
		switch (action) {
		case MotionEvent.ACTION_DOWN:
			mLastY = y;
			break;
		case MotionEvent.ACTION_MOVE:
			float dy = y - mLastY;
			getCurrentScrollView();

			if (Math.abs(dy) > mTouchSlop) {
				mDragging = true;
				if(mInnerScrollView==null){
					return true;
				}
				else if (mInnerScrollView instanceof ScrollView) {
					// 如果topView没有隐藏
					// 或sc的scrollY = 0 && topView隐藏 && 下拉，则拦截
					if (!isTopHidden
							|| (mInnerScrollView.getScrollY() == 0
									&& isTopHidden && dy > 0)) {

						initVelocityTrackerIfNotExists();
						mVelocityTracker.addMovement(ev);
						mLastY = y;
						return true;
					}
				} else if (mInnerScrollView instanceof ListView) {

					ListView lv = (ListView) mInnerScrollView;
					View c = lv.getChildAt(lv.getFirstVisiblePosition());
					// 如果topView没有隐藏
					// 或sc的listView在顶部 && topView隐藏 && 下拉，则拦截

					if (!isTopHidden || //
							(c != null //
									&& c.getTop() == 0//
									&& isTopHidden && dy > 0)) {

						initVelocityTrackerIfNotExists();
						mVelocityTracker.addMovement(ev);
						mLastY = y;
						return true;
					}
				}

			}
			break;
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			mDragging = false;
			recycleVelocityTracker();
			break;
		}
		return super.onInterceptTouchEvent(ev);
	}

	private void getCurrentScrollView() {

		int currentItem = mViewPager.getCurrentItem();
		PagerAdapter a = mViewPager.getAdapter();
		if (a instanceof FragmentPagerAdapter) {
			FragmentPagerAdapter fadapter = (FragmentPagerAdapter) a;
			Fragment item = (Fragment) fadapter.instantiateItem(mViewPager,
					currentItem);

			View view = item.getView();
			if(view instanceof ListView || view instanceof ScrollView){
				mInnerScrollView = (ViewGroup)view;
			}else{
				if(((ViewGroup)view).getChildAt(0) instanceof ViewGroup){
					mInnerScrollView = (ViewGroup) ((ViewGroup)view).getChildAt(0);
				}
				else{
					mInnerScrollView = null;
				}
			}
		} else if (a instanceof FragmentStatePagerAdapter) {
			FragmentStatePagerAdapter fsAdapter = (FragmentStatePagerAdapter) a;
			Fragment item = (Fragment) fsAdapter.instantiateItem(mViewPager,
					currentItem);

			View view = item.getView();
			if(view instanceof ListView || view instanceof ScrollView){
				mInnerScrollView = (ViewGroup)view;
			}else{
				if(((ViewGroup)view).getChildAt(0) instanceof ViewGroup){
					mInnerScrollView = (ViewGroup) ((ViewGroup)view).getChildAt(0);
				}
				else{
					mInnerScrollView = 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;

			Log.e("TAG", "dy = " + dy + " , y = " + y + " , mLastY = " + mLastY);

			if (!mDragging && Math.abs(dy) > mTouchSlop) {
				mDragging = true;
			}
			if (mDragging) {
				scrollBy(0, (int) -dy);

				// 如果topView隐藏，且上滑动时，则改变当前事件为ACTION_DOWN
				if (getScrollY() == mTopViewHeight && dy < 0) {
					event.setAction(MotionEvent.ACTION_DOWN);
					dispatchTouchEvent(event);
					isInControl = false;
				}
			}

			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);
	}

	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);
		}

		isTopHidden = getScrollY() == mTopViewHeight;

	}

	@Override
	public void computeScroll() {
		if (mScroller.computeScrollOffset()) {
			scrollTo(0, mScroller.getCurrY());
//			invalidate();
		}
	}

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

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

}

使用方式：

首先是布局文件，源码如下：

<com.stickynavlistview.view.StickyNavLayout
    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:orientation="vertical">

    <RelativeLayout
        android:id="@id/id_stickynavlayout_topview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4400ff00">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:gravity="center"
            android:text="软件介绍"
            android:textSize="30sp"
            android:textStyle="bold"/>

    </RelativeLayout>

    <com.stickynavlistview.view.SimpleViewPagerIndicator
        android:id="@id/id_stickynavlayout_indicator"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ffffffff">
    </com.stickynavlistview.view.SimpleViewPagerIndicator>

    <android.support.v4.view.ViewPager
        android:id="@id/id_stickynavlayout_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#44ff0000">
    </android.support.v4.view.ViewPager>

</com.stickynavlistview.view.StickyNavLayout>
注意3点，一个是该组件必须包含三个child，如果数量不对，会抛出异常，另一点是第三个child必须为viewpager，否则也会抛出异常，最后一点就是第一二个child的高度最好写死。

在activity中注意2点，1.viewpager的适配器请选择FragmentPagerAdapter或者FragmentPagerAdapter中的一种。 2.fragment的布局文件如果包含listview或者scrollview中的一种，仅支持最外层使用或者嵌套在第一层的第一个child，其它情况会出现滑动问题，listview或者scrollview不会响应。



山洼之神
关注
专栏目录
Android 进阶技术汇总一： 个性化控件(View) 方案汇总
caobaokang的专栏
03-24 958
前言：个性化控件(View)： 主要介绍那些不错个性化的View，包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。 一、Lis...
Android实现RecyclerView的下拉刷新和上拉加载更多
潇湘夜雨
10-17 6489
版权声明：转载请注明出处 博客地址 http://blog.csdn.net/never_cxb 先上效果图， Material Design风格的下拉刷新和上拉加载更多。 源码地址（欢迎star） https://github.com/studychen/SeeNewsV2 如果对于RecyclerView还不熟悉，参见这篇 Android Material Des
AutoScrollViewPage+viewpagerindicator实现广告自动播放功能
02-25
AutoScrollViewPage+viewpagerindicator实现广告自动播放功能的例子
android之滑动悬浮tab&无限循环的viewPager
小钟的专栏
01-10 4789
效果图如下： 虽然listview现在已经过时，而且这种效果也满地都是，但是因为自己项目的原因还是自己写一个，而且也想整合都涉及的优化知识点，所以还是值得写一写，当作练练手，也算是一种提升吧 一：知识点      1、属性动画的实现view的移动，让其悬浮在顶部      2、HorizontalScrollview计算宽度实现选中tab居中      3、Fragmen
Android ViewPager指示器 IndicatorBar
源码有毒的专栏
03-27 3861
先看下效果 随着ViewPager的滚动，顶部的IndicatorBar中的指示器和文字颜色进行相应的改变，实现起来也非常简单。 第一步：自定义属性 ① 一屏展示Itembar的个数，如上图，一屏显示的Item为4个， ② Item的字体颜色 ③ Item被选中后的字体颜色 ④ Indicator的高度 ⑤ Indicator的颜色
Android Behavior之ViewPager+Fragment+RecyclerView实现吸顶效果
吕氏春秋i
07-21 2041
在和UI探讨后，得到一个吸顶效果的需求，大概就是导航栏可以随着滑动改变位置。 这样的需求也做过很多，2018年前后比较流行----------behavior 以前看过很多技术类的博客 但是自己没有记录过，虽然已经是很旧的知识点了，这里再复习一下...
Android 顶部悬浮栏 + ViewPager + RecyclerView
zc19930508的博客
03-06 2926
今天写代码遇到一个问题，在ScrollView中加入ViewPager和RecyclerView list数据显示不完整，而且界面想要实现顶部悬浮的导航栏，所以我们只有重写ScrollView，受到@dyy_csdn的分发事件的启示，由于发生了控件的滑动冲突，所以我们要解决冲突，怎么解决呢？在@dyy_csdn的分发事件这篇博客中有详细提到过，所以我在此我就不做赘述了。 博客地址：http:
CoodinatorLayout 实现 banner沉浸式+滚动视差+悬浮搜索框+标题置顶复杂联动效果
isJoker的博客
08-22 5453
1.开门见上，先上效果图                                                           代码传送门 2.CoodinatorLayout及相关控件简介       CoordinatorLayout遵循Material Design风格，包含在 support Library中，结合AppBarLayout, CollapsingToo...
仿淘宝、京东商品详情页、视频悬浮效果、tab吸顶效果
weixin_39592302的博客
09-14 1266
这是仿照淘宝的商品浏览详情页，主要实现的效果有： 视频和图片横向Banner浏览效果 视频播放全屏和小窗悬浮效果 tab吸顶效果 这是效果实例图： 具体完整代码，可以下载demo自行运行查看 布局文件：使用的是 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://sc
Android开源经典项目
Tamic （大白）
09-13 5727
Android开源项目大全，包括经典个人博客，组织和开源项目
viewpage+滑动的时候标题有悬浮的效果
10-21
本项目当页面滑动到一定位置的时候可以将标题栏悬浮起来，还可以放多少个fragment实现左右滑动。
Android ScrollView向上滑动控件顶部悬浮效果实现
09-29
Android ScrollView向上滑动控件顶部悬浮效果实现，请参考文章：http://blog.csdn.net/viviwen123/article/details/39669811
tablayout,viewpager上滑悬浮效果
01-02
Android CoordinatorLayout + AppBarLayout(向上滚动隐藏指定的View)
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史以来的第四次熔断 。 突 。 突突 。。突突突 。。。 很尴尬 ，找不到做 gif 的东西 。怎么办呢 。（找了好久 ，在手机上下载了一个  GIF 动图制作） AppbarLayout 回顾 我记得 16 、17年的时候这个效果在很多 APP 上都有出现 。之前写过demo ，然后一直也没机会在项目中使用 。 实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
HeaderViewPager
11-02
HeaderViewPager 实现了Tab吸顶，tab页。
Android scrollView和viewpager嵌套 指示器吸顶 根据viewpager每个页面的内容适配高度
suwenlai的博客
04-16 2977
这几天 朋友问我了个问题  有个特别的需求  页面如下 就是当viewpager里面的当前页面内容足够多的时候  要去能滑上去 并且指示器吸顶  但是当内容不多的时候  能滑到哪就停在哪  当时第一反应是用coordinatelayout  结果不行 内容少的时候  也直接滑到顶部了  activity的xml文件   &lt;RelativeLayout xmlns:android...
带吸附效果的ViewPager（二）
白玉梁的专栏
05-05 1976
上篇实现了一个简单的吸附效果，那么这篇我们来实现上篇中所示的360软件详情页（带viewpaper）的效果！先来参观下本篇所实现的效果图：了解了上一篇的实现过程，那么本篇的效果无非是修改一下布局，将原来的列表位置换上viewpager，snapbar换上RadioGroup不久可以了吗？确实如此！只是在初始化viewpager时相对麻烦点，因为数据是要动态添加的，有同学可能问viewpager里的列
ViewPager滑动吸顶效果
Master-D的博客
09-03 270
public class MyCustomerActivity extends AppCompatActivity { private DachshundTabLayout dtbCart; private ViewPager viewpagerViewZnxuexi; private ArrayList<Fragment> fragments = new ArrayList<>(); private Fragment1 fragment1; .
关于顶部导航栏的切换（viewpager）
翠月风
12-12 1301
在实际开发中经常会遇到顶部导航栏切换的问题。我在开发中就遇到这个问题。在网上百度了很多资料。最后自己总结之后做出来了效果。现在想把自己的成果分享给大家。虽然代码有点low，不过效果缺达到了 首先我们先写一个布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layo
Android ViewPager+Fragment实现微信底部标签渐变效果
当`ViewPager`的页面改变时，调用自定义View的相应方法，更新文字和图片的颜色，实现渐变效果。 6. **布局设计**：`activity_main.xml`中的`LinearLayout`用于包裹`ViewPager`和底部的标签栏。`ViewPager`的高度被...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值