android图片查看（2）

上一篇文章里我们已经完成了图片查看的基本功能，接下来，我们要在这基础上增加一些新的功能。
Android support v7 Library里面有一个叫Palette的库，通过这个库，我们可以很方便的从图像中抽取颜色，我们看一下官方文档的介绍

A helper class to extract prominent colors from an image.
A number of colors with different profiles are extracted from the image:
1. Vibrant
2. Vibrant Dark
3. Vibrant Light
4. Muted
5. Muted Dark
6. Muted Light
These can be retrieved from the appropriate getter method.

我们这里不深究颜色是怎么提取的和每种颜色的区别，有兴趣的同学可以去查看官方文档。因为现在的背景是黑色的，所以我从图像中抽取Muted Dark这个颜色作为我们toolbar的背景。
Palette提供了四种方法生成对象

• Palette generate(Bitmap bitmap)
• Palette generate(Bitmap bitmap, int numColors)
• generateAsync(Bitmap bitmap, PaletteAsyncListener listener)
• generateAsync(Bitmap bitmap, int numColors, final PaletteAsyncListener listener)
  前两种是同步方法，不过如果图片颜色比较丰富的话提取颜色的算法可能会比较耗时，所以，我们最好不要在主线程中使用。这里我们使用异步方法。
  我们修改前面的加载图片方法

