本文主要是介绍PullScrollView进阶(二)-----图片下拉回弹(简易QQ空间下拉效果),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
效果是:下拉上边那个图片会相应放大,我主要是实现QQ空间里面那个效果,给出一个思路即可,具体希望网友给出建议
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><ImageViewandroid:id="@+id/background_img"android:layout_width="match_parent"android:layout_height="300dp"android:layout_marginTop="-100dp"android:scaleType="fitXY"android:src="@drawable/pic3" /><com.example.pullscrollview.CustomScrollViewandroid:id="@+id/pullscrollview"android:layout_width="match_parent"android:layout_height="match_parent" ><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="100dp"android:scaleType="fitXY"android:src="@drawable/pic3" /></com.example.pullscrollview.CustomScrollView></FrameLayout>
MainActivity
package com.example.pullscrollview;import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ImageView background_img = (ImageView) findViewById(R.id.background_img);CustomScrollView customScrollView = (CustomScrollView) findViewById(R.id.pullscrollview);customScrollView.setmHeaderView(background_img);}}
CustomScrollView
package com.example.pullscrollview;import android.content.Context;
import android.graphics.Rect;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;public class CustomScrollView extends ScrollView {// 图片控件视图private View mRootView;// 用来保存手指的当前位置坐标值private int mpreY = 0;// 初始化图片视图的矩形区域坐标位置private Rect mNormalRect;private Context context;// 底部图片private View mHeaderView;/*** 构造器* @param context* @param attrs*/public CustomScrollView(Context context, AttributeSet attrs) {super(context, attrs);this.context = context;}/*** onFinishInflate()函数,明显是在布局解析结束后会调用的函数。* 获取scrollView的孩子view控件*/@Overrideprotected void onFinishInflate() {mRootView = getChildAt(0);super.onFinishInflate();}/*** dp转px*/public static int dip2px(Context context, float dpValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale + 0.5f);}/*** 根据手机的分辨率从 px(像素) 的单位 转成为 dp*/public static int px2dip(Context context, float pxValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (pxValue / scale + 0.5f);}public void setmHeaderView(View view) {mHeaderView = view;}/*** 在onTouchEvent()中根据手指的移动距离,通过layout()函数将布局跟随移动即可*/@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN: {// 获取手指当前的位置y轴坐标mpreY = (int) event.getY();if (mRootView != null) {// 进行布局位置--获取图片初始化的矩形区域mNormalRect = new Rect(mRootView.getLeft(), mRootView.getTop(),mRootView.getRight(), mRootView.getBottom());Log.e("TAG", ""+px2dip(context, mRootView.getTop()));//100dpLog.e("TAG", ""+px2dip(context, mRootView.getBottom()));//612dp}}break;case MotionEvent.ACTION_MOVE: {//获取目前的移动的y轴值float curY = event.getY();// 获取手指移动的距离--乘以0.25是凸显阻尼效果int delta = (int) (curY - mpreY);// 根据手指滑动的距离,进行重新布局那个图片View控件!!!!!!!!!!!!//将移动的距离转为dp进行判断int deltaDP = px2dip(context, delta);int deltaPx = dip2px(context, 100);if (deltaDP <= 100) {mRootView.layout(mRootView.getLeft(), mNormalRect.top + 2* delta, mRootView.getRight(), mNormalRect.bottom + 2* delta);mHeaderView.layout(mRootView.getLeft(), dip2px(context, -100)+ delta, mRootView.getRight(), dip2px(context, 200)+ delta);} else {mRootView.layout(mRootView.getLeft(), mNormalRect.top + 2* deltaPx, mRootView.getRight(), mNormalRect.bottom + 2* deltaPx);}}break;case MotionEvent.ACTION_UP: {//回归mHeaderView.layout(mRootView.getLeft(), dip2px(context, -100),mRootView.getRight(), dip2px(context, 200));// 回归到初始化的那个矩形位置即可mRootView.layout(mNormalRect.left, mNormalRect.top,mNormalRect.right, mNormalRect.bottom);}break;}// 保存每次手指移动的最新位置return super.onTouchEvent(event);}}
这篇关于PullScrollView进阶(二)-----图片下拉回弹(简易QQ空间下拉效果)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!