【达内课程】图库应用（4）

添加动画

今天给查看大图后左右滑动的操作增加动画。如果对动画不了解，可以查看 Android 中的动画

需要写 4 个动画，简单画一下：

动画1：left2right_in.xml ，未展示的图片从左向右滑入屏幕

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="800"
        android:fromXDelta="-100%"
        android:toXDelta="0" />
</set>

动画2：left2right_out.xml ，展示中的图片从屏幕向右滑出

left2right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="800"
        android:fromXDelta="0"
        android:toXDelta="100%" />
</set>

动画3：right2left_in.xml ，未展示的图片从屏幕外向左滑入屏幕

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="800"
        android:fromXDelta="100%"
        android:toXDelta="0" />
</set>

动画4：right2left_out.xml ，展示中的图片从屏幕向左滑出屏幕

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="800"
        android:fromXDelta="0"
        android:toXDelta="-100%" />
</set>

现在动画写好了，但是不能直接使用，因为我们在滑动的时候，会有 2 张图片同时出现在屏幕中，而我们现在屏幕上只有一个 ImageView，是不能同时显示 2 张图的

因此，我们需要把屏幕上的 ImageView，换成 ImageSwitcher

activity_display_image

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

    <Button
        android:id="@+id/btn_previous"
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <ImageSwitcher
        android:id="@+id/image_switcher"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/btn_next"
        android:layout_width="50dp"
        android:layout_height="50dp" />

</LinearLayout>

修改 DisplayImageActivity

public class DisplayImageActivity extends AppCompatActivity implements View.OnClickListener {
    private Button btnPrevious;
    private Button btnNext;
    private ImageSwitcher imageSwitcher;

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

        btnPrevious = findViewById(R.id.btn_previous);
        btnNext = findViewById(R.id.btn_next);
        imageSwitcher = findViewById(R.id.image_switcher);

        btnPrevious.setOnClickListener(this);
        btnNext.setOnClickListener(this);

        //为imageSwitcher添加子集ImageView,只能增加2个Imageview
        /*ImageView iv = new ImageView(this);
        imageSwitcher.addView(iv);
        iv = new ImageView(this);
        imageSwitcher.addView(iv);*/
        //除了上边添加ImageView的方法，我们可以使用以下代码，自动调用2次
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView iv = new ImageView(DisplayImageActivity.this);
                FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
                iv.setLayoutParams(params);
                return iv;
            }
        });

        //获取数据源
        ImageStoreApplication application = (ImageStoreApplication) getApplication();
        imageList = application.getImages();
        //获取当前默认需要显示的图片的索引
        currentImageIndex = getIntent().getIntExtra("position", 0);
        //显示图片
        displayImage();
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btn_previous:
                diaplayPrevious();
                break;
            case R.id.btn_next:
                diaplayNext();
                break;
        }
    }

    private float downX;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Log.d("Motion", "ACTION_DOWN->" + event.getX() + "," + event.getY());
                downX = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                Log.d("Motion", "ACTION_UP->" + event.getX() + "," + event.getY());
                if (event.getX() - downX > 60) {
                    Log.d("Motion", "从左至右滑动");
                    diaplayPrevious();
                }
                if (downX - event.getX() > 60) {
                    Log.d("Motion", "从右至左滑动");
                    diaplayNext();
                }
                break;
            case MotionEvent.ACTION_MOVE:
                Log.d("Motion", "ACTION_MOVE->" + event.getX() + "," + event.getY());
                break;
        }
        return false;
    }

    //当前显示的图片的索引
    private int currentImageIndex;
    //数据源
    private List<Image> imageList;

    /**
     * 显示图片
     */
    private void displayImage() {
        LoadImageTask task = new LoadImageTask();
        task.execute();
    }

    /**
     * 显示上一张
     */
    private void diaplayPrevious() {
        currentImageIndex--;
        if (currentImageIndex < 0) {
            currentImageIndex = imageList.size() - 1;
        }
        //设置动画,从左至右
        imageSwitcher.setInAnimation(this, R.anim.left2right_in);
        imageSwitcher.setOutAnimation(this, R.anim.left2right_out);
        displayImage();
    }

    /**
     * 显示下一张
     */
    private void diaplayNext() {
        currentImageIndex++;
        if (currentImageIndex >= imageList.size()) {
            currentImageIndex = 0;
        }
        //设置动画,从右至左
        imageSwitcher.setInAnimation(this, R.anim.right2left_in);
        imageSwitcher.setOutAnimation(this, R.anim.right2left_out);
        displayImage();
    }

    private static final int IMAGE_MAX_SIZE = 1000;

    //参数；是否更新进度；结果
    private class LoadImageTask extends AsyncTask<Void, Void, Bitmap> {
        private Image image;

        public LoadImageTask() {
            super();
            this.image = imageList.get(currentImageIndex);
        }

        @Override
        protected Bitmap doInBackground(Void... voids) {
            //判断是否需要解码图片
            if (image.getBitmap() == null) {
                //判断并计算图片的缩放比
                //200单位是px
                int rate = 1;
                if (image.getWidth() > IMAGE_MAX_SIZE && image.getHeight() > IMAGE_MAX_SIZE) {
                    if (image.getWidth() < image.getHeight()) {
                        rate = image.getWidth() / IMAGE_MAX_SIZE;
                    } else {
                        rate = image.getHeight() / IMAGE_MAX_SIZE;
                    }
                }

                //创建解码图片选项参数
                BitmapFactory.Options opts = new BitmapFactory.Options();
                opts.inSampleSize = rate;
                //解码图片得到图片的bitmap对象
                Bitmap bitmap = BitmapFactory.decodeFile(image.getData(), opts);

                //Log.d("Image","解码完成，bitmap尺寸为"+bitmap.getWidth()+"x"+bitmap.getHeight()+"bitmap占用内存:"+bitmap.getByteCount());

                //将解码得到的Bitmap封装到图片数据中
                image.setBitmap(bitmap);
            }

            return null;
        }

        @Override
        protected void onPostExecute(Bitmap bitmap) {
            Drawable drawable = new BitmapDrawable(getResources(), image.getBitmap());
            imageSwitcher.setImageDrawable(drawable);
        }
    }
}

运行程序：

源码下载