AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

android 个人中心下拉弹回效果-PullscrollView

2022-01-19 165
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： android 个人中心下拉弹回效果-PullscrollView

实现效果：

image.png

这个效果就是仿qq个人中心的下拉弹回效果实现。

核心就是一个 自定义的ScrollView，如下：

package com.baobao.testpullscrollview;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
public class PullScrollView extends ScrollView {
    /** 阻尼系数,越小阻力就越大. */
    private static final float SCROLL_RATIO = 0.5f;
    /** 滑动至翻转的距离. */
    private static final int TURN_DISTANCE = 100;
    /** 头部view. */
    private View mHeader;
    /** 头部view高度. */
    private int mHeaderHeight;
    /** 头部view显示高度. */
    private int mHeaderVisibleHeight;
    /** ScrollView的content view. */
    private View mContentView;
    /** ScrollView的content view矩形. */
    private Rect mContentRect = new Rect();
    /** 首次点击的Y坐标. */
    private float mTouchDownY;
    /** 是否关闭ScrollView的滑动. */
    private boolean mEnableTouch = false;
    /** 是否开始移动. */
    private boolean isMoving = false;
    /** 是否移动到顶部位置. */
    private boolean isTop = false;
    /** 头部图片初始顶部和底部. */
    private int mInitTop, mInitBottom;
    /** 头部图片拖动时顶部和底部. */
    private int mCurrentTop, mCurrentBottom;
    /** 状态变化时的监听器. */
    private OnTurnListener mOnTurnListener;
    private enum State {
        /**顶部*/
        UP,
        /**底部*/
        DOWN,
        /**正常*/
        NORMAL
    }
    /** 状态. */
    private State mState = State.NORMAL;
    public PullScrollView(Context context) {
        super(context);
        init(context, null);
    }
    public PullScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }
    public PullScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs);
    }
    @SuppressLint("NewApi")
  private void init(Context context, AttributeSet attrs) {
        // set scroll mode
        setOverScrollMode(OVER_SCROLL_NEVER);
        if (null != attrs) {
            TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.PullScrollView);
            if (ta != null) {
                mHeaderHeight = (int) ta.getDimension(R.styleable.PullScrollView_headerHeight, -1);
                mHeaderVisibleHeight = (int) ta.getDimension(R.styleable
                        .PullScrollView_headerVisibleHeight, -1);
                ta.recycle();
            }
        }
    }
    /**
     * 设置Header
     *
     * @param view
     */
    public void setHeader(View view) {
        mHeader = view;
    }
    /**
     * 设置状态改变时的监听器
     *
     * @param turnListener
     */
    public void setOnTurnListener(OnTurnListener turnListener) {
        mOnTurnListener = turnListener;
    }
    @Override
    protected void onFinishInflate() {
        if (getChildCount() > 0) {
            mContentView = getChildAt(0);
        }
    }
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (getScrollY() == 0) {
            isTop = true;
        }
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            mTouchDownY = ev.getY();
            mCurrentTop = mInitTop = mHeader.getTop();
            mCurrentBottom = mInitBottom = mHeader.getBottom();
        }
        return super.onInterceptTouchEvent(ev);
    }
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (mContentView != null) {
            doTouchEvent(ev);
        }
        // 禁止控件本身的滑动.
        return mEnableTouch || super.onTouchEvent(ev);
    }
    /**
     * 触摸事件处理
     *
     * @param event
     */
    private void doTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_MOVE:
                doActionMove(event);
                break;
            case MotionEvent.ACTION_UP:
                // 回滚动画
                if (isNeedAnimation()) {
                    rollBackAnimation();
                }
                if (getScrollY() == 0) {
                    mState = State.NORMAL;
                }
                isMoving = false;
                mEnableTouch = false;
                break;
            default:
                break;
        }
    }
    /**
     * 执行移动动画
     *
     * @param event
     */
    private void doActionMove(MotionEvent event) {
        // 当滚动到顶部时，将状态设置为正常，避免先向上拖动再向下拖动到顶端后首次触摸不响应的问题
        if (getScrollY() == 0) {
            mState = State.NORMAL;
            // 滑动经过顶部初始位置时，修正Touch down的坐标为当前Touch点的坐标
            if (isTop) {
                isTop = false;
                mTouchDownY = event.getY();
            }
        }
        float deltaY = event.getY() - mTouchDownY;
        // 对于首次Touch操作要判断方位：UP OR DOWN
        if (deltaY < 0 && mState == State.NORMAL) {
            mState = State.UP;
        } else if (deltaY > 0 && mState == State.NORMAL) {
            mState = State.DOWN;
        }
        if (mState == State.UP) {
            deltaY = deltaY < 0 ? deltaY : 0;
            isMoving = false;
            mEnableTouch = false;
        } else if (mState == State.DOWN) {
            if (getScrollY() <= deltaY) {
                mEnableTouch = true;
                isMoving = true;
            }
            deltaY = deltaY < 0 ? 0 : deltaY;
        }
        if (isMoving) {
            // 初始化content view矩形
            if (mContentRect.isEmpty()) {
                // 保存正常的布局位置
                mContentRect.set(mContentView.getLeft(), mContentView.getTop(), mContentView.getRight(),
                        mContentView.getBottom());
            }
            // 计算header移动距离(手势移动的距离*阻尼系数*0.5)
            float headerMoveHeight = deltaY * 0.5f * SCROLL_RATIO;
            mCurrentTop = (int) (mInitTop + headerMoveHeight);
            mCurrentBottom = (int) (mInitBottom + headerMoveHeight);
            // 计算content移动距离(手势移动的距离*阻尼系数)
            float contentMoveHeight = deltaY * SCROLL_RATIO;
            // 修正content移动的距离，避免超过header的底边缘
            int headerBottom = mCurrentBottom - mHeaderVisibleHeight;
            int top = (int) (mContentRect.top + contentMoveHeight);
            int bottom = (int) (mContentRect.bottom + contentMoveHeight);
            if (top <= headerBottom) {
                // 移动content view
                mContentView.layout(mContentRect.left, top, mContentRect.right, bottom);
                // 移动header view
                mHeader.layout(mHeader.getLeft(), mCurrentTop, mHeader.getRight(), mCurrentBottom);
            }
        }
    }
    private void rollBackAnimation() {
        TranslateAnimation tranAnim = new TranslateAnimation(0, 0,
                Math.abs(mInitTop - mCurrentTop), 0);
        tranAnim.setDuration(200);
        mHeader.startAnimation(tranAnim);
        mHeader.layout(mHeader.getLeft(), mInitTop, mHeader.getRight(), mInitBottom);
        // 开启移动动画
        TranslateAnimation innerAnim = new TranslateAnimation(0, 0, mContentView.getTop(), mContentRect.top);
        innerAnim.setDuration(200);
        mContentView.startAnimation(innerAnim);
        mContentView.layout(mContentRect.left, mContentRect.top, mContentRect.right, mContentRect.bottom);
        mContentRect.setEmpty();
        // 回调监听器
        if (mCurrentTop > mInitTop + TURN_DISTANCE && mOnTurnListener != null){
            mOnTurnListener.onTurn();
        }
    }
    /**
     * 是否需要开启动画
     */
    private boolean isNeedAnimation() {
        return !mContentRect.isEmpty() && isMoving;
    }
    /**
     * 翻转事件监听器
     *
     * @author markmjw
     */
    public interface OnTurnListener {
        /**
         * 翻转回调方法
         */
        public void onTurn();
    }
}

