Android滑动改变头部动画效果（上拉缩放下拉显示）

最新推荐文章于 2021-05-28 05:06:35 发布
最新推荐文章于 2021-05-28 05:06:35 发布
阅读量4.9k 收藏 7
点赞数 2
分类专栏： Android控件的功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenggaofei/article/details/81539390
版权

基于博客：

http://blog.csdn.net/qiuchunjia/article/details/51094667

1.主要代码逻辑：

/**
 * 第一步：滚动的时候试着改变头部的高度
 * 第二步：逐渐让周围不需要的字体消失
 * 第三步：根据偏移率计算偏移量，然后把图片和需要的文字移动到顶端中心处
 */

public class SwipeView extends RelativeLayout {
private static final String TAG = "wwq";
private RelativeLayout rlHeader;
private TextView tvName, tvSchool;
private CircleImageView ivHeader; 
/**
 * 几个状态
 */
public static int TOP=0;//顶部
public static int BOTTOM=1;//底部
public int currentState=BOTTOM;//当前状态
/**
 * 变量
 *
 * @param context
 */
private int mLastY = 0;  //最后的点
private static int mNeedDistance;   // 需要滑动的距离
private static int mMinHight; //最小高度
private static int mOrignHight; //原始的高度

private int mCurrentDistance = 0;  //当前的距离
private float mRate = 0;  //距离与目标距离的变化率                              
//mRate=mCurrentDistance/mNeedDistance
private int mPhotoOriginHeight; //图片的原始高度
private int mPhotoOriginWidth; //图片的原始宽度
private int mPhotoLeft;  //图片距左边的距离
private int mPhotoTop;  //图片距离上边的距离
private int mPhotoNeedMoveDistanceX;  // 图片需要移动的X距离
private int mPhotoNeedMoveDistanceY;  // 图片需要移动的Y距离
//需要移动的文字
private int mTextLeft;  //文字距左边的距离
private int mTextTop;  //文字距离上边的距离
private int mTextNeedMoveDistanceX;  // 文字需要移动的X距离
private int mTextNeedMoveDistanceY;  //文字需要移动的Y距离


/**
 * /**
 * 初始化需要滚动的距离
 */


public SwipeView(Context context) {
    super(context, null);
}

public SwipeView(Context context, AttributeSet attrs) {
    super(context, attrs, 0);
}

public SwipeView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

private void init() {
    mOrignHight = rlHeader.getLayoutParams().height;
    mMinHight = UIUtils.dip2px(getContext(), 50);  //设置最小的高度为这么多
    mNeedDistance = mOrignHight - mMinHight;
    RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivHeader.getLayoutParams();
    mPhotoOriginHeight = params.height;
    mPhotoOriginWidth = params.width;
    mPhotoLeft = params.leftMargin;
    mPhotoTop = params.topMargin;
    mPhotoNeedMoveDistanceX = UIUtils.getWindowWidth(getContext()) / 2 - mPhotoLeft - mMinHight;
    mPhotoNeedMoveDistanceY = mPhotoTop - UIUtils.dip2px(getContext(),5);
    /*******************移动的文字初始化***************************/
    RelativeLayout.LayoutParams textParams = (RelativeLayout.LayoutParams) tvName.getLayoutParams();
    mTextLeft = textParams.leftMargin;
    mTextTop = textParams.topMargin;
    mTextNeedMoveDistanceX = UIUtils.getWindowWidth(getContext()) / 2 - mTextLeft + 10;
    mTextNeedMoveDistanceY = mTextTop - textParams.height-mMinHight/4;  //这里已改成剪去获取textview高度的

    Log.d("wwq","mNeedDistance= "+mNeedDistance);
}
RecyclerView recyclerView;

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    rlHeader = (RelativeLayout) findViewById(R.id.rl_header);
    ivHeader = (CircleImageView) findViewById(R.id.iv_header);
    tvName = (TextView) findViewById(R.id.tv_name);
    tvSchool = (TextView) findViewById(R.id.tv_school);
    rlHeader.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            init();
            rlHeader.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        }
    });
    recyclerView= (RecyclerView) findViewById(R.id.recleview);
}

