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
- android 中scrollView顶部图片下拉放大
- 自定义scrollView实现顶部图片下拉放大
- 自定义scrollView实现顶部图片下拉放大
- android ScrollView顶部使用Viewpager的轮播图,下拉图片能放大效果
- android 下拉放大头部图片的ScrollView
- android 下拉放大头部图片的ScrollView
- 图片下拉放大 自定义scrollView
- swift 下拉放大tableView顶部图片 或 放大顶部地图
- UITableView下拉顶部图片放大效果
- 自定义ScrollView实现下拉放大头部图片
- android应用开发,类似美团商品详情下拉,顶部图片放大的效果
- ListView拓展-下拉刷新,顶部图片放大效果
- ScrollView下拉视图放大
- Android ScrollView下拉图片变大
- 自定义控件之重写ScrollView实现图片下拉放大
- 自定义控件之重写ScrollView实现图片下拉放大
- 自定义控件之重写ScrollView实现图片下拉放大
- tableview顶部视图下拉放大
- 黑马程序员---学习笔记7:指针
- android:maxHeight,android:maxWidth失效
- JAVA字符串格式化-String.format()的使用
- The Unique MST
- 黑马程序员---学习笔记8:数组指针
- android 中scrollView顶部图片下拉放大
- ListView+CheckBox(二)
- git提示please tell me who you are
- 黑马程序员---学习笔记9:构造类型和结构体
- Could not open a connection to your authentication agent
- 数学分析告诉偶们什么(vamei)
- 黑马程序员---学习笔记10:结构体数组
- ubuntu14.04安装sublime
- 黑马程序员---学习笔记11:枚举