使用PhotoView實現圖片檢視
阿新 • • 發佈:2019-01-25
專案需要實現圖片檢視的功能,使用ImageView不能縮放、使用系統的圖片檢視器又不能符合自己的定製化需求,所以我就使用Viewpager + PhotoView 來實現了。
引入PhotoView
PhotoView 的Github連結,PhotoView旨在幫助開發者輕鬆實現Android ImageView的縮放。
1、配置倉庫地址
在專案的build.gradle
檔案中加入以下程式碼
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
如果有多個url的話,可以這樣寫
allprojects {
repositories {
jcenter()
maven { url 'https://esri.bintray.com/arcgis' }
maven { url "https://jitpack.io" }
}
}
2、引入第三方庫
在你專案的APP Module的build.gradle
檔案中加上
compile 'com.github.chrisbanes:PhotoView:2.1.3'
3、控制元件使用
引入三方庫之後就可以使用PhotoView控制元件了
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/photo_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
圖片檢視器的實現
1、定義檢視圖片的TaskBigImgActivity.java
public class TaskBigImgActivity extends BaseActivity {
@BindView(R.id.header_title)
TextView headerTitle;
@BindView (R.id.header_left_img)
ImageView headerLeftImg;
@BindView(R.id.big_img_vp)
ViewPager bigImgVp;
@BindView(R.id.header_right_tv)
TextView headerRightTv;
private int position;
private ArrayList<String> paths;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_task_big_img);
ButterKnife.bind(this);
Intent intent = getIntent();
position = intent.getIntExtra("position", 0);
paths = intent.getStringArrayListExtra("paths");
String title = intent.getStringExtra("title");
headerTitle.setText(title);
headerLeftImg.setVisibility(View.VISIBLE);
headerRightTv.setVisibility(View.VISIBLE);
headerRightTv.setText(position + 1 + "/" + paths.size());
initView();
}
private void initView() {
bigImgVp.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return paths == null ? 0 : paths.size();
}
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View adView = LayoutInflater.from(TaskBigImgActivity.this).inflate(R.layout.item_big_img, null);
PhotoView icon = (PhotoView) adView.findViewById(R.id.flaw_img);
icon.setBackgroundColor(getResources().getColor(R.color.colorBlack));
Glide.with(TaskBigImgActivity.this)
.load(paths.get(position))
.into(icon);
container.addView(adView);
return adView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
});
bigImgVp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
headerRightTv.setText(position + 1 + "/" + paths.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
bigImgVp.setCurrentItem(position, true);
}
@OnClick(R.id.header_left_img)
public void onClick() {
finish();
}
}
對應的佈局檔案activity_task_big_img.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.cnbs.cableinspection.user.activity.TaskBigImgActivity">
<include layout="@layout/header" />
<android.support.v4.view.ViewPager
android:id="@+id/big_img_vp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Adapter
中使用的佈局item_big_img.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
android:gravity="center">
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/flaw_img"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
2、檢視圖片的呼叫
private ArrayList<String> recordPaths = new ArrayList<>(); //缺陷記錄的圖片集合
...
Intent imgIntent = new Intent(TaskRecordActivity.this, TaskBigImgActivity.class);
imgIntent.putStringArrayListExtra("paths",recordPaths);
imgIntent.putExtra("title","缺陷記錄圖片");
imgIntent.putExtra("position",msg.arg2);
startActivity(imgIntent);
position
表示檢視的第幾張圖片
到這裡就可以自由的檢視圖片了,可以實現縮放、旋轉等等變換。