@RequiresApi(api = Build.VERSION_CODES.ICE_CREAM_SANDWICH)
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
    if(currentState==TOP &&recyclerView.canScrollVertically(-1)){
        return false;
    }
    switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mLastY = (int) ev.getY();
            tempY= (int) ev.getY();
            Log.d(TAG, "ACTION_DOWN==mCurrentDistance" + mCurrentDistance);
            break;//传递事件 例如可以用来子view的点击事件等
        case MotionEvent.ACTION_MOVE:
            int y = (int) ev.getY();
            int dy = mLastY - y;
            Log.d("wwq", "dy: " + dy);
            Log.d(TAG, "ACTION_MOVE==mCurrentDistance" + mCurrentDistance);
            if (mCurrentDistance >= mNeedDistance && dy >= 0) {
                Log.d("wwq", "event false 1");
                return false;  //传递事件
            }
            if (mCurrentDistance <= 0 && dy <= 0) {
                Log.d("wwq", "event false 2"); 
                return false; //把事件传递进去
            }
            Log.d("wwq","------------------");
              return true;
        case MotionEvent.ACTION_UP: 
            Log.d(TAG, "ACTION_UP==mCurrentDistance" + mCurrentDistance);
            return false;
    }

    return super.onInterceptTouchEvent(ev);

} 
private int tempY;
private boolean isUp;

private VelocityTracker mVelocityTracker;
@Override
public boolean onTouchEvent(MotionEvent ev) {
    if (mVelocityTracker == null) {
        mVelocityTracker = VelocityTracker.obtain();
    }
    mVelocityTracker.addMovement(ev);

    switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mLastY = (int) ev.getY(); 
            break; //传递事件 例如可以用来子view的点击事件等
        case MotionEvent.ACTION_MOVE:
            int distance=((int)getY()-tempY);
            Log.d("wwq","=====  "+distance);
            int y = (int) ev.getY();
            int dy = mLastY - y;

            if (mCurrentDistance >= mNeedDistance && dy > 0) { 
                return false;  //传递事件
            }
            if (mCurrentDistance <= 0 && dy < 0) { 
                return false; //把事件传递进去
            }  
            changeTheLayout(dy);
            mLastY = y;
            return true;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            if (mVelocityTracker != null) {
                final VelocityTracker velocityTracker = mVelocityTracker;
                velocityTracker.computeCurrentVelocity(1000);
                int velocityY = (int) velocityTracker.getYVelocity();
                if (velocityY > 400){//下划
                    startToTop(0,mOrignHight);
                } else if (velocityY < -400){//上划
                    startToTop(1,mMinHight);
                } else { 
                    tempY=0;
                    if(mCurrentDistance>mNeedDistance/2){
                        Log.d("wwq","> 1/2");
                        startToTop(1,mMinHight);
                    }else {
                        Log.d("wwq","< 1/2");
                        startToTop(0,mOrignHight);
                    }
                }
                mVelocityTracker.recycle();
                mVelocityTracker = null;

            }

            Log.d(TAG, "ACTION_UP==mCurrentDistance" + mCurrentDistance);
            break;
    }
    return false;

}

/**
 * 通过滑动的偏移量
 *
 * @param dy
 */
private void changeTheLayout(int dy) {
    final ViewGroup.LayoutParams layoutParams = rlHeader.getLayoutParams();
    layoutParams.height = layoutParams.height - dy;
    rlHeader.setLayoutParams(layoutParams);
    checkTheHeight();
    rlHeader.requestLayout();
    //计算当前移动了多少距离
    mCurrentDistance = mOrignHight - rlHeader.getLayoutParams().height;
    mRate = (float) (mCurrentDistance * 1.0 / mNeedDistance);
    Log.d("wwq","rate: "+mRate);
    changeTheAlphaAndPostion(mRate);  //获取偏移率然后改变某些控件的透明度，和位置
    Log.d(TAG, "ACTION_MOVE==dy" + dy);
}
//获取了偏移率（0.0-1.0），然后就可以根据这个改变透明度了和大小了。

/**
 *   根据变化率来改变这些这些控件的变化率位置
 *
 *   @param rate
 */
