实训第五周（2）

本次我主要实现了上次图片选择界面中的图片预览activity。

1.首先在上次的PhotoSelectActivity中加入带result请求的页面跳转，以及相应的result处理：

 /**
     * 单击单张图片时，调整到预览页面显示该图
     */
    private void previewByItem(){
        Intent intent = new Intent(this,ImagePreviewActivity.class);
        intent.putExtra("FLAG", ImagePreviewActivity.FLAG_SHOW_ITEM);
        intent.putExtra("IMAGE_ITEM",mShowItem);
        startActivityForResult(intent,REQUEST_SHOW_ITEM);
    }

    /**
     * 单击“预览”按钮时，跳转到预览页面显示所有已选中的图片
     */
    private void previewByBtn(){
        Intent intent = new Intent(this,ImagePreviewActivity.class);
        intent.putExtra("FLAG", ImagePreviewActivity.FLAG_SHOW_LIST);
        intent.putExtra("IMAGE_LIST", (Serializable) mSelectedImages);
        startActivityForResult(intent,REQUEST_SHOW_LIST);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // 预览界面点击了“发送”按钮
        if (resultCode == RESULT_OK){
            if (requestCode == REQUEST_SHOW_ITEM){
                if (mShowItem != null){
                    mSelectedImages.clear();
                    mSelectedImages.add(mShowItem);
                    sendImage();
                }
            }else if (requestCode == REQUEST_SHOW_LIST){
                sendImage();
            }
        }
    }

2.ImagePreviewActivity中，主要分为控件id绑定，从上一个intent中获得要显示的图片，显示图片，以及自定义的PagerAdapter和IndicatorView。

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_preview);
        findView();
        getImageFromIntent();
        showImage();
    }

相应的布局：

activity_image_preview.xml

<?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:orientation="vertical">

    <include layout="@layout/layout_title"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <android.support.v4.view.ViewPager
            android:id="@+id/view_page"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <com.ezreal.ezchat.photoselector.IndicatorView
            android:id="@+id/indicator_view"
            android:layout_width="match_parent"
            android:layout_height="25dp"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="5dp"
            android:gravity="center"/>
    </RelativeLayout>

</LinearLayout>

item_image_pre.xml

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

    <com.bm.library.PhotoView
        android:id="@+id/iv_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"/>

</RelativeLayout>

2.findView方法：其中为返回键和发送键设置了OnClickListener。

private void findView() {
        mTvTitle = (TextView) findViewById(R.id.tv_title);
        mTvTitle.setText("预览");

        mIvBack = (ImageView) findViewById(R.id.iv_back);
        mIvBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ImagePreviewActivity.this.setResult(RESULT_CANCELED);
                finish();
            }
        });

        mTvSend = (TextView) findViewById(R.id.tv_send);
        mTvSend.setText("发送");
        mTvSend.setTextColor(Color.WHITE);
        mTvSend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ImagePreviewActivity.this.setResult(RESULT_OK);
                finish();
            }
        });

        mIndicatorView = (IndicatorView) findViewById(R.id.indicator_view);
        mViewPager = (ViewPager) findViewById(R.id.view_page);
    }

3.getImageFromIntent方法：根据上一个activity不同的flag设置不同的响应。

private void getImageFromIntent() {
        mImageBeans = new ArrayList<>();
        int flag = getIntent().getIntExtra("FLAG", FLAG_SHOW_ITEM);
        if (flag == FLAG_SHOW_ITEM) {
            ImageBean image = (ImageBean) getIntent().getSerializableExtra("IMAGE_ITEM");
            if (image != null) {
                mImageBeans.add(image);
            }
        } else if (flag == FLAG_SHOW_LIST) {
            List<ImageBean> list = (List<ImageBean>) getIntent().getSerializableExtra("IMAGE_LIST");
            if (list != null) {
                mImageBeans.addAll(list);
            }
        }
        createViews();
    }

其中用到的createViews方法：

 private void createViews() {
        mViews = new ArrayList<>();
        for (int i = 0; i < mImageBeans.size(); i++) {
            View view = LayoutInflater.from(this).inflate(R.layout.item_image_pre,
                    null, false);
            PhotoView photoView = (PhotoView) view.findViewById(R.id.iv_img);
            photoView.setMaxScale(4);
            photoView.enable();
            Glide.with(ImagePreviewActivity.this)
                    .load(mImageBeans.get(i).getPath()).diskCacheStrategy(DiskCacheStrategy.ALL)
                    .error(R.drawable.bg_img_defalut)
                    .into(photoView);
            mViews.add(view);
        }
        mIndicatorView.init(mViews.size());
    }

4.showImage方法：

