PullScrollView进阶(二)-----图片下拉回弹(简易QQ空间下拉效果)

2024-08-31 23:48

本文主要是介绍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空间下拉效果)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1125344

相关文章

Python进阶之Excel基本操作介绍

《Python进阶之Excel基本操作介绍》在现实中,很多工作都需要与数据打交道,Excel作为常用的数据处理工具,一直备受人们的青睐,本文主要为大家介绍了一些Python中Excel的基本操作,希望... 目录概述写入使用 xlwt使用 XlsxWriter读取修改概述在现实中,很多工作都需要与数据打交

C#中图片如何自适应pictureBox大小

《C#中图片如何自适应pictureBox大小》文章描述了如何在C#中实现图片自适应pictureBox大小,并展示修改前后的效果,修改步骤包括两步,作者分享了个人经验,希望对大家有所帮助... 目录C#图片自适应pictureBox大小编程修改步骤总结C#图片自适应pictureBox大小上图中“z轴

使用Python将长图片分割为若干张小图片

《使用Python将长图片分割为若干张小图片》这篇文章主要为大家详细介绍了如何使用Python将长图片分割为若干张小图片,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. python需求的任务2. Python代码的实现3. 代码修改的位置4. 运行结果1. Python需求

用Java打造简易计算器的实现步骤

《用Java打造简易计算器的实现步骤》:本文主要介绍如何设计和实现一个简单的Java命令行计算器程序,该程序能够执行基本的数学运算(加、减、乘、除),文中通过代码介绍的非常详细,需要的朋友可以参考... 目录目标:一、项目概述与功能规划二、代码实现步骤三、测试与优化四、总结与收获总结目标:简单计算器,设计

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》:本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt

如何用Python绘制简易动态圣诞树

《如何用Python绘制简易动态圣诞树》这篇文章主要给大家介绍了关于如何用Python绘制简易动态圣诞树,文中讲解了如何通过编写代码来实现特定的效果,包括代码的编写技巧和效果的展示,需要的朋友可以参考... 目录代码:效果:总结 代码:import randomimport timefrom math

使用 Python 和 LabelMe 实现图片验证码的自动标注功能

《使用Python和LabelMe实现图片验证码的自动标注功能》文章介绍了如何使用Python和LabelMe自动标注图片验证码,主要步骤包括图像预处理、OCR识别和生成标注文件,通过结合Pa... 目录使用 python 和 LabelMe 实现图片验证码的自动标注环境准备必备工具安装依赖实现自动标注核心

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频,让我们珍惜时间,因为一生是有限的。使用python创建生命倒计时图表,珍惜时间