private void changeTheAlphaAndPostion(float rate) {
    //先改变一些控件的透明度
    if (rate >= 1) {
    } else if(0.0!=rate) {
        tvSchool.setAlpha(1 - rate*2);
    }

    //接下来是改变控件的大小和位置了  （这就是关键了）
    final RelativeLayout.LayoutParams photoParams = (RelativeLayout.LayoutParams) ivHeader.getLayoutParams();
    photoParams.width = (int) (mPhotoOriginWidth - (rate * (mPhotoOriginWidth   - UIUtils.dip2px(getContext(), 40))));
    photoParams.height = (int) (mPhotoOriginWidth - (rate * (mPhotoOriginWidth  - UIUtils.dip2px(getContext(), 40))));
    photoParams.leftMargin = (int) (mPhotoLeft + mPhotoNeedMoveDistanceX * rate);
    photoParams.topMargin = (int) (mPhotoTop - mPhotoNeedMoveDistanceY * rate);
    Log.d(TAG, "photoParams.leftMargin" + photoParams.leftMargin);
    Log.d(TAG, " photoParams.topMargin" + photoParams.topMargin);
    ivHeader.setLayoutParams(photoParams);
    /*********************文字设置****************************/
    final RelativeLayout.LayoutParams textParams = (RelativeLayout.LayoutParams) tvName.getLayoutParams();
    textParams.leftMargin = (int) (mTextLeft + mTextNeedMoveDistanceX * rate);
    textParams.topMargin = (int) (mTextTop - mTextNeedMoveDistanceY * rate);
    Log.d(TAG, "textParams.leftMargin" + textParams.leftMargin);
    Log.d(TAG, " textParams.topMargin" + textParams.topMargin);
    tvName.setLayoutParams(textParams);
}
//卧槽，搞忘了一个方法，滑动的时候需要检查边界值；这里写了一个方法：

/**
 * 检查上边界和下边界
 */
private void checkTheHeight() {
    final ViewGroup.LayoutParams layoutParams = rlHeader.getLayoutParams();
    if (layoutParams.height < mMinHight) {
        layoutParams.height = mMinHight;
        rlHeader.setLayoutParams(layoutParams);
        rlHeader.requestLayout();
    }
    if (layoutParams.height > mOrignHight) {
        layoutParams.height = mOrignHight;
        rlHeader.setLayoutParams(layoutParams);
        rlHeader.requestLayout();
    }

}


