好了,首先我们必须要做的一件事情就是在build.gradle中导入相应的依赖,否则有些类是无法使用的。
dependencies {
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.github.chrisbanes.photoview:library:+'
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
然后我们在values文件夹中的styles.xml文件中自定义一个dialog。
接着我们需要写一个给显示dialog的布局文件,我们命名为dialog_images_brower.xml,但是在此之前,我们需要重写ViewPager控件,因为ViewPager存在一个闪退的bug,我们将我们重写的控件命名为ShowImagesViewPager.java。
public class ShowImagesViewPager extends ViewPager {
public ShowImagesViewPager(Context context) {
this(context,null);
}
public ShowImagesViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
try {
return super.onInterceptTouchEvent(ev);
} catch (IllegalArgumentException e) {
return false;
}
}
}
然后我们就可以开始写布局文件dialog_images_brower.xml了。
"http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingTop="@dimen/padding_small_5dp">
<com.damon43.showimagesdialogdemo.component.ShowImagesViewPager
android:id="@+id/vp_images"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="@dimen/padding_small_10dp"/>
当我们写好了布局文件后,我们需要使用它,那么我们就需要自己重写一个dialog类文件,我们创建ShowImagesDialog继承自Dialog,并且为ViewPager写一个适配器ShowImagesAdapter继承自PagerAdapter,将我们需要查看的图片适配进去。
public class ShowImagesDialog extends Dialog {
private View mView ;
private Context mContext;
private ShowImagesViewPager mViewPager;
private List mImgUrls;
private List mViews;
private ShowImagesAdapter mAdapter;
public ShowImagesDialog(@NonNull Context context, List imgUrls) {
super(context, R.style.transparentBgDialog);
this.mContext = context;//传入上下文
this.mImgUrls = imgUrls;//传入图片String数组
initView();
initData();
}
private void initView() {
mView = View.inflate(mContext, R.layout.dialog_images_brower, null);//通过inflate()方法找到我们写好的包含ViewPager的布局文件
mViewPager = (ShowImagesViewPager) mView.findViewById(R.id.vp_images);//找到ViewPager控件并且实例化
mViews = new ArrayList<>();//创建一个控件的数组,我们可以在ViewPager中加入很多图片,滑动改变图片
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(mView);
Window window = getWindow();
WindowManager.LayoutParams wl = window.getAttributes();
wl.x = 0;
wl.y = 0;
wl.height = Config.EXACT_SCREEN_HEIGHT;
wl.width = Config.EXACT_SCREEN_WIDTH;
wl.gravity = Gravity.CENTER;
window.setAttributes(wl);
//EXACT_SCREEN_HEIGHT,EXACT_SCREEN_WIDTH为自定义Config类中的静态变量
//在MainActivity中会给这两个变量赋值,分别对应手机屏幕高度和宽度
//在这里我们通过WindowManager.LayoutParams把当前dialog的大小设置为全屏
}
private void initData() {
//当PhotoView被点击时,添加相应的点击事件
PhotoViewAttacher.OnPhotoTapListener listener = new PhotoViewAttacher.OnPhotoTapListener() {
@Override
public void onPhotoTap(View view, float x, float y) {
dismiss();//点击图片后,返回到原来的界面
}
};
for (int i = 0; i < mImgUrls.size(); i++) {
final PhotoView photoView = new uk.co.senab.photoview.PhotoView(mContext);
//创建一个PhotoView对象
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
photoView.setLayoutParams(layoutParams);
//我们通过ViewGroup.LayoutParams来设置子控件PhotoView的大小
photoView.setOnPhotoTapListener(listener);//给PhotoView添加点击事件
Glide.with(mContext)
.load(mImgUrls.get(i))//导入图片
.placeholder(R.mipmap.ic_launcher)//加载图片过程中显示的替代图片
.error(R.mipmap.ic_launcher)//图片加载失败时显示的图片
.into(new SimpleTarget() {
//这是Glide的一个回调方法
//我们首先定义了一个SimpleTarget,然后把它通过into方法传入。
// 这样当Glide去服务器请求图片成功之后,
// 它会把请求到的图片资源作为GlideDrawable传递回来,
// 你可以使用这个GlideDrawable进行自己想要的操作,
@Override
public void onResourceReady(GlideDrawable resource, GlideAnimationsuper GlideDrawable> glideAnimation) {
photoView.setImageDrawable(resource);
//我们把回调过来的图片资源加载到PhotoView中
//大家有没有发现一个细节,我在布局文件中并没有创建PhotoView控件,而是创建的ViewPager
//因为我们需要在ViewPager中加入多个PhotoView以达到图片翻页的功能
//因此我们在加载图片时,想要把图片加载到任意的图片控件中,就需要Glide回调方法
}
});
mViews.add(photoView);//最后把我们加载的所有PhotoView传给View数组
}
mAdapter = new ShowImagesAdapter(mViews);//给适配器传入图片控件数组
mViewPager.setAdapter(mAdapter);
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//给ViewPager添加监听事件
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
然后贴入我的适配器代码
public class ShowImagesAdapter extends PagerAdapter {
private List views;
public ShowImagesAdapter(List views) {
this.views = views;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
//确定一个页面视图是否关联到一个特定的对象。
}
@Override
public int getCount() {
return views.size();
//得到控件数组个数
}
//一般来说,destroyitem在viewpager移除一个item时调用。
// viewpage一般都会缓冲3个item,即一开始就会调用3次instantiateItem,
// 当向右滑动,到第3页时,第1页的item会被调用到destroyitem
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}
}
好了,我们把自定义的dialog搞定了,接下来我们可以直接在MainActivity中使用了。由于我们封装性很强,因此使用方法很简单,直接new一个ShowImagesDialog类就行了~
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getDeviceDensity();
final List urls = new ArrayList<>();
urls.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511198824138&di=cec97b6363a1bce28b8499a31b78df83&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F3e282f8762696b0bbb3ed16a5dc193c718e5aff9.jpg");
urls.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511793592&di=08b8de22336028a68c9a0bbbe7a9066d&imgtype=jpg&er=1&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F7ea7878cfbddb27bb8a23e2407bfa7a48655f317.jpg");
urls.add("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511198824136&di=f4dc71ffdbbb16d9e3d496cf8add5376&imgtype=0&src=http%3A%2F%2Foss.tan8.com%2Fresource%2Fattachment%2F2017%2F201707%2F962b7304d0adc7e2e1d374dc6786e302.jpg");
findViewById(R.id.btn_show_imgs).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new ShowImagesDialog(MainActivity.this, urls).show();
}
});
}
/**
* 获取当前设备的屏幕密度等基本参数
*/
protected void getDeviceDensity() {
DisplayMetrics metrics = new DisplayMetrics();//通过DisplayMetrics类可以得到手机屏幕的参数
getWindowManager().getDefaultDisplay().getMetrics(metrics);//然后将DisplayMetrics对象传入
Config.EXACT_SCREEN_HEIGHT = metrics.heightPixels;//得到手机屏幕的高的分辨率
Config.EXACT_SCREEN_WIDTH = metrics.widthPixels;//得到手机屏幕宽的分辨率
}
}
这是MainActivity的布局
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:padding="@dimen/padding_small_10dp"
android:layout_height="match_parent">
<Button
android:id="@+id/btn_show_imgs"
android:layout_gravity="center_horizontal"
android:layout_marginTop="@dimen/padding_small_10dp"
android:text="@string/clicktoshowimgs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
FrameLayout>
是不是很简单,我们直接点击一个按钮,就可以查看我们从网络上获取的图片了。