调用Activity

package com.baobao.testpullscrollview;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
public class MainActivity extends Activity  implements PullScrollView.OnTurnListener{
   private PullScrollView mScrollView;
   private ImageView mHeadImg;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mScrollView = (PullScrollView) findViewById(R.id.scroll_view);
    mHeadImg = (ImageView) findViewById(R.id.background_img);
        mScrollView.setHeader(mHeadImg);
        mScrollView.setOnTurnListener(this);
  }
  @Override
  public void onTurn() {
    // TODO Auto-generated method stub
  }
}

xml文件：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/background_img"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginTop="-100dp"
        android:contentDescription="@null"
        android:scaleType="fitXY"
        android:src="@drawable/scrollview_header" />
    <com.baobao.testpullscrollview.PullScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:headerHeight="300dp"
        app:headerVisibleHeight="100dp" >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/transparent"
            android:orientation="vertical" >
            <RelativeLayout
                android:id="@+id/scroll_view_head"
                android:layout_width="match_parent"
                android:layout_height="112dp"
                android:layout_marginTop="100dp"
                android:background="@color/transparent"
                android:orientation="vertical" >
                <ImageView
                    android:id="@+id/user_avatar"
                    android:layout_width="68dp"
                    android:layout_height="68dp"
                    android:layout_marginLeft="21dp"
                    android:background="@android:color/white"
                    android:contentDescription="@null"
                    android:padding="1px"
                    android:src="@drawable/avatar_default" />
                <TextView
                    android:id="@+id/user_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="13dp"
                    android:layout_toRightOf="@id/user_avatar"
                    android:ellipsize="end"
                    android:shadowColor="@android:color/black"
                    android:shadowDx="3.0"
                    android:shadowDy="3.0"
                    android:shadowRadius="5.0"
                    android:singleLine="true"
                    android:text="@string/user_name"
                    android:textColor="@android:color/white"
                    android:textSize="20sp" />
                <FrameLayout
                    android:id="@+id/user_divider_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/user_avatar"
                    android:layout_marginLeft="21dp"
                    android:layout_marginRight="21dp"
                    android:layout_marginTop="4dp" >
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="1px"
                        android:layout_marginTop="5dp"
                        android:background="#DFDFDF"
                        android:contentDescription="@null" />
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="29dp"
                        android:contentDescription="@null"
                        android:src="@drawable/arrow_up" />
                </FrameLayout>
            </RelativeLayout>
        </LinearLayout>
    </com.baobao.testpullscrollview.PullScrollView>