private void startToTop(float rate,int height){

    Log.d("wwq","startTo--   "+rate);
    if(rate==1){
        mCurrentDistance=mNeedDistance; 
        currentState=TOP;

    }else{ 
        mCurrentDistance=0;
        currentState=BOTTOM;
    }

    final RelativeLayout.LayoutParams rlParams= (RelativeLayout.LayoutParams) rlHeader.getLayoutParams();
    final RelativeLayout.LayoutParams ivParams = (RelativeLayout.LayoutParams) ivHeader.getLayoutParams();
    final RelativeLayout.LayoutParams tvNameParams = (RelativeLayout.LayoutParams) tvName.getLayoutParams();
    RelativeLayout.LayoutParams tvSchoolParams= (RelativeLayout.LayoutParams) tvSchool.getLayoutParams();
    final ValueAnimator rlHAnim=ValueAnimator.ofFloat(rlParams.height,height).setDuration(200);
    rlHAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float animatedValue = (float) animation.getAnimatedValue();
            rlParams.height= (int) animatedValue;
            rlHeader.setLayoutParams(rlParams);
        }
    });

    ValueAnimator ivLeftAnim= ValueAnimator.ofFloat(ivParams.leftMargin,mPhotoLeft + mPhotoNeedMoveDistanceX * rate).setDuration(200);
    ivLeftAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value= (float) animation.getAnimatedValue();
            ivParams.leftMargin= (int) value;
            ivHeader.setLayoutParams(ivParams);
        }
    });
   ValueAnimator ivTopAnim=ValueAnimator.ofFloat(ivParams.topMargin,mPhotoTop - mPhotoNeedMoveDistanceY * rate).setDuration(200);
    ivTopAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value= (float) animation.getAnimatedValue();
            ivParams.topMargin= (int) value;
            ivHeader.setLayoutParams(ivParams);

        }
    });

    ValueAnimator ivScaleAnim=ValueAnimator.ofFloat(ivParams.height,mPhotoOriginWidth - (rate * (mPhotoOriginWidth - UIUtils.dip2px(getContext(), 40)))).setDuration(200);
    ivScaleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value= (float) animation.getAnimatedValue();
            ivParams.width= (int) value;
            ivParams.height= (int) value;
            ivHeader.setLayoutParams(ivParams);
        }
    });


    final ValueAnimator tvNameLeftAnim=ValueAnimator.ofFloat(tvNameParams.leftMargin,mTextLeft + mTextNeedMoveDistanceX * rate).setDuration(200);
    tvNameLeftAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value= (float) animation.getAnimatedValue();
            tvNameParams.leftMargin= (int) value;
            tvName.setLayoutParams(tvNameParams);
        }
    });

    ValueAnimator tvNameTopAnim=ValueAnimator.ofFloat(tvNameParams.topMargin,mTextTop - mTextNeedMoveDistanceY * rate).setDuration(200);
    tvNameTopAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value= (float) animation.getAnimatedValue();
            tvNameParams.topMargin= (int) value;
            tvName.setLayoutParams(tvNameParams);
        }
    });

    ValueAnimator tvSchoolAlphaAnim =ValueAnimator.ofFloat(tvSchool.getAlpha()*2,rate==1?0:1).setDuration(200);
    tvSchoolAlphaAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float value= (float) animation.getAnimatedValue();
            tvSchool.setAlpha(value);
        }
    });
    tvSchoolAlphaAnim.start();

    ivTopAnim.start();
    rlHAnim.start();
    ivLeftAnim.start();
    tvNameTopAnim.start();
    tvNameLeftAnim.start();
    ivScaleAnim.start();
}

 2.布局：

<com.swipe.demo.SwipeView  xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:id="@+id/rl_header"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="#f5e105"> 
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="西楚霸王"
        android:textSize="20sp"
        android:layout_marginLeft="75dp"
        android:layout_marginTop="60dp"/>
    <TextView
        android:id="@+id/tv_school"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="上海复旦大学"
        android:textSize="16sp"
        android:layout_marginLeft="75dp"
        android:layout_marginTop="5dp"
        android:layout_below="@id/tv_name"
        />
</RelativeLayout>
<android.support.v4.widget.SwipeRefreshLayout
    android:layout_below="@id/rl_header"
    android:layout_width="match_parent"
    android:id="@+id/swipeRefresh"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/recleview"
        android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>

 

