クリックして大きい図を見て、左右のスライドの切り替え、拡大・縮小のピクチャーを支持します
14407 ワード
効果図:
リストには画像のサムネイルが表示され、クリックして大きな図を表示する必要があります.ズームと左右のスライド切り替えをサポートします.効果は上図のように、前のいくつかのプロジェクトで何度もこの需要に遭遇したことがあります.いっそ時間をかけてツールクラスに整理します.サムネイルを表示するコードは書かないで、需要が異なって展示する方式も異なって、GridViewとストリーミングレイアウトのはすべてあって、最も基本的なもので、主にサムネイルをクリックして大きな図を表示する部分を書きます;まず、次のシーンを分析します.
1.普通はすべて1つのリストがあって、中に入っているのはすべて画像のurlで、サムネイルは前の3つの図だけを展示することができて、それからサムネイルをクリックして全画面の大きい図を見るように要求します;2.ただ大きい図を见るだけでも便利で、肝心なのはズームすることができて、左右にスライドして切り替えて见ることができて、下に写真の绍介の文字を表示することができて、いくつかの需要が合って、もう少しコードを书くのはいつも多くの时間を浪费して、ただ4つの字で心を表したいだけです:本当に似ています(何ですか?あなたは私も后の2つの字を知らないと思います)3.ツールクラスにカプセル化すると、より快適になります.
ImagPagerUtilツールクラスのコードを次に示します.
コードはとても簡単で、1つのViewPagerを作成してピクチャーをスライドして表示するために使って、ピクチャーのズームは郭兄のカスタムコントロールZoomImageViewを使って、いくつかのものを修正して、例えばピクチャーをクリックして大きい図を閉じて前のページに戻るこの需要、その時私達の製品が微信の表示の大きい図を見てピクチャーの任意の位置をクリックして閉じるので、それから私達にもこのようにさせて、これはImageViewの中のonTouchEventを処理しなければなりませんそうでないとクリックイベントがブロックされます.具体的にはZoomImageViewクラスのここの処理を見てみましょう.
もう一つは、画像のロード速度を最適化し、トラフィックを節約するために、事前にロードしないことを要求するために、ViewPagerのコードを小さく変更し、必要がなければ、普通のViewPagerでいいです.ロード画像は長い間流行していたuniversal-image-loaderを使用しており、非常に良い画像ロードフレームワークであり、AnimateFirstDisplayListenerの傍受に合わせて画像ロードの進捗状況を追加した.(プロジェクトでは別フレームのFresco、Picasso、または自分で処理した3段階キャッシュを使用している場合は、universal-image-loaderをインポートせずにImagPagerUtilクラスに画像を表示する方法を直接置き換えることができます).
ソースコード
リストには画像のサムネイルが表示され、クリックして大きな図を表示する必要があります.ズームと左右のスライド切り替えをサポートします.効果は上図のように、前のいくつかのプロジェクトで何度もこの需要に遭遇したことがあります.いっそ時間をかけてツールクラスに整理します.サムネイルを表示するコードは書かないで、需要が異なって展示する方式も異なって、GridViewとストリーミングレイアウトのはすべてあって、最も基本的なもので、主にサムネイルをクリックして大きな図を表示する部分を書きます;まず、次のシーンを分析します.
1.普通はすべて1つのリストがあって、中に入っているのはすべて画像のurlで、サムネイルは前の3つの図だけを展示することができて、それからサムネイルをクリックして全画面の大きい図を見るように要求します;2.ただ大きい図を见るだけでも便利で、肝心なのはズームすることができて、左右にスライドして切り替えて见ることができて、下に写真の绍介の文字を表示することができて、いくつかの需要が合って、もう少しコードを书くのはいつも多くの时間を浪费して、ただ4つの字で心を表したいだけです:本当に似ています(何ですか?あなたは私も后の2つの字を知らないと思います)3.ツールクラスにカプセル化すると、より快適になります.
ImagPagerUtil imagPagerUtil = new ImagPagerUtil(Activity activity, List<String> list);//list:
imagPagerUtil.setContentText(String content);//content:
imagPagerUtil.show();// ImagPagerUtilツールクラスのコードを次に示します.
public class ImagPagerUtil {
private List mPicList;
private Activity mActivity;
private Dialog dialog;
private LazyViewPager mViewPager;
private LinearLayout mLL_progress;
private TextView tv_loadingmsg;
private int screenWidth;
private ImageLoader imageLoader;
private DisplayImageOptions options;
private ImageLoadingListener animateFirstListener = new AnimateFirstDisplayListener();
private TextView tv_img_current_index;
private TextView tv_img_count;
private TextView tv_content;
public ImagPagerUtil(Activity activity, List mPicList) {
this.mPicList = mPicList;
this.mActivity = activity;
imageLoader = ImageLoader.getInstance();
setOptions();
init();
}
public ImagPagerUtil(Activity activity, String[] picarr) {
mPicList = new ArrayList<>();
for (int i = 0; i < picarr.length; i++) {
mPicList.add(picarr[i]);
}
this.mActivity = activity;
imageLoader = ImageLoader.getInstance();
setOptions();
init();
}
/** * * @param str */
public void setContentText(String str) {
if (!TextUtils.isEmpty(str)) {
tv_content.setText(str);
}
}
public void show() {
dialog.show();
}
private void init() {
dialog = new Dialog(mActivity, R.style.fullDialog);
RelativeLayout contentView = (RelativeLayout) View.inflate(mActivity, R.layout.view_dialogpager_img, null);
mViewPager = getView(contentView, R.id.view_pager);
mLL_progress = getView(contentView, R.id.vdi_ll_progress);
tv_loadingmsg = getView(contentView, R.id.tv_loadingmsg);
tv_img_current_index = getView(contentView, R.id.tv_img_current_index);
tv_img_count = getView(contentView, R.id.tv_img_count);
tv_content = getView(contentView, R.id.tv_content);
dialog.setContentView(contentView);
tv_img_count.setText(mPicList.size() + "");
tv_img_current_index.setText("1");
int size = mPicList.size();
ArrayList imageViews = new ArrayList<>();
ZoomImageView imageView = new ZoomImageView(mActivity);
imageView.measure(0, 0);
Display display = mActivity.getWindowManager().getDefaultDisplay();
screenWidth = display.getWidth();
ViewGroup.MarginLayoutParams marginLayoutParams = new ViewGroup.MarginLayoutParams(screenWidth, display.getHeight());
imageView.setLayoutParams(marginLayoutParams);
imageView.setOnClickListener(new View.OnClickListener() {// ，
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
for (int i = 0; i < size; i++) {
imageViews.add(imageView);
}
initViewPager(imageViews);
}
private void initViewPager(ArrayList list) {
mViewPager.setOnPageChangeListener(new LazyViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
tv_img_current_index.setText("" + (position + 1));
}
});
MyImagPagerAdapter myImagPagerAdapter = new MyImagPagerAdapter(list);
mViewPager.setAdapter(myImagPagerAdapter);
}
class MyImagPagerAdapter extends PagerAdapter {
ArrayList mList;
public MyImagPagerAdapter(ArrayList mList) {
this.mList = mList;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = mList.get(position);
showPic(imageView, mPicList.get(position));
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mList.get(position));
}
@Override
public int getCount() {
if (null == mList || mList.size() <= 0) {
return 0;
}
return mList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}
protected void setOptions() {
options = new DisplayImageOptions.Builder()
.showImageForEmptyUri(R.mipmap.ic_launcher)
.showImageOnFail(R.mipmap.ic_launcher)
.cacheInMemory(true)
.cacheOnDisk(true)
.considerExifParams(true)
.build();
}
private void showPic(ImageView imageView, String url) {
imageView.setImageBitmap(null);
mLL_progress.setVisibility(View.VISIBLE);
imageLoader.displayImage(url, imageView, options, animateFirstListener, new ImageLoadingProgressListener() {
@Override
public void onProgressUpdate(String s, View view, int i, int i1) {
float temp = (float) i / i1;
int progress = (int) (temp * 100);
if (null != tv_loadingmsg) {
tv_loadingmsg.setText(progress + "%");
}
}
});
dialog.show();
}
private class AnimateFirstDisplayListener extends SimpleImageLoadingListener {
@Override
public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
mLL_progress.setVisibility(View.GONE);
tv_loadingmsg.setText("");
if (loadedImage != null) {
ImageView imageView = (ImageView) view;
imageView.setImageBitmap(loadedImage);
}
}
}
@SuppressWarnings("unchecked")
public static final E getView(View parent, int id) {
try {
return (E) parent.findViewById(id);
} catch (ClassCastException ex) {
Log.e("ImagPageUtil", "Could not cast View to concrete class
" + ex.getMessage());
throw ex;
}
}
} コードはとても簡単で、1つのViewPagerを作成してピクチャーをスライドして表示するために使って、ピクチャーのズームは郭兄のカスタムコントロールZoomImageViewを使って、いくつかのものを修正して、例えばピクチャーをクリックして大きい図を閉じて前のページに戻るこの需要、その時私達の製品が微信の表示の大きい図を見てピクチャーの任意の位置をクリックして閉じるので、それから私達にもこのようにさせて、これはImageViewの中のonTouchEventを処理しなければなりませんそうでないとクリックイベントがブロックされます.具体的にはZoomImageViewクラスのここの処理を見てみましょう.
case MotionEvent.ACTION_UP:
//
float v = event.getX() - x1;
float v1 = event.getY() - y1;
x1 = 0;
y1 = 0;
if (Math.abs(v) + Math.abs(v1) < 10) {
this.callOnClick();
}
lastXMove = -1;
lastYMove = -1;
break;もう一つは、画像のロード速度を最適化し、トラフィックを節約するために、事前にロードしないことを要求するために、ViewPagerのコードを小さく変更し、必要がなければ、普通のViewPagerでいいです.ロード画像は長い間流行していたuniversal-image-loaderを使用しており、非常に良い画像ロードフレームワークであり、AnimateFirstDisplayListenerの傍受に合わせて画像ロードの進捗状況を追加した.(プロジェクトでは別フレームのFresco、Picasso、または自分で処理した3段階キャッシュを使用している場合は、universal-image-loaderをインポートせずにImagPagerUtilクラスに画像を表示する方法を直接置き換えることができます).
ソースコード