1. 程式人生 > >使用PhotoView實現圖片檢視

使用PhotoView實現圖片檢視

專案需要實現圖片檢視的功能,使用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表示檢視的第幾張圖片

到這裡就可以自由的檢視圖片了,可以實現縮放、旋轉等等變換。