PhotoView开源框架:可以浏览图片,通过手指的动作控制图片的缩放和移动查看,还提供一个photoview,让我们来代替imageview。
一、配置环境
打开工作空间中的build.gradle,添加代码:maven { url "https://jitpack.io" }
maven { url "https://jitpack.io" }
打开app项目中的build.gradle,添加依赖的外部环境: compile 'com.github.chrisbanes:PhotoView:1.3.0'
compile 'com.github.chrisbanes:PhotoView:1.3.0'
完成以后构建一下。
二、实现代码
PhotoView其实很简单,一句话可以实现放大缩小的功能,但是图片的PX会失真,所以配合写了一个方法,宽度匹配屏幕,高按比例缩放,这样可以避免失真。
新建一个类PhotoDetailActivity:
public class PhotoDetailActivity extends Activity {
@InjectView(R.id.iv)
ImageView iv;
private int scale;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.detail);
ButterKnife.inject(this);
displayImage();
//创建一个photoview的一个attacher
PhotoViewAttacher attacher = new PhotoViewAttacher(iv);
}
private void displayImage() {
//想让图片宽是屏幕的宽度
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.yangyang);
//测量
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds=true;//只测量
int height = bitmap.getHeight();
int width = bitmap.getWidth();
//再拿到屏幕的宽
WindowManager windowManager = getWindowManager();
Display display = windowManager.getDefaultDisplay();
int screenWidth = display.getWidth();
//计算如果让照片是屏幕的宽,选要乘以多少?
scale = screenWidth/width;
//这个时候。只需让图片的宽是屏幕的宽,高乘以比例
int displayHeight=height*scale;//要显示的高,这样避免失真
//最终让图片按照宽是屏幕 高是等比例缩放的大小
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(screenWidth, displayHeight);
iv.setLayoutParams(layoutParams);
}
}
PhotoViewAttacher attacher = new PhotoViewAttacher(iv) 这句代码实现了图片的放大缩小。
displayImage() 方法就是避免失真的方法,可以封装成一个类直接调用。
在MainActivity中的代码:
public class MainActivity extends AppCompatActivity {
@InjectView(R.id.iv1)
ImageView iv1;
@InjectView(R.id.viewpager)
ViewPager viewpager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.inject(this);
}
public void click(View v) {
startActivity(new Intent(MainActivity.this, PhotoDetailActivity.class));
}
}
XML中的代码:
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="200dp">
</android.support.v4.view.ViewPager>
新建的XML文件:
<ImageView
android:src="@mipmap/yangyang"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="@+id/iv"
/>
清单文件中注册:
<activity android:name=".PhotoDetailActivity"
android:theme="@android:style/Theme.Holo.NoActionBar"
></activity>
完成,运行。
显示如图: