本次我主要实现了上次图片选择界面中的图片预览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);
}
}
最终效果:
下面的四个小点就是选择指示器,代表预览界面有几张图片。哪一个小点暗一点就代表显示的是那一张。