一:介绍
大家在项目中,可能需要像美团团购详情页面下拉的时候美食图片放大的效果,在这里就给大家介绍如何实现这种效果,只有很少的代码,而且控件全部是安卓源生控件.
二:运行效果图
三.然后来看看如何实现吧
1.布局文件很简单,全部是源生控件,include标签是头布局,就是标题栏
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zidiv.headimagescale.MainActivity">
<include
android:id="@+id/include"
layout="@layout/title_common"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="centerCrop"
android:src="@mipmap/a" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#50000000"
android:orientation="vertical"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0048香辣虾"
android:textColor="#fff" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="2-3人套餐,特色美味,开心享受"
android:textColor="#fff"
android:textSize="10sp" />
</LinearLayout>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="800dp"
android:background="#f00" />
</LinearLayout>
</ScrollView>
</LinearLayout>
include:标题栏布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#00f">
<ImageView
android:id="@+id/img_back_titlecommon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:paddingBottom="3dp"
android:paddingLeft="10dp"
android:paddingTop="3dp"
android:scaleType="fitCenter"
android:src="@mipmap/go_back" />
<TextView
android:id="@+id/txt_title_titlecommon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="标题"
android:textColor="#fff"
android:textSize="16sp" />
</RelativeLayout>
3.activity代码,图片的放大动画,scrollview的触摸监听事件都注释得很清楚
package com.zidiv.headimagescale;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ScrollView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private Context context = this;
private ScrollView scrollView;
private ImageView img;
// 记录首次按下位置
private float mFirstPosition = 0;
// 是否正在放大
private Boolean mScaling = false;
private DisplayMetrics metric;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
findViewById(R.id.rootView).findViewById(R.id.include).findViewById(R.id.img_back_titlecommon).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(context, "返回", Toast.LENGTH_SHORT).show();
}
});
// 获取屏幕宽高
metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
// 获取控件
scrollView = (ScrollView) findViewById(R.id.scrollView);
img = (ImageView) findViewById(R.id.img);
// 设置图片初始大小 这里我设为满屏的16:9,根据自己需要调整
ViewGroup.LayoutParams lp = (ViewGroup.LayoutParams) img.getLayoutParams();
lp.width = metric.widthPixels;
lp.height = metric.widthPixels * 9 / 16;
img.setLayoutParams(lp);
// 设置触摸的监听事件
scrollView.setOnTouchListener(new View.OnTouchListener() {
@Override
public 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;
}
});
}
// 手指抬起图片回弹动画 (使用了属性动画)
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 ValueAnimator.AnimatorUpdateListener() {
@Override
public 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();
}
}
四.到这里就实现了图片下拉放大的效果,代码很少.这里是demo地址,大家可以下载点击下载demo