Picasso.with(this)                .load(url)                .into(new Target() {                    @Override                    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {                        photoImageView.setImageBitmap(bitmap);                        Palette.from(bitmap).generate(palette1 -> {                            int colorMutedDark = palette1.getDarkMutedColor(colorDefault);                            toolbar.setBackgroundColor(colorMutedDark);                        });                        if (attacher == null) {                            attacher = new PhotoViewAttacher(photoImageView);                        } else {                            attacher.update();                        }                    }                    @Override                    public void onBitmapFailed(Drawable errorDrawable) {                        //TODO do something                    }                    @Override                    public void onPrepareLoad(Drawable placeHolderDrawable) {                        //TODO do something                    }                });

这样，我们的toolbar就能根据不同的图片变色了，有没有觉得很好玩呢：）。接下来，我们加点动画，让toolbar慢慢的从默认的颜色变化到指定的颜色，同时改变透明度。
这里涉及到颜色的改变，View Animation没有这个能力，我们使用Property Animation。
我们定义两个动画，因为这两个动画要一起动，所以再定义一个动画集合去控制

    private ObjectAnimator colorAnimator;//toolbar变色动画    private ObjectAnimator alphaAnimator;//toolbar透明度变化动画    private AnimatorSet animatorSet;//动画集合

Palette取到颜色之后我们开始动画，所以继续修改上面的代码

@Override                    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {                        photoImageView.setImageBitmap(bitmap);                        Palette.from(bitmap).generate(palette1 -> {                            int colorMutedDark = palette1.getDarkMutedColor(colorDefault);//                            toolbar.setBackgroundColor(colorMutedDark);                            colorAnimator = ObjectAnimator.ofInt(toolbar, "backgroundColor", colorDefault,                                    colorMutedDark);                            colorAnimator.setEvaluator(new ArgbEvaluator());                            alphaAnimator = ObjectAnimator.ofFloat(toolbar, "alpha", 1.0f, 0.5f);                            animatorSet.play(alphaAnimator).with(colorAnimator);                            animatorSet.setInterpolator(new AccelerateInterpolator());                            animatorSet.setDuration(DURATION);                            animatorSet.start();                        });                        if (attacher == null) {                            attacher = new PhotoViewAttacher(photoImageView);                        } else {                            attacher.update();                        }                    }

这样，我们就可以实现在DURATION时间内将toolbar的颜色变化到Palette提取出来的颜色，并将toolbar的透明度变为0.5。
接下来，我们还要做什么呢？还是加动画：）。很多app，比如网易新闻客户端的图片查看界面都有这样的功能，点击一下图片，图片上方的标题栏可以隐藏，再点击一下标题栏又会出现，我接下来也要实现这个功能。动画部分我们还是使用Property Animation，我们定义进入和退出两个动画

    private ObjectAnimator inAnimator;//appbar进入动画    private ObjectAnimator exitAnimator;//appbar退出动画

接下来定义进入和退出方法

private void animIn(View view) {        if (inAnimator == null) {            inAnimator = ObjectAnimator.ofFloat(view, "translationY", -view.getHeight(), 0);            inAnimator.setDuration(DURATION_IN_OUT);            inAnimator.setInterpolator(new DecelerateInterpolator());            inAnimator.addListener(new AnimatorListenerAdapter() {                @Override                public void onAnimationStart(Animator animation) {                    super.onAnimationStart(animation);                    if (view.getVisibility() != View.VISIBLE) {                        view.setVisibility(View.VISIBLE);                    }                }            });        }        inAnimator.start();    }    private void animOut(View view) {        if (outAnimator == null) {            outAnimator = ObjectAnimator.ofFloat(view, "translationY", 0, -view.getHeight());            outAnimator.setDuration(DURATION_IN_OUT);            outAnimator.setInterpolator(new DecelerateInterpolator());            outAnimator.addListener(new AnimatorListenerAdapter() {                @Override                public void onAnimationEnd(Animator animation) {                    super.onAnimationEnd(animation);                    if (view.getVisibility() == View.VISIBLE) {                        view.setVisibility(View.GONE);                    }                }            });        }        outAnimator.start();    }

然后监听点击事件。这里要注意的是我们用了PhotoView这个库，这个库会拦截点击事件，所以不能直接在imageView上添加onClickListener，PhotoView 提供了setOnPhotoTapListener方法来监听点击事件。我们继续修改上面的代码。

@Override                    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {                        photoImageView.setImageBitmap(bitmap);                        Palette.from(bitmap).generate(palette1 -> {                            int colorMutedDark = palette1.getDarkMutedColor(colorDefault);//                            toolbar.setBackgroundColor(colorMutedDark);                            colorAnimator = ObjectAnimator.ofInt(toolbar, "backgroundColor", colorDefault,                                    colorMutedDark);                            colorAnimator.setEvaluator(new ArgbEvaluator());                            alphaAnimator = ObjectAnimator.ofFloat(toolbar, "alpha", 1.0f, 0.5f);                            animatorSet.play(alphaAnimator).with(colorAnimator);                            animatorSet.setInterpolator(new AccelerateInterpolator());                            animatorSet.setDuration(DURATION);                            animatorSet.start();                        });                        if (attacher == null) {                            attacher = new PhotoViewAttacher(photoImageView);                            attacher.setOnPhotoTapListener((view, x, y) -> {                                if (appbar.getVisibility() == View.VISIBLE) {                                    animOut(appbar);                                } else if (appbar.getVisibility() != View.VISIBLE) {                                    animIn(appbar);                                }                            });                        } else {                            attacher.update();                        }                    }

好了，这样就能实现标题栏的隐藏和出现了。到此为止，基本功能已经全部实现，我们看一下完整的代码

package me.masteryi.gankio;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.AnimatorSet;import android.animation.ArgbEvaluator;import android.animation.ObjectAnimator;import android.graphics.Bitmap;import android.graphics.Color;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.support.design.widget.AppBarLayout;import android.support.v4.content.ContextCompat;import android.support.v7.app.AppCompatActivity;import android.support.v7.graphics.Palette;import android.support.v7.widget.Toolbar;import android.util.Log;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.animation.AccelerateInterpolator;import android.view.animation.DecelerateInterpolator;import android.widget.ImageView;import android.widget.Toast;import com.squareup.picasso.Picasso;import com.squareup.picasso.Target;import butterknife.Bind;import butterknife.ButterKnife;import me.masteryi.gankio.utils.FileUtil;import rx.Observable;import rx.android.schedulers.AndroidSchedulers;import rx.schedulers.Schedulers;import uk.co.senab.photoview.PhotoViewAttacher;/** * Created by Lee * Date 2016/2/12 * Email [e-mail] * Blog http://masteryi.me */public class PhotoActivity extends AppCompatActivity {    private static final String TAG = "PhotoActivity";    private static final int DURATION = 1000;//toolbar变色/透明度变化持续时间    private static final int DURATION_IN_OUT = 300;//toolbar进入/退出动画持续时间    public static final String PHOTO_URL = "photo_url";    @Bind(R.id.photo_iv)    ImageView photoImageView;    @Bind(R.id.toolbar)    Toolbar toolbar;    @Bind(R.id.appbar)    AppBarLayout appbar;    private String url;//需要显示图片url    private PhotoViewAttacher attacher;    private Palette palette;    private int colorDefault;//toolbar默认颜色    private ObjectAnimator colorAnimator;//toolbar变色动画    private ObjectAnimator alphaAnimator;//toolbar透明度变化动画    private ObjectAnimator inAnimator;//appbar进入动画    private ObjectAnimator outAnimator;//appbar退出动画    private AnimatorSet animatorSet;//动画集合    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_photo);        ButterKnife.bind(this);        setSupportActionBar(toolbar);        toolbar.setTitleTextColor(Color.WHITE);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        toolbar.setNavigationOnClickListener(v -> finish());        //图片URL从其他页面传过来        url = getIntent().getStringExtra(PHOTO_URL);        //toolbar默认颜色为colorPrimary        colorDefault = ContextCompat.getColor(this, R.color.colorPrimary);        //动画集合        animatorSet = new AnimatorSet();        //加载图片        Picasso.with(this)                .load(url)                .into(new Target() {                    @Override                    public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {                        photoImageView.setImageBitmap(bitmap);                        Palette.from(bitmap).generate(palette1 -> {                            int colorMutedDark = palette1.getDarkMutedColor(colorDefault);//                            toolbar.setBackgroundColor(colorMutedDark);                            colorAnimator = ObjectAnimator.ofInt(toolbar, "backgroundColor", colorDefault,                                    colorMutedDark);                            colorAnimator.setEvaluator(new ArgbEvaluator());                            alphaAnimator = ObjectAnimator.ofFloat(toolbar, "alpha", 1.0f, 0.5f);                            animatorSet.play(alphaAnimator).with(colorAnimator);                            animatorSet.setInterpolator(new AccelerateInterpolator());                            animatorSet.setDuration(DURATION);                            animatorSet.start();                        });                        if (attacher == null) {                            attacher = new PhotoViewAttacher(photoImageView);                            attacher.setOnPhotoTapListener((view, x, y) -> {                                if (appbar.getVisibility() == View.VISIBLE) {                                    animOut(appbar);                                } else if (appbar.getVisibility() != View.VISIBLE) {                                    animIn(appbar);                                }                            });                        } else {                            attacher.update();                        }                    }                    @Override                    public void onBitmapFailed(Drawable errorDrawable) {                        Toast.makeText(PhotoActivity.this, "加载图片出错", Toast.LENGTH_SHORT).show();                    }                    @Override                    public void onPrepareLoad(Drawable placeHolderDrawable) {                    }                });    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.menu_photo, menu);        return super.onCreateOptionsMenu(menu);    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case R.id.menu_download:                downloadImage();                break;        }        return super.onOptionsItemSelected(item);    }    private void downloadImage() {        Target target = new Target() {            @Override            public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {                Observable.create((Observable.OnSubscribe<Boolean>) subscriber -> {                    Log.d(TAG, "thread1:" + Thread.currentThread().getName());                    String imageName = FileUtil.url2ImageName(url);                    subscriber.onNext(FileUtil.saveImage(imageName, bitmap));                })                        .subscribeOn(Schedulers.io())                        .observeOn(AndroidSchedulers.mainThread())                        .subscribe(aBoolean -> {                            Log.d(TAG, "thread2:" + Thread.currentThread().getName());                            if (aBoolean) {                                Toast.makeText(PhotoActivity.this, "保存图片成功", Toast.LENGTH_SHORT).show();                            } else {                                Toast.makeText(PhotoActivity.this, "保存图片失败", Toast.LENGTH_SHORT).show();                            }                        }, throwable -> {                            Toast.makeText(PhotoActivity.this, "保存图片失败", Toast.LENGTH_SHORT).show();                            Log.d(TAG, throwable.getMessage());                            throwable.printStackTrace();                        });            }            @Override            public void onBitmapFailed(Drawable errorDrawable) {                Toast.makeText(PhotoActivity.this, "保存图片失败", Toast.LENGTH_SHORT).show();            }            @Override            public void onPrepareLoad(Drawable placeHolderDrawable) {            }        };        Picasso.with(this)                .load(url)                .into(target);    }    private void animIn(View view) {        if (inAnimator == null) {            inAnimator = ObjectAnimator.ofFloat(view, "translationY", -view.getHeight(), 0);            inAnimator.setDuration(DURATION_IN_OUT);            inAnimator.setInterpolator(new DecelerateInterpolator());            inAnimator.addListener(new AnimatorListenerAdapter() {                @Override                public void onAnimationStart(Animator animation) {                    super.onAnimationStart(animation);                    if (view.getVisibility() != View.VISIBLE) {                        view.setVisibility(View.VISIBLE);                    }                }            });        }        inAnimator.start();    }    private void animOut(View view) {        if (outAnimator == null) {            outAnimator = ObjectAnimator.ofFloat(view, "translationY", 0, -view.getHeight());            outAnimator.setDuration(DURATION_IN_OUT);            outAnimator.setInterpolator(new DecelerateInterpolator());            outAnimator.addListener(new AnimatorListenerAdapter() {                @Override                public void onAnimationEnd(Animator animation) {                    super.onAnimationEnd(animation);                    if (view.getVisibility() == View.VISIBLE) {                        view.setVisibility(View.GONE);                    }                }            });        }        outAnimator.start();    }}

总结

图片查看的功能已经基本实现，后面有空的话会补上收藏跟分享功能。
一个看似简单的功能还是包含很多东西的，需要了解各种第三方库的使用，期间也碰到了很多坑。比如

• 图片加载我们用的是Picasso，平时用的比较多的可能就是现实图片，直接Picasso.with(this).load(url).into(imageview)就完事了，但是下载图片我们需要得到bitmap对象，所以这里就需要用Target来实现。
• RxJava/RxAndroid最近很火，RxJava配合lambda变大时可以让代码变得非常简洁，但是对于刚接触的新手来说还是没那么简单的，我最近也在努力学习相关知识，代码中的异步调用尽量都用RxJava实现，由于理解不深，难免会出现滥用或者误用的情况，希望大家能够指出我的错误，也非常欢迎有兴趣的同学一起交流。
• Android Studio是一个非常好用的IDE，可以自动帮我们生成很多代码，但是，初学者如果过于依赖的话也会造成负面影响。之前我新建Activity一般都会选择Basic Activity，因为很方便，AS会自动生成布局文件，Java代码和value文件，这次我心血来潮，新建了一个Empty Acticity大部分东西都得自己来写，发现很多很基础的东西都不记得了，期间碰到很多问题，所以，对新手来说最好还是自己多写写代码巩固一下知识。