android 中scrollView顶部图片下拉放大

来源:互联网 发布:乐视tv网络电视好用吗 编辑:程序博客网 时间:2024/04/28 16:08

项目中需要在scrollView下拉的时候顶部的图片放大,网络上没有找到合适的,自己写了也


不多说了,直接上代码

这是布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <ScrollView        android:id="@+id/scollview"        android:layout_width="match_parent"        android:layout_height="match_parent" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <ImageView                android:id="@+id/img"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_gravity="center"                android:scaleType="centerCrop"                android:src="@drawable/item" />            <View                android:layout_width="match_parent"                android:layout_height="1000dp"                android:background="#FF0000" />        </LinearLayout>    </ScrollView></LinearLayout>

注意ImageView 中的 android:layout_gravity="centerCrop"不可以少,不然放大时就不是已中点为中心放大了


Activity代码

package com.example.myscollview;import android.animation.ObjectAnimator;import android.animation.ValueAnimator;import android.animation.ValueAnimator.AnimatorUpdateListener;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.util.DisplayMetrics;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;import android.view.View.OnTouchListener;import android.widget.ImageView;import android.widget.ScrollView;public class MainActivity extends Activity {private ScrollView scrollView;private ImageView img;// 记录首次按下位置private float mFirstPosition = 0;// 是否正在放大private Boolean mScaling = false;private DisplayMetrics metric;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);// 获取屏幕宽高metric = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(metric);//获取控件scrollView = (ScrollView) findViewById(R.id.scollview);img = (ImageView) findViewById(R.id.img);//设置图片初始大小  这里我设为满屏的16:9ViewGroup.LayoutParams lp = (ViewGroup.LayoutParams) img.getLayoutParams();lp.width = metric.widthPixels;lp.height = metric.widthPixels * 9 / 16;img.setLayoutParams(lp);//监听滚动事件scrollView.setOnTouchListener(new OnTouchListener() {@SuppressLint({ "ClickableViewAccessibility", "NewApi" })@Overridepublic boolean onTouch(View v, MotionEvent event) {ViewGroup.LayoutParams lp = (ViewGroup.LayoutParams) img.getLayoutParams();switch (event.getAction()) {case MotionEvent.ACTION_UP://手指离开后恢复图片mScaling = false;replyImage();break;case MotionEvent.ACTION_MOVE:if (!mScaling) {if (scrollView.getScrollY() == 0) {mFirstPosition = event.getY();// 滚动到顶部时记录位置,否则正常返回} else {break;}}int distance = (int) ((event.getY() - mFirstPosition) * 0.6); // 滚动距离乘以一个系数if (distance < 0) { // 当前位置比记录位置要小,正常返回break;}// 处理放大mScaling = true;lp.width = metric.widthPixels + distance;lp.height = (metric.widthPixels + distance) * 9 / 16;img.setLayoutParams(lp);return true; // 返回true表示已经完成触摸事件,不再处理}return false;}});}// 回弹动画 (使用了属性动画)@SuppressLint("NewApi")public void replyImage() {final ViewGroup.LayoutParams lp = (ViewGroup.LayoutParams) img.getLayoutParams();final float w = img.getLayoutParams().width;// 图片当前宽度final float h = img.getLayoutParams().height;// 图片当前高度final float newW = metric.widthPixels;// 图片原宽度final float newH = metric.widthPixels * 9 / 16;// 图片原高度// 设置动画ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration(200);anim.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float cVal = (Float) animation.getAnimatedValue();lp.width = (int) (w - (w - newW) * cVal);lp.height = (int) (h - (h - newH) * cVal);img.setLayoutParams(lp);}});anim.start();}}

大致说一下原来. 在下拉的时候,在到达顶点后,计算图片继续下拉的偏移量,对ImageView的大小进行修改,达到放大图片的效果。放手时使用属性动画,实现回弹效果。非常的简单。

不错程序有一个小bug ,先向上移动再下拉放大图片后,放手时顶部会闪出白色,如果有大神解决了这个,记得告诉我要怎么改呀。

======================2016年 1月17日==============

先向上移动再下拉放大图片后,放手时顶部会闪出白色,其实是scroll中的动画,不同的厂家会定义不同的效果。
去除的方式,在scollView中添加:
android:overScrollMode="never"

(对部分过滤了该属性的ROM无效,2.3以下的版本没有改属性)

效果图

                          


源码下载

0 0
原创粉丝点击