Matrial Design（四）

编辑于2017年04月01日
先看一下xmind。

一般来说没什么问题，下面展示demo以及效果图。

第一个页面

 

public class MainActivity extends AppCompatActivity {
    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext=this;
        setContentView(R.layout.activity_main);
        final ImageView iv_qrcode= (ImageView) findViewById(R.id.iv_qrcode);
        iv_qrcode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(mContext,SecondActivity.class);
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation((Activity) mContext,iv_qrcode,"iv");
                    startActivity(intent,options.toBundle());
                }else {
                    startActivity(intent);
                }
            }
        });
    }
}

 

 

第二个页面
public class SecondActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        ImageView imageView= (ImageView) findViewById(R.id.imageview);
        imageView.setImageResource(R.mipmap.ic_launcher);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
    }
}

第一个页面的XML文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="msz.myshareelementsapplication.MainActivity">

    <ImageView
        android:id="@+id/iv_qrcode"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/qrcode"
        android:scaleType="fitCenter"/>
</RelativeLayout>

 

 

 

第二个页面的XML文件

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

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:transitionName="iv"/>

</RelativeLayout>

 

即使是不同图片，动画也非常清晰。

但是在实际加载网络图片的时候却出了问题。

这是第一个页面的代码，使用Picasso加载图片，并做了本地磁盘缓存和网络缓存。

然后这是第二个页面，再次使用Picasso加载图片。

这是第二个页面的XML文件，这样设置scaleType的时候完全没有问题。

但是当我如下图将scaleType设置为fitCenter时就会出现问题。

效果就会变成这样。

没有达到预想的动画跑到中央。实际photoView是跑到了中央，也就是在中间点击的时候才能触发点击事件。

然后我把第二个页面的加载换成了无缓存再次从网络加载。

效果就变成了这样。

可以发现动画还是先跑到了左上角，而由于再次从网络加载，最后图片就定在了中间。

后来我还尝试了使用动态加载控件在代码中设置layoutparams，无效；在一个页面把图片保存下来，第二个页面通过sharedpreferences获取图片保存的地址再取出图片加载，仍然无效。

当设置宽高为matchparent，且scaleType设置为fitCenter或者不设置scaleType时，动画总是会跑到左上角，而实际photoView并不一定在哪个地方。而且可以发现返回时动画并不是边缩小图片边到底目的地，而是边裁剪图片边到底目的地，到了目的地后图片才突然缩小。