添加依賴
//圖片預覽 photoView
api 'com.github.chrisbanes:PhotoView:2.1.3'
一懊纳、Activity
public class PhotoViewActivity extends AppCompatActivity {
private ViewPager VP_photo;
private PhotoPagerAdapter pagerAdapter;
private LinearLayout ll_points;
private int lastPosition;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
StatusBarUtil.setFullScreen(getWindow());//設置全屏模式
setContentView(R.layout.activity_photoview);
initUi();
initData();
}
private void initUi() {
String[] photoLists = getIntent().getStringArrayExtra("photoList");
int photoPosition = getIntent().getIntExtra("photoPosition", 0);
pagerAdapter = new PhotoPagerAdapter(this, photoLists);
VP_photo = findViewById(R.id.VP_photo);
ll_points = findViewById(R.id.ll_points);
VP_photo.setAdapter(pagerAdapter);
for (int i = 0; i < photoLists.length; i++) {
//根據viewPager的數量，添加白點指示器
ImageView view = new ImageView(this);
view.setBackgroundResource(R.drawable.point_back);
//給點設置寬高
int px = getResources().getDimensionPixelOffset(R.dimen.x6);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(px, px);
params.leftMargin = px;
//給view設置參數
view.setLayoutParams(params);
//將圖片添加到線性布局中
ll_points.addView(view);
}
lastPosition = photoPosition;
ll_points.getChildAt(lastPosition).setBackgroundResource(R.drawable.point_white);
VP_photo.setCurrentItem(photoPosition);
VP_photo.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
position = position % photoLists.length;
//獲取子頁面數量
int childCount = VP_photo.getChildCount();
for (int i = 0; i < childCount; i++) {
//獲取當前頁面的view
View child = VP_photo.getChildAt(i);
//獲取當前頁面中的PhotoView
PhotoView photoView = child.findViewById(R.id.item_pv);
if (photoView != null) {
PhotoViewAttacher photoViewAttacher = photoView.getAttacher();
if (photoViewAttacher.getScale() != photoViewAttacher.getMinimumScale()) {//圖片縮放過恢復初始狀態(tài)
//第一個參數是獲取photoViewAttacher自帶的縮放大小最小值亡容，第二個和第三個參數設置縮放中心
photoViewAttacher.setScale(photoViewAttacher.getMinimumScale(), 0f, 0f, true);
}
}
}
ll_points.getChildAt(lastPosition).setBackgroundResource(R.drawable.point_back);
ll_points.getChildAt(position).setBackgroundResource(R.drawable.point_white);
lastPosition = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initData() {
}
}
二长踊、Activity xml文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:id="@+id/rl"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.viewpager.widget.ViewPager
android:id="@+id/VP_photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/black" />
<LinearLayout
android:id="@+id/ll_points"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/x20"
android:gravity="center"
android:orientation="horizontal" />
</RelativeLayout>
三、pagerAdapter
public class PhotoPagerAdapter extends PagerAdapter {
private String[] imgList;
private Activity context;
public PhotoPagerAdapter(Activity context, String[] imgList) {
this.imgList = imgList;
this.context = context;
}
@Override
public int getCount() {
return imgList.length;
}
@Override
public boolean isViewFromObject(@NotNull View view, @NotNull Object object) {
//當創(chuàng)建新的條目萍倡，又反回來身弊，判斷view是否可以被復用(即是否存在)
return view == object;
}
@NotNull
@Override
public Object instantiateItem(ViewGroup container, int position) {
//container 容器 相當于用來存放imageView
PhotoView photoView = (PhotoView) LayoutInflater.from(context).inflate(R.layout.activity_photoview_item, null);
Glide.with(context).load(imgList[position]).placeholder(R.drawable.ic_launcher_background).into(photoView);
//把圖片添加到container中
photoView.setOnDoubleTapListener(new PhotoViewDoubleTapListener(context, photoView));
container.addView(photoView);
return photoView;
}
//銷毀條目
@Override
public void destroyItem(ViewGroup container, int position, @NotNull Object object) {
//object:剛才創(chuàng)建的對象，即要銷毀的對象
container.removeView((View) object);
}
}
四列敲、pagerAdapter xml
<?xml version="1.0" encoding="utf-8"?>
<com.github.chrisbanes.photoview.PhotoView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_pv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter" />
五阱佛、因為框架里面沒有實現單擊退出，并且兩次雙擊放大戴而。修改為凑术，雙擊一次放大再雙擊縮小。
package com.app.ccmvp.adapter;
import android.app.Activity;
import android.view.GestureDetector;
import android.view.MotionEvent;
import com.app.ccmvp.R;
import com.github.chrisbanes.photoview.PhotoView;
/**
* 修改為點擊一次再雙擊就恢復原圖
*/
public class PhotoViewDoubleTapListener implements GestureDetector.OnDoubleTapListener {
private Activity activity;
private PhotoView photoView;
public PhotoViewDoubleTapListener(Activity activity, PhotoView photoView) {
this.activity = activity;
this.photoView = photoView;
}
@Override
public boolean onSingleTapConfirmed(MotionEvent e) {
//重寫單擊方法所意，實現退出頁面
activity.finish();
activity.overridePendingTransition(R.anim.alpha_fade, R.anim.alpha_hide);//頁面跳轉跟退出時設置出場入場動畫
return false;
}
@Override
public boolean onDoubleTap(MotionEvent me) {
try {
float scale = photoView.getScale();
float x = me.getX();
float y = me.getY();
if (scale < photoView.getMediumScale()) {
photoView.setScale(photoView.getMediumScale(), x, y, true);
} else if (scale >= photoView.getMediumScale() && scale < photoView.getMaximumScale()) {
//關鍵代碼淮逊，當放大一次之后再點擊就縮小
photoView.setScale(photoView.getMinimumScale(), x, y, true);
} else {
photoView.setScale(photoView.getMinimumScale(), x, y, true);
}
} catch (ArrayIndexOutOfBoundsException e1) {
// Can sometimes happen when getX() and getY() is called
}
return true;
}
@Override
public boolean onDoubleTapEvent(MotionEvent e) {
return false;
}
}
過度動畫相關代碼，我這邊是設置漸變動畫扶踊，可以根據自己的需求修改泄鹏。
alpha_fade
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
<?xml version="1.0" encoding="utf-8"?>
alpha_hide
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="@android:integer/config_longAnimTime"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
最后使用
private String[] imglist = {
"https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=82f1640b19ce36d3bd0485300af23a24/fcfaaf51f3deb48f5510390ffc1f3a292cf578e2.jpg",
"https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=ff6ed7cfa718972bbc3a06cad6cc7b9d/267f9e2f07082838304837cfb499a9014d08f1a0.jpg",
"https://ss2.baidu.com/vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=56577be956afa40f23c6c8dd9b66038c/562c11dfa9ec8a1346809b3bfb03918fa1ecc057.jpg",
"https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=4a51c9cd7e8b4710d12ffbccf3ccc3b2/b64543a98226cffceee78e5eb5014a90f703ea09.jpg",
"https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a537b312164c510fb1c4e41a50582528/b8389b504fc2d562a746bd37eb1190ef77c66c99.jpg"
};
//點擊單張圖片跳轉到圖片合集
Intent intent = new Intent(getContext(), PhotoViewActivity.class);
intent.putExtra("photoList", imglist);
intent.putExtra("photoPosition", position);
startActivity(intent);
overridePendingTransition(R.anim.alpha_fade, R.anim.alpha_hide);
