Android 仿ios下拉放大图片过度拉伸效果的最佳方案

仿ios的appstore中的图片过度拉伸效果 android仿ios下拉放大图片的最佳方案,自定义扩展RecycleView，保留其原始功能，

一.效果图：

二.快速实现：

1.主函数代码：

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.we.widget.WeRecycleView;

public class MainActivity extends Activity {

    private WeRecycleView mRecycleView;

    private int mCount = 100;
    private int mDensity;
    private TextView mTitleView;
    private final int COL_3F51B5 = Color.parseColor("#3F51B5");
    private final int RED = Color.red(COL_3F51B5);
    private final int GREEN = Color.green(COL_3F51B5);
    private final int BLUE = Color.blue(COL_3F51B5);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mDensity = (int) getResources().getDisplayMetrics().density;

        mTitleView = findViewById(R.id.title);
       ImageView ivIcon = findViewById(R.id.iv_icon);
        ivIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

            }
        });
        mTitleView.setBackgroundColor(Color.argb(0, RED, GREEN, BLUE));

        mRecycleView = findViewById(R.id.recycle);
        mRecycleView.setLayoutManager(new LinearLayoutManager(this));
        mRecycleView.setScrollMode(WeRecycleView.SCROLL_SCALE_HEAD);
        mRecycleView.setMaxScale(4f);
        //如果有titleBar，这就设titlebar的高度，没有就不需要设置
        mRecycleView.setCloseOffset(50 * mDensity);
        mRecycleView.setOnHeadExpandListener(new WeRecycleView.OnHeadExpandListener() {
            @Override
            public void onExpand(float percent) {
                mTitleView.setBackgroundColor(Color.argb((int) (255 * (1 - percent)), RED, GREEN, BLUE));
            }

            @Override
            public void onEnterSafeArea(boolean isEnter) {

            }
        });

        initAdapter();

    }


    private void initAdapter() {
        mRecycleView.setAdapter(new RecyclerView.Adapter() {
            @Override
            public int getItemViewType(int position) {
                return position;
            }

            @NonNull
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
                if (viewType == 0) {
                    final ImageView imageView = new ImageView(MainActivity.this);
                    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                    imageView.setLayoutParams(new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT
                            , (int) (getResources().getDisplayMetrics().widthPixels * 533f / 800)));
                    return new RecyclerView.ViewHolder(imageView) {
                        @Override
                        public String toString() {
                            return super.toString();
                        }
                    };
                } else {
                    TextView textView = new TextView(MainActivity.this);
                    textView.setTextColor(Color.BLACK);
                    textView.setTextSize(30);
                    textView.setGravity(Gravity.CENTER);
                    textView.setLayoutParams(new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, mDensity * 150));

                    return new RecyclerView.ViewHolder(textView) {
                        @Override
                        public String toString() {
                            return super.toString();
                        }
                    };
                }
            }

            @Override
            public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
                if (position == 0) {
                    ((ImageView) holder.itemView).setImageResource(R.drawable.pic);
                } else {
                    holder.itemView.setBackgroundColor(position % 2 == 0 ? Color.WHITE : Color.parseColor("#F0F0F0"));
                }
            }

            @Override
            public int getItemCount() {
                return mCount;
            }

        });
    }


}

2.布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.we.widget.WeRecycleView
        android:id="@+id/recycle"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/title"
        android:text="仿IOS下拉放大图片"
        android:textColor="#ffffff"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:paddingLeft="20dp"
        android:gravity="center_vertical"
        android:textSize="18dp" />
    <ImageView
        android:id="@+id/iv_icon"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="10dp"
        android:layout_alignParentBottom="true"
        android:src="@drawable/stop_timer_btn"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:textSize="18dp" />

</RelativeLayout>

3.Shape绘制带阴影效果的圆形按钮：

stop_timer_btn.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- normal -->
    <item android:state_enabled="true" android:state_focused="false" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/shape_sgf" />
            <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">
                <shape android:shape="oval">
                    <stroke android:width="1dp" android:color="#FFFCFCFC" />
                    <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!-- pressed -->
    <item android:state_enabled="true" android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/shape_sgf" />
            <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">
                <shape android:shape="oval">
                    <stroke android:width="2dp" android:color="#FFf8f640" />
                    <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!-- selected -->
    <item android:state_enabled="true" android:state_focused="true" android:state_pressed="false">
        <layer-list>
            <item android:drawable="@drawable/shape_sgf" />
            <item android:bottom="15dp" android:left="15dp" android:right="15dp" android:top="15dp">
                <shape android:shape="oval">
                    <stroke android:width="2dp" android:color="#FFf8f640" />
                    <gradient android:angle="270" android:endColor="#FF91c0e8" android:startColor="#FFa7d3fa" />
                </shape>
            </item>
        </layer-list>
    </item>

    <!-- ...... -->
</selector>

shape_sgf.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- outer circle -->
    <item>
        <shape android:shape="oval" >
            <solid android:color="#FFACB8C3" />
        </shape>
    </item>

    <!-- inner shadow of outer circle -->
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="oval">
            <solid android:color="#FFbdcad6" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="oval">
            <solid android:color="#FFc3cfd9" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="oval">
            <solid android:color="#FFcbd6df" />
        </shape>
    </item>
    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="oval">
            <solid android:color="#FFd4dee5" />
        </shape>
    </item>

    <!-- gap -->
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape android:shape="oval" >
            <solid android:color="#FFdae2e8" />
        </shape>
    </item>

    <!-- outer shadow of center circle -->
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="oval">
            <solid android:color="#FFced5dc" />
        </shape>
    </item>
    <item
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp">
        <shape android:shape="oval">
            <solid android:color="#FFbcc4c9" />
        </shape>
    </item>
    <item
        android:bottom="13dp"
        android:left="13dp"
        android:right="13dp"
        android:top="13dp">
        <shape android:shape="oval">
            <solid android:color="#FFb4bbc0" />
        </shape>
    </item>
    <item
        android:bottom="14dp"
        android:left="14dp"
        android:right="14dp"
        android:top="14dp">
        <shape android:shape="oval">
            <solid android:color="#FFacb3b8" />
        </shape>
    </item>

    <!-- center circle -->
    <item
        android:bottom="15dp"
        android:left="15dp"
        android:right="15dp"
        android:top="15dp">
        <shape android:shape="oval">
            <stroke android:width="1dp" android:color="#FFFCFCFC"/>
            <gradient
                android:angle="270"
                android:endColor="#FFCFD7DD"
                android:startColor="#FFF0F5F9" />
        </shape>
    </item>

</layer-list>

4.相关源码：

https://github.com/chengweidev/widget