android 美团商家详情页,Android仿美团团购详情页下拉图片放大效果,简单可直接用在项目中...

一:介绍

大家在项目中,可能需要像美团团购详情页面下拉的时候美食图片放大的效果,在这里就给大家介绍如何实现这种效果,只有很少的代码,而且控件全部是安卓源生控件.

二:运行效果图

三.然后来看看如何实现吧

1.布局文件很简单,全部是源生控件,include标签是头布局,就是标题栏

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">

android:id="@+id/include"

layout="@layout/title_common"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/scrollView"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="wrap_content">

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" />

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="#50000000"

android:orientation="vertical"

android:padding="5dp">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="0048香辣虾"

android:textColor="#fff" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

android:text="2-3人套餐,特色美味,开心享受"

android:textColor="#fff"

android:textSize="10sp" />

android:layout_width="match_parent"

android:layout_height="800dp"

android:background="#f00" />

include:标题栏布局文件

android:layout_width="match_parent"

android:layout_height="40dp"

android:background="#00f">

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" />

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" />

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