使用PhotoView实现图片查看
项目需要实现图片查看的功能,使用ImageView不能缩放、使用系统的图片查看器又不能符合自己的定制化需求,所以我就使用Viewpager + PhotoView 来实现了。引入PhotoViewPhotoView 的Github链接,PhotoView旨在帮助开发者轻松实现Android ImageView的缩放。1、配置仓库地址在项目的build.gradle文件中加入以下代码allproje
·
项目需要实现图片查看的功能,使用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
表示查看的第几张图片
到这里就可以自由的查看图片了,可以实现缩放、旋转等等变换。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献2条内容
所有评论(0)