顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析 / 憋错料

原理并不难. 代码量也不大. 非常简洁 . 先来个效果图

再上一波代码.

public class SpecialScrollView extends ScrollView implements ViewTreeObserver.OnPreDrawListener {
    private static final String TAG = "SpecialScrollView";
    private int mOriginalHeight;
    private int drawableHeight;
    private ImageView mImage;
    private float mLastY;
    private boolean isMeasured =false;
    public SpecialScrollView(Context context) {
        super(context);
    }

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

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

    /**
     * 设置ImageView图片, 拿到引用
     * @param mImage
     */
    public void setParallaxImage(ImageView mImage) {
        this.mImage = mImage;
        getViewTreeObserver().addOnPreDrawListener(this);

    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        LogUtils.i(TAG, "deltaY: " + deltaY + " scrollY: " + scrollY + " scrollRangeY: " + scrollRangeY
                + " maxOverScrollY: " + maxOverScrollY + " isTouchEvent: " + isTouchEvent);
        // 手指拉动 并且 是下拉
        if(isTouchEvent && deltaY < 0 && mImage!=null ){
            // 把拉动的瞬时变化量的绝对值交给mIamge, 就可以实现放大效果
            if(mImage.getHeight() <= drawableHeight ){
                int newHeight = (int) (mImage.getHeight() + Math.abs(deltaY / 3.0f));
                // 高度不超出图片最大高度时,才让其生效
                mImage.getLayoutParams().height = newHeight;
                mImage.requestLayout();
            }
        }

        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                // 执行回弹动画,  属性动画\值动画
                // 从当前高度mImage.getHeight(), 执行动画到原始高度mOriginalHeight
                if (mImage!=null){
                    final int startHeight = mImage.getHeight();
                    final int endHeight = mOriginalHeight;
                    valueAnimator(startHeight, endHeight);
                }

                break;
        }
        return super.onTouchEvent(ev);
    }

    private void valueAnimator(final int startHeight, final int endHeight) {
        ValueAnimator mValueAnim = ValueAnimator.ofInt(1);
        mValueAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator mAnim) {
                float fraction = mAnim.getAnimatedFraction();
                // percent 0.0 -> 1.0
                Log.d(TAG, "fraction: " +fraction);
                Integer newHeight = evaluate(fraction, startHeight, endHeight);

                mImage.getLayoutParams().height = newHeight;
                mImage.requestLayout();
            }
        });

        mValueAnim.setInterpolator(new OvershootInterpolator());
        mValueAnim.setDuration(500);
        mValueAnim.start();
    }

    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }

    @Override
    public boolean onPreDraw() {
        if (!isMeasured) {
            mOriginalHeight = mImage.getHeight(); //
            drawableHeight = mImage.getDrawable().getIntrinsicHeight(); //
            isMeasured = true;
            LogUtils.i(TAG, "height: " + mOriginalHeight + " drawableHeight: " + drawableHeight);
        }
        return true;
    }
}

Layout布局