</RelativeLayout>


文章标签：
Android开发
数据格式
XML
关键词：
Android下拉
再见孙悟空_
目录
相关文章
艾尼麻麻
|
5月前
|
前端开发 Android开发 Windows
27. 【Android教程】下拉选择框 Spinner
27. 【Android教程】下拉选择框 Spinner
艾尼麻麻
194 2
yechaoa
|
Android开发
Android官方下拉刷新控件SwipeRefreshLayout
Android官方下拉刷新控件SwipeRefreshLayout
yechaoa
705 0
Android官方下拉刷新控件SwipeRefreshLayout
二流小码农
|
Android开发
Android中下拉通知栏，Activity会走哪些生命周期？
我们就可以做一个总结：当前Activity中，下拉通知栏，是不走任何生命周期的。
二流小码农
236 0
cczhengv
|
Java Shell API
Android源码(6.0和8.1) 屏蔽状态栏下拉和屏蔽导航栏显示
Android源码(6.0和8.1) 屏蔽状态栏下拉和屏蔽导航栏显示
cczhengv
510 0
ansondroider
|
Android开发
Android 11 SystemUI(状态/导航栏)-状态栏下拉时图标的隐藏与通知面板的半透黑色背景
Android 11 SystemUI(状态/导航栏)-状态栏下拉时图标的隐藏与通知面板的半透黑色背景
ansondroider
850 0
Android 11 SystemUI(状态/导航栏)-状态栏下拉时图标的隐藏与通知面板的半透黑色背景
yechaoa
|
Android开发
Android官方下拉选择控件Spinner
Android官方下拉选择控件Spinner
yechaoa
400 0
Android官方下拉选择控件Spinner
andyahui
|
存储 缓存 Android开发
Android EditText输入框实现下拉且保存最近5个历史记录
Android EditText输入框实现下拉且保存最近5个历史记录
andyahui
434 0
Android EditText输入框实现下拉且保存最近5个历史记录
程思扬
|
Android开发
Android开发禁用通知栏下拉
Android开发禁用通知栏下拉
程思扬
276 0
jerry_coder
|
Android开发
【Android】仿淘宝商品详情页面的下拉渐变
最近需要做一个和最新版淘宝相似的商品详情页。先看原版： 淘宝的版本 我实现的效果： 我的版本 因为单纯实现渐变功能，所以背景只用了一张尺寸较大的imageview。
jerry_coder
2625 0
kandy_aliyq
|
XML Android开发 数据格式
Android 好用的下拉控件Spinner
一、参考 1、android Spinner控件详解 2、最新Spinner用法详解 二、实例 1、普通的spinner用法及在string-array中的数据加载，此UI是在MD风格下，在不同Theme下其实是有不同UI展示，也可选择下拉模式是：dropdown或者dialog，默认是dropdown的 1-2.
kandy_aliyq
1143 0