冰糖葫芦三剑客
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Android_滑动的时候头部变化效果
qiuchunjia的专栏
04-08 7447
废话少说，直接上图哦
Android滑动改变头部效果
wwq006的博客
10-08 2861
滑动改变头部效果本篇文章基于以下博客，谢谢作者的无私付出和奉献 http://blog.csdn.net/qiuchunjia/article/details/51094667 在原篇的基础上进行加工 添加回弹效果 处理一些基本的bug 为和我遇到同样问题不得解的的人 效果图：https://github.com/Wwq-Scofield/CodeReview/blob/master/demo1.
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史以来的第四次熔断 。 突 。 突突 。。突突突 。。。 很尴尬 ，找不到做 gif 的东西 。怎么办呢 。（找了好久 ，在手机上下载了一个  GIF 动图制作） AppbarLayout 回顾 我记得 16 、17年的时候这个效果在很多 APP 上都有出现 。之前写过demo ，然后一直也没机会在项目中使用 。 实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
android中点击头像放大,Android头像下拉缩放动效
weixin_33632843的博客
05-27 294
头像下拉缩放动效头像下拉缩放这个在IOS中很常见，最近在Github上也看到了类似的效果，所以决定把它集成到我现在做的项目中去。Github上的开源地址：https://github.com/Frank-Zhu/PullZoomView先上2张效果图 PullToZoomView的使用这个开源框架的使用主要用到的是PullToZoomListViewEx和PullToZoomScrollView...
Android头部可滑动导航
06-24
Android头部可滑动导航
android 头部滑动导航栏,StickyHeaderViewPager
weixin_39614561的博客
05-28 312
j.s ????????Stop Supportrecommend the new project 「w446108264/ScrollableLayout 」(easy to add a headview for any view and supports sticking the navigator on the top when ItemView scrolls.)An Android library ...
Android仿京东顶部搜索框滑动伸缩动画效果
08-25
总结起来，实现Android仿京东顶部搜索框滑动伸缩动画效果的关键在于自定义滑动控件，监听滑动事件，以及通过动画技术调整标题栏和搜索框的高度。这样的设计不仅提高了界面的交互性，也为用户提供了更为流畅的操作...
Android中ScrollView 滑到头部或尾部可伸缩放大效果
08-31
在Android开发中，有时我们需要为用户带来更丰富的交互体验，比如在ScrollView中实现特定的滑动效果。在本文中，我们将探讨如何实现一个自定义的ScrollView，使其在滑动到顶部时图片能下拉放大，松手后恢复原状，...
Android WebView上下滑动显示隐藏头部
11-24
在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中内嵌网页内容。...通过以上步骤，开发者可以为自己的Android应用创建一个类似UC浏览器的滑动头部效果，提高用户在浏览网页时的互动体验。
Android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果
01-20
在Android开发中，实现顶部标题栏随滑动时的渐变隐藏和渐变显示效果是一项常见的需求，可以增强用户体验，使界面更具动态感。以下是如何实现这一效果的详细步骤： 首先，我们需要创建一个包含`RecyclerView`和顶部...
主页滑动效果，滑动显示隐藏头部
01-17
滑动显示隐藏菜单的布局代码库,跟天气主页一样的滑动效果，使用recyclerview代替listview实现，本项目是studio项目
Android仿支付宝的头部伸缩动画效果
08-30
Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件，不但允许自定义顶部导航栏，而且导航栏高度是可以伸缩的。下文给大家介绍Android仿支付宝的头部伸缩动画效果，需要的朋友参考下吧
android下拉特效，类似微信下拉，下拉滑动动画效果。
09-17
现下很流行的下拉特效，类似于微信下拉原理，绝对不吭！很好的下拉效果特效。
仿美团详情页标题栏,标题栏透明度随滑动改变，头部展示图片拉伸收缩效果
03-02
标题栏透明度随滑动改变，头部展示图片拉伸收缩效果 标题栏透明度随滑动改变，头部展示图片拉伸收缩效果 标题栏透明度随滑动改变，头部展示图片拉伸收缩效果
可上拉下拉收起展开+悬浮头部的RecyclerView
01-06
公司项目需要可上拉下拉收起展开+悬浮头部的RecyclerView，网上查了没有类似效果的。所以无可奈何的苦逼的造了个轮子
Android滑动头部控件
Mirs的博客
05-16 1171
一个滑动头部的空间，根据 https://github.com/ta893115871/StickyNavLayout 简化和修改得来，去除了tab的滑动，改为LinerLayout，增加了点击滑动到顶部，
java中qq中拉伸的文件,Android仿QQ可拉伸头部控件
weixin_32365483的博客
03-09 72
本文实例为大家分享了Android仿QQ可拉伸头部控件的具体实现代码，供大家参考，具体内容如下该控件大致思路：1.采用继承listview加入头部view。2.监听listview滚动。3.自定义动画回弹。先看效果吧：activity-main.xml布局如下：xmlns:tools="http://schemas.android.com/tools"android:layout_width="m...
android 头部伸缩动画,Android中ScrollView 滑到头部或尾部可伸缩放大效果
weixin_39805195的博客
05-25 710
最近做项目，想要这么一个效果，就是ScrollView 滑动到顶部，当不能在滑动的时候，图片可以下拉放大，松开又恢复。滑到底部没有内容的时候，也有伸缩效果，先看看效果图吧。就是如上图这么个效果。系统提供的ScrollView 是不能做到这个效果的，所以需要自己自定义，网上找了一些资料。也参考了下其他人的做法。自己也整合了一下。希望对大家有所帮助。核心的控件就是下面的这段代码：package com...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值