<?xml version="1.0" encoding="utf-8"?>
<com.Imy.Fuli.View.SpecialScrollView 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:id="@+id/sp_scrollview"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:src="@mipmap/bizhi"
            android:scaleType="centerCrop"
            android:id="@+id/infor_icon_bg"
            android:layout_width="match_parent"
            android:layout_height="250dp" />
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <include layout="@layout/fragment_me_having_line"></include>

            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/halving_line"/>
            <RelativeLayout
                android:background="@drawable/selector_fragment_me_item_bg"
                android:id="@+id/head_icon_setting"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp">

                <TextView
                    android:paddingTop="1dp"
                    android:layout_gravity="center"
                    android:paddingLeft="15dp"
                    android:textColor="@color/color_grey_e0555555"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="16dp"
                    android:text="头像"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/collect_icon"
                    android:layout_toEndOf="@+id/collect_icon" />
                <FrameLayout
                    android:layout_marginRight="15dp"
                    android:layout_centerVertical="true"
                    android:layout_alignRight="@+id/arrow_info"
                    android:layout_width="50dp"
                    android:layout_height="50dp">
                    <com.Imy.Fuli.View.CircleImageView
                        android:id="@+id/my_uer_icon"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:src="@mipmap/user_default_photo"
                        app:civ_border_color="@color/white"
                        app:civ_border_width="2dp" />
                </FrameLayout>

                <ImageView
                    android:id="@+id/arrow_info"
                    android:layout_marginRight="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/right_arrow"
                    android:layout_centerVertical="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/halving_line"/>
            <include layout="@layout/fragment_me_having_line"></include>
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/halving_line"/>
            <LinearLayout
                android:orientation="vertical"
                android:background="@color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <RelativeLayout
                    android:background="@drawable/selector_fragment_me_item_bg"
                    android:id="@+id/personal_info_name_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp">

                    <TextView
                        android:paddingTop="1dp"
                        android:layout_gravity="center"
                        android:paddingLeft="15dp"
                        android:textColor="@color/color_grey_e0555555"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="16dp"
                        android:text="昵称"
                        android:layout_centerVertical="true"
                        android:layout_toRightOf="@+id/collect_icon"
                        android:layout_toEndOf="@+id/collect_icon" />
                    <ImageView
                        android:id="@+id/right_arrow_name"
                        android:layout_marginRight="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/right_arrow"
                        android:layout_centerVertical="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentEnd="true" />
                    <TextView
                        android:id="@+id/personal_info_user_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Imy"
                        style="@style/text_style"
                        android:layout_marginRight="15dp"
                        android:layout_centerVertical="true"
                        android:layout_toLeftOf="@+id/right_arrow_name"
                        android:layout_toStartOf="@+id/right_arrow_name" />

                </RelativeLayout>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:layout_marginLeft="24dp"
                    android:background="@color/halving_line"/>
                <RelativeLayout
                    android:background="@drawable/selector_fragment_me_item_bg"
                    android:id="@+id/personal_info_area_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp">

                    <TextView
                        android:paddingTop="1dp"
                        android:layout_gravity="center"
                        android:paddingLeft="15dp"
                        android:textColor="@color/color_grey_e0555555"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="16dp"
                        android:text="地区"
                        android:layout_centerVertical="true"
                        android:layout_toRightOf="@+id/collect_icon"
                        android:layout_toEndOf="@+id/collect_icon" />
                    <ImageView
                        android:id="@+id/right_arrow_area"
                        android:layout_marginRight="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/right_arrow"
                        android:layout_centerVertical="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentEnd="true" />
                    <TextView
                        android:id="@+id/personal_info_address"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=""
                        style="@style/text_style"
                        android:layout_marginRight="15dp"
                        android:layout_centerVertical="true"
                        android:layout_toLeftOf="@+id/right_arrow_area"
                        android:layout_toStartOf="@+id/right_arrow_area" />

                </RelativeLayout>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:layout_marginLeft="24dp"
                    android:background="@color/halving_line"/>
                <RelativeLayout
                    android:background="@drawable/selector_fragment_me_item_bg"
                    android:id="@+id/personal_info_sex_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp">

                    <TextView
                        android:paddingTop="1dp"
                        android:layout_gravity="center"
                        android:paddingLeft="15dp"
                        android:textColor="@color/color_grey_e0555555"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="16dp"
                        android:text="性别"
                        android:layout_centerVertical="true"
                        android:layout_toRightOf="@+id/collect_icon"
                        android:layout_toEndOf="@+id/collect_icon" />
                    <ImageView
                        android:id="@+id/right_arrow_sex"
                        android:layout_marginRight="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/right_arrow"
                        android:layout_centerVertical="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentEnd="true" />
                    <TextView
                        android:id="@+id/personal_info_user_sex"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        style="@style/text_style"
                        android:layout_marginBottom="1dp"
                        android:layout_marginRight="15dp"
                        android:layout_centerVertical="true"
                        android:layout_toLeftOf="@+id/right_arrow_sex"
                        android:layout_toStartOf="@+id/right_arrow_sex" />
                </RelativeLayout>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:layout_marginLeft="24dp"
                    android:background="@color/halving_line"/>
                <RelativeLayout
                    android:background="@drawable/selector_fragment_me_item_bg"
                    android:id="@+id/personal_info_age_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="8dp">

                    <TextView
                        android:paddingTop="1dp"
                        android:layout_gravity="center"
                        android:paddingLeft="15dp"
                        android:textColor="@color/color_grey_e0555555"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="16dp"
                        android:text="年龄"
                        android:layout_centerVertical="true"
                        android:layout_toRightOf="@+id/collect_icon"
                        android:layout_toEndOf="@+id/collect_icon" />
                    <ImageView
                        android:id="@+id/right_arrow_birthday"
                        android:layout_marginRight="10dp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@mipmap/right_arrow"
                        android:layout_centerVertical="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentEnd="true" />
                    <TextView
                        android:id="@+id/personal_info_age_tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=""
                        style="@style/text_style"
                        android:layout_marginRight="15dp"
                        android:layout_centerVertical="true"
                        android:layout_toLeftOf="@+id/right_arrow_birthday"
                        android:layout_toStartOf="@+id/right_arrow_birthday" />
                </RelativeLayout>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/halving_line"/>
            </LinearLayout>

            <include layout="@layout/fragment_me_having_line"></include>
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/halving_line"/>
            <RelativeLayout
                android:background="@drawable/selector_fragment_me_item_bg"
                android:id="@+id/personal_info_signature_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp">
                <TextView
                    android:paddingTop="1dp"
                    android:layout_gravity="center"
                    android:paddingLeft="15dp"
                    android:textColor="@color/color_grey_e0555555"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="16dp"
                    android:text="个性签名"
                    android:layout_centerVertical="true"
                    android:layout_toRightOf="@+id/collect_icon"
                    android:layout_toEndOf="@+id/collect_icon" />
                <ImageView
                    android:id="@+id/right_arrow_signature"
                    android:layout_marginRight="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/right_arrow"
                    android:layout_centerVertical="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />
                <RelativeLayout
                    android:layout_marginRight="15dp"
                    android:layout_centerVertical="true"
                    android:layout_toLeftOf="@+id/right_arrow_signature"
                    android:layout_toStartOf="@+id/right_arrow_signature"
                    android:layout_width="200dp"
                    android:layout_height="wrap_content">
                    <TextView
                        android:id="@+id/personal_info_signature"
                        android:layout_alignParentRight="true"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="介绍下自己吧"
                        style="@style/text_style"
                        />
                </RelativeLayout>

            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="1px"
                android:background="@color/halving_line"/>
        </LinearLayout>

    </LinearLayout>
</com.Imy.Fuli.View.SpecialScrollView>

初始化:

private void iniID() {    mSpecialScrollView = (SpecialScrollView) findViewById(R.id.sp_scrollview);    mImage = (ImageView) findViewById(R.id.infor_icon_bg);    mSpecialScrollView.setParallaxImage(mImage);}

快过年了码代码的心思都没了.~ 哎呀布局文件可无视. 懒得写demo了.

时间： 2024-08-24 02:23:10

顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析

顶部图片放大回弹效果Scrollview ---- 各应用中常见的自定义View 解析的相关文章

Android仿IOS回弹效果 ScrollView回弹总结

js+jquery+html实现在三种不通的情况下，点击图片放大的效果

css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

如何实现鼠标悬停图片放大的效果。

Android -- 自定义ScrollView实现放大回弹效果

iOS----实现scrollView或者scrollView的子类下拉图片放大的效果

第六十七篇、OC_UITableView head下拉图片放大的效果

Android PullToZoomListView实现放大回弹效果

浅谈CSS和JQuery实现鼠标悬浮图片放大效果