Android仿百度图片查看功能
近年来，移动互联网已经成为我们生活中不可或缺的一部分。与此同时，智能手机作为使用移动互联网最主要的设备之一，它的图像查看功能也日渐重要。为此，本文将介绍如何在Android系统中实现类似百度图片查看的功能。
一.需求分析
百度图片是一款可以让用户浏览、检索全球图片的智能手机应用程序。它的主要功能是用户可以在其上面搜索全球任意图片，并可以点击图片进行放大查看。向用户展示的结果不仅仅是静态的图片，还提供多种浏览方式，包括幻灯片、图像流等。
基于百度图片应用的功能特点，我们总结了下列需求：
1. 放大查看图片；
2. 多种浏览方式；
3. 能够显示图片属性信息。
二.设计分析
1. UI设计
为了让用户更好地查看图片，有效利用屏幕空间，我们可以采用ViewPager组件设计多种不同的图片浏览方式。例如，单张图片浏览、画廊式浏览、时间轴式浏览等。每种浏览方式都可以通过左右滑动或下拉等操作来改变当前图片的显示。
2. 放大查看设计
当用户点击页面上的缩略图，需要及时打开一个新的界面，让用户能够放大查看当前选中的图片。同时设计一个放大比例，不要过大或过小，以保证在一定程度上保持图片的清晰度。
3. 图片属性信息显示
在打开图片界面之后，需要一些信息配合影像，帮助用户理解和解释当前呈现的图片。例如，当前这张图片的拍摄时间、拍摄地点、图片作者等等。
三.代码编写
1. UI设计
在Android系统中，ViewPager是一个高质量的库，可以很好地支持多种图片浏览方式。在引入ViewPager之前，先需要在build.gradle文件中添加以下依赖：
compile 'com.android.support:cardview-v7:26.1.0'
compile 'com.android.support:recyclerview-v7:26.1.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:support-v4:26.1.0'
compile 'com.android.support:appcompat-v7:26.1.0'
在XML文件中使用ViewPager：
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
在Activity中实现ViewPager的适配器：
public class ViewPagerAdapter extends PagerAdapter {
private Context mContext;
private ArrayList<String> mImageDataList;
private OnImageClickListener mListener;
public ViewPagerAdapter(Context context, ArrayList<String> imageDataList, OnImageClickListener listener) {
this.mContext = context;
this.mImageDataList = imageDataList;
this.mListener = listener;
}
@Override
public int getCount() {
return mImageDataList.size();
}
@Override
public View instantiateItem(ViewGroup container, final int position) {
final ImageView imageView = new ImageView(mContext);
imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.CENTER);
container.addView(imageView);
Glide.with(mContext)
.load(mImageDataList.get(position))
.into(imageView);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mListener.onImageClick(position);
}
});
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((ImageView) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
2. 放大查看设计
为了实现放大查看功能，我们可以通过引入PhotoView这个库来实现。这个库可以让你快速便捷地实现ImageView的缩放、旋转、拖拽等功能。
在build.gradle文件中添加以下依赖：
compile 'com.github.chrisbanes:PhotoView:1.3.1'
在XML文件中使用：
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/photo_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
在Activity代码中使用：
private void showImageDialog(ArrayList<String> imageDataList, int position) {
final Dialog dialog = new Dialog(this, android.R.style.Theme_Black_NoTitleBar_Fullscreen);
dialog.setContentView(R.layout.image_dialog);
ViewPager viewPager = (ViewPager) dialog.findViewById(R.id.viewpager);
final ProgressBar progressBar = (ProgressBar) dialog.findViewById(R.id.progress_bar);
TextView textView = (TextView) dialog.findViewById(R.id.text_view);
final ArrayList<String> list = new ArrayList<>();
for (int i = 0; i < imageDataList.size(); i++) {
if (i == position) {
textView.setText((position + 1) + "/" + imageDataList.size());
}
list.add(imageDataList.get(i));
}
ViewPagerAdapter adapter = new ViewPagerAdapter(this, list, new OnImageClickListener() {
@Override
public void onImageClick(int position) {
dialog.dismiss();
}
});
viewPager.setAdapter(adapter);
viewPager.setCurrentItem(position);
progressBar.setVisibility(View.INVISIBLE);
dialog.show();
}
3. 图片属性信息设计
在打开图片界面后，我们需要在底部或者顶部的位置，加上一些图片的属性信息，例如图片的标题、作者信息、上传时间等等。
在XML文件中：
<TextView
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textSize="16sp"
android:textColor="@android:color/white"
android:background="@color/color_toolbar"/>
在Activity代码中：
textView.setText((position + 1) + "/" + imageDataList.size());
四.总结
本文主要介绍了如何在Android系统中实现类似百度图片查看的功能。通过引入ViewPager和PhotoView库，实现了多种浏览方式和图片的放大查看。同时，我们还介绍了如何在图片底部或顶部显示图片的属性信息，从而帮助用户理解和解释当前呈现的图片。