private void showImage() {
        mPageAdapter = new ViewPageAdapter(mViews);
        mViewPager.setAdapter(mPageAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            private int mOldPosition = 0;

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mIndicatorView.playBy(mOldPosition, position);
                mOldPosition = position;
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

5.用到的自定义PagerAdapter-ViewPageAdapter

private class ViewPageAdapter extends PagerAdapter {

        private List<View> mViews;

        public ViewPageAdapter(List<View> views) {
            mViews = views;
        }

        @Override
        public int getCount() {
            return mViews != null ? mViews.size() : 0;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViews.get(position));
            return mViews.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViews.get(position));
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    }

6.IndicatorView选择指示器：主要是滑动图片时，相应的下面的小圆点的动画。

public class IndicatorView extends LinearLayout {

    private Context mContext;
    private ArrayList<ImageView> mImageViews;
    private Bitmap mBtnSelect;
    private Bitmap mBtnNormal;
    private int mMaxHeight;
    private int mMaxWidth;
    private AnimatorSet mPlayToAnimatorSet;
    private AnimatorSet mPlayByInAnimatorSet;
    private AnimatorSet mPlayByOutAnimatorSet;

    public IndicatorView(Context context) {
        this(context, null);
    }

    public IndicatorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        this.setOrientation(HORIZONTAL);
        mMaxWidth = mMaxHeight = dip2px(16);
        mBtnSelect = BitmapFactory.decodeResource(getResources(), R.drawable.indicator_point_select);
        mBtnNormal = BitmapFactory.decodeResource(getResources(), R.drawable.indicator_point_nomal);
    }

    public void init(int count) {

        mImageViews = new ArrayList<>();
        this.removeAllViews();
        for (int i = 0; i < count; i++) {
            RelativeLayout rl = new RelativeLayout(mContext);
            LayoutParams params = new LayoutParams(mMaxWidth, mMaxHeight);
            RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
            ImageView imageView = new ImageView(mContext);
            if (i == 0) {
                imageView.setImageBitmap(mBtnSelect);
                rl.addView(imageView, layoutParams);
            } else {
                imageView.setImageBitmap(mBtnNormal);
                rl.addView(imageView, layoutParams);
            }
            this.addView(rl, params);
            mImageViews.add(imageView);
        }
    }

    public void playBy(int startPosition, int nextPosition) {

        boolean isShowInAnimOnly = false;
        if (startPosition < 0 || nextPosition < 0 || nextPosition == startPosition) {
            startPosition = nextPosition = 0;
        }

        if (startPosition < 0) {
            isShowInAnimOnly = true;
            startPosition = nextPosition = 0;
        }

        final ImageView imageViewStrat = mImageViews.get(startPosition);
        final ImageView imageViewNext = mImageViews.get(nextPosition);

        ObjectAnimator anim1 = ObjectAnimator.ofFloat(imageViewStrat,
                "scaleX", 1.0f, 0.25f);
        ObjectAnimator anim2 = ObjectAnimator.ofFloat(imageViewStrat,
                "scaleY", 1.0f, 0.25f);

        if (mPlayByOutAnimatorSet != null && mPlayByOutAnimatorSet.isRunning()) {
            mPlayByOutAnimatorSet.cancel();
            mPlayByOutAnimatorSet = null;
        }
        mPlayByOutAnimatorSet = new AnimatorSet();
        mPlayByOutAnimatorSet.play(anim1).with(anim2);
        mPlayByOutAnimatorSet.setDuration(100);

        ObjectAnimator animIn1 = ObjectAnimator.ofFloat(imageViewNext,
                "scaleX", 0.25f, 1.0f);
        ObjectAnimator animIn2 = ObjectAnimator.ofFloat(imageViewNext,
                "scaleY", 0.25f, 1.0f);

        if (mPlayByInAnimatorSet != null && mPlayByInAnimatorSet.isRunning()) {
            mPlayByInAnimatorSet.cancel();
            mPlayByInAnimatorSet = null;
        }
        mPlayByInAnimatorSet = new AnimatorSet();
        mPlayByInAnimatorSet.play(animIn1).with(animIn2);
        mPlayByInAnimatorSet.setDuration(100);

        if (isShowInAnimOnly) {
            mPlayByInAnimatorSet.start();
            return;
        }

        anim1.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                imageViewStrat.setImageBitmap(mBtnNormal);
                ObjectAnimator animFil1l = ObjectAnimator.ofFloat(imageViewStrat,
                        "scaleX", 1.0f);
                ObjectAnimator animFill2 = ObjectAnimator.ofFloat(imageViewStrat,
                        "scaleY", 1.0f);
                AnimatorSet mFillAnimatorSet = new AnimatorSet();
                mFillAnimatorSet.play(animFil1l).with(animFill2);
                mFillAnimatorSet.start();
                imageViewNext.setImageBitmap(mBtnSelect);
                mPlayByInAnimatorSet.start();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
            }
        });
        mPlayByOutAnimatorSet.start();
    }

    private int dip2px(float dipValue) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }
}

最终效果：

下面的四个小点就是选择指示器，代表预览界面有几张图片。哪一个小点暗一点就代表显示的是那一张。