频道栏目
首页 > 程序开发 > 移动开发 > Android教程 > Android实例 > 正文
Android仿微信朋友圈图片查看器
2016-05-21 15:24:58      个评论      
收藏   我要投稿
这篇文章主要为大家详细介绍了Android仿微信朋友圈图片查看器的具体实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

 

 

 

再看文章之前,希望大家先打开自己的微信点到朋友圈中去,仔细观察是不是发现朋友圈里的有个“九宫格”的图片区域,点击图片又会跳到图片的详细查看页面,并且支持图片的滑动和缩放?这个功能是不是很常用呢?!那么我今天正好做了这个Demo,下面为大家讲解一下。首先按照惯例先看一下效果图吧,尤其不会录制gif动画(哎~没办法,模拟器不支持多点触控,刚好我的手机又没有Root,不能录屏,悲催啊,大家见谅,想要看真实效果的话,烦请移到文章最下方转载文章中进行源码下载,点击下载源码,运行后再看效果哈~~),这里先就拿几张静态的图片顶替一下好了。见谅!

\

        效果嘛,将就着看吧!实在看不明白就想想微信朋友圈,或者拖到下方,点击下载源码!这里,首先分析一下主界面吧,布局都是很简单的,主界面仅仅就是一个ListView的控件,ListView的Item上值得注意的是,Item上包含了一个GridView,这个GridView呗用作实现“九宫格”的效果,主界面布局就是一个ListView,这里不说了,我们先来看看ListView的Item的布局吧,以下是item_list.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:paddingBottom="5dp" 
 android:paddingTop="5dp" > 
 
 <ImageView 
 android:id="@+id/iv_avatar" 
 android:layout_width="50dp" 
 android:layout_height="50dp" 
 android:background="@drawable/ic_launcher" 
 android:scaleType="centerCrop" /> 
 
 <TextView 
 android:id="@+id/tv_title" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="5dp" 
 android:layout_toRightOf="@id/iv_avatar" 
 android:text="爷,今天心情好!" 
 android:textSize="16sp" /> 
 
 <TextView 
 android:id="@+id/tv_content" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_below="@+id/tv_title" 
 android:layout_marginLeft="5dp" 
 android:layout_marginTop="3dp" 
 android:layout_toRightOf="@id/iv_avatar" 
 android:text="今天又是雾霾!" 
 android:textSize="16sp" /> 
 
 <com.example.imagedemo.NoScrollGridView 
 android:id="@+id/gridview" 
 android:layout_width="220dp" 
 android:layout_height="wrap_content" 
 android:layout_below="@id/tv_content" 
 android:layout_marginLeft="5dp" 
 android:layout_marginTop="3dp" 
 android:layout_toRightOf="@id/iv_avatar" 
 android:columnWidth="70dp" 
 android:gravity="center" 
 android:horizontalSpacing="2.5dp" 
 android:numColumns="3" 
 android:stretchMode="columnWidth" 
 android:verticalSpacing="2.5dp" /> 
 
</RelativeLayout> 

         好了,大家看到了,布局也是极其简单的,但是有个问题就是ListView嵌套进了GridView,那么就会出现一个问题,导致GridView显示的不全,那么该怎么解决这个问题呢?其实也简单,就是重写一个GridView,测量一下GridView的高度,再设置上去。具体解决方案请看上篇博文ListView嵌套GridView显示不全解决方法或者源码,如下NoScrollGridView.java

package com.example.imagedemo; 
 
import android.content.Context; 
import android.util.AttributeSet; 
import android.widget.GridView; 
 
/** 
 * 自定义的“九宫格”——用在显示帖子详情的图片集合 解决的问题:GridView显示不全,只显示了一行的图片,比较奇怪,尝试重写GridView来解决 
 * 
 * @author lichao 
 * @since 2014-10-16 16:41 
 * 
 */ 
public class NoScrollGridView extends GridView { 
 
 public NoScrollGridView(Context context) { 
 super(context); 
 // TODO Auto-generated constructor stub 
 } 
 
 public NoScrollGridView(Context context, AttributeSet attrs) { 
 super(context, attrs); 
 // TODO Auto-generated constructor stub 
 } 
 
 public NoScrollGridView(Context context, AttributeSet attrs, int defStyle) { 
 super(context, attrs, defStyle); 
 // TODO Auto-generated constructor stub 
 } 
 
 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
 // TODO Auto-generated method stub 
 int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, 
  MeasureSpec.AT_MOST); 
 super.onMeasure(widthMeasureSpec, expandSpec); 
 } 
 
} 

        接下来看看ListView上面Item的实体是什么样的数据结构,这就显得非常简单了。

public class ItemEntity { 
 private String avatar; // 用户头像URL 
 private String title; // 标题 
 private String content; // 内容 
 private ArrayList<String> imageUrls; // 九宫格图片的URL集合 
 
 public ItemEntity(String avatar, String title, String content, 
  ArrayList<String> imageUrls) { 
 super(); 
 this.avatar = avatar; 
 this.title = title; 
 this.content = content; 
 this.imageUrls = imageUrls; 
 } 
 ... 
} 

        好了,有了ListView,那么不可避免的就是做Item上的数据适配了。继承一个BaseAdapter,代码如下,都比较简单:

/** 
 * 首页ListView的数据适配器 
 * 
 * @author Administrator 
 * 
 */ 
public class ListItemAdapter extends BaseAdapter { 
 
 private Context mContext; 
 private ArrayList<ItemEntity> items; 
 
 public ListItemAdapter(Context ctx, ArrayList<ItemEntity> items) { 
 this.mContext = ctx; 
 this.items = items; 
 } 
 
 @Override 
 public int getCount() { 
 return items == null ? 0 : items.size(); 
 } 
 
 @Override 
 public Object getItem(int position) { 
 return items.get(position); 
 } 
 
 @Override 
 public long getItemId(int position) { 
 return position; 
 } 
 
 @Override 
 public View getView(int position, View convertView, ViewGroup parent) { 
 ViewHolder holder; 
 if (convertView == null) { 
  holder = new ViewHolder(); 
  convertView = View.inflate(mContext, R.layout.item_list, null); 
  holder.iv_avatar = (ImageView) convertView 
   .findViewById(R.id.iv_avatar); 
  holder.tv_title = (TextView) convertView 
   .findViewById(R.id.tv_title); 
  holder.tv_content = (TextView) convertView 
   .findViewById(R.id.tv_content); 
  holder.gridview = (NoScrollGridView) convertView 
   .findViewById(R.id.gridview); 
  convertView.setTag(holder); 
 } else { 
  holder = (ViewHolder) convertView.getTag(); 
 } 
 ItemEntity itemEntity = items.get(position); 
 holder.tv_title.setText(itemEntity.getTitle()); 
 holder.tv_content.setText(itemEntity.getContent()); 
 // 使用ImageLoader加载网络图片 
 DisplayImageOptions options = new DisplayImageOptions.Builder()// 
  .showImageOnLoading(R.drawable.ic_launcher) // 加载中显示的默认图片 
  .showImageOnFail(R.drawable.ic_launcher) // 设置加载失败的默认图片 
  .cacheInMemory(true) // 内存缓存 
  .cacheOnDisk(true) // sdcard缓存 
  .bitmapConfig(Config.RGB_565)// 设置最低配置 
  .build();// 
 ImageLoader.getInstance().displayImage(itemEntity.getAvatar(), 
  holder.iv_avatar, options); 
 final ArrayList<String> imageUrls = itemEntity.getImageUrls(); 
 if (imageUrls == null || imageUrls.size() == 0) { // 没有图片资源就隐藏GridView 
  holder.gridview.setVisibility(View.GONE); 
 } else { 
  holder.gridview.setAdapter(new NoScrollGridAdapter(mContext, 
   imageUrls)); 
 } 
 // 点击回帖九宫格,查看大图 
 holder.gridview.setOnItemClickListener(new OnItemClickListener() { 
 
  @Override 
  public void onItemClick(AdapterView<?> parent, View view, 
   int position, long id) { 
  // TODO Auto-generated method stub 
  imageBrower(position, imageUrls); 
  } 
 }); 
 return convertView; 
 } 
 
 /** 
 * 打开图片查看器 
 * 
 * @param position 
 * @param urls2 
 */ 
 protected void imageBrower(int position, ArrayList<String> urls2) { 
 Intent intent = new Intent(mContext, ImagePagerActivity.class); 
 // 图片url,为了演示这里使用常量,一般从数据库中或网络中获取 
 intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_URLS, urls2); 
 intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_INDEX, position); 
 mContext.startActivity(intent); 
 } 
 
 /** 
 * listview组件复用,防止“卡顿” 
 * 
 * @author Administrator 
 * 
 */ 
 class ViewHolder { 
 private ImageView iv_avatar; 
 private TextView tv_title; 
 private TextView tv_content; 
 private NoScrollGridView gridview; 
 } 
} 

        这里有需要解释的地方了,看看listview上的图片处理,由于图片都是从网络获取的,为了避免图片过多造成OOM,那么这里加载图片的时候必不可少的需要做内存优化,图片的优化方式有很多,我这里采取了最简单最直接得方式,使用了开源的ImageLoader这个图片加载框架,这个框架简直是太优秀了,减少了开发者一系列不必要而且时常会出现的麻烦,关于ImageLoader并不是本篇博文需要讲解的知识,关于ImageLoader,欢迎在GitHub主页上下载,地址是https://github.com/nostra13/Android-Universal-Image-Loader,既然使用了ImageLoader这个框架,就不得不在程序上做一些初始化的操作,首先需要自定义一个全局的上下文Application类,将ImageLoader的相关属性初始化上去,直接看代码好了,见名知意:MyApplication.java

public class MyApplication extends Application { 
 @Override 
 public void onCreate() { 
 super.onCreate(); 
 DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder() // 
  .showImageForEmptyUri(R.drawable.ic_launcher) // 
  .showImageOnFail(R.drawable.ic_launcher) // 
  .cacheInMemory(true) // 
  .cacheOnDisk(true) // 
  .build();// 
 ImageLoaderConfiguration config = new ImageLoaderConfiguration// 
 .Builder(getApplicationContext())// 
  .defaultDisplayImageOptions(defaultOptions)// 
  .discCacheSize(50 * 1024 * 1024)// 
  .discCacheFileCount(100)// 缓存一百张图片 
  .writeDebugLogs()// 
  .build();// 
 ImageLoader.getInstance().init(config); 
 } 
} 

       定义这个Application之后,需要在清单文件中配置一下,在Manifest.xml中的Application节点上添加:
android:name="com.example.imagedemo.MyApplication"  
        此外由于ImageLoader是网络获取图片,又需要本地sdcard缓存图片,所以需要加上一下的权限,这是Imageloader标准权限:

<uses-permission android:name="android.permission.INTERNET" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 

       再看看上面的Item上数据,里面有个GridView,显然这个GridView也是需要做数据适配的,这个数据反应的是从网络加载图片,比较简单,看代码NoScrollGridAdapter.java

 ...... 
Override 
public View getView(int position, View convertView, ViewGroup parent) { 
 View view = View.inflate(ctx, R.layout.item_gridview, null); 
 ImageView imageView = (ImageView) view.findViewById(R.id.iv_image); 
 DisplayImageOptions options = new DisplayImageOptions.Builder()// 
  .cacheInMemory(true)// 
  .cacheOnDisk(true)// 
  .bitmapConfig(Config.RGB_565)// 
  .build(); 
 ImageLoader.getInstance().displayImage(imageUrls.get(position), 
  imageView, options); 
 return view; 
} 
 ...... 

         这样,所有的数据适配就做好了,接下来就需要做图片查看器了,当我们点击ListView上Item里的“九宫格”——NoScrollGridView的某张图片的时候,需要把这个图片的url传给一个图片查看器,图片查看器里会根据传递进来的url去网络加载这张图片,那么其实图片查看器就是一个新的单独的Activity,这个Activity会包含一个ViewPager,用来管理多张图片的查看。image_detail_pager.xml

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <com.example.imagedemo.HackyViewPager 
 android:id="@+id/pager" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="@android:color/black" /> 
 
 <TextView 
 android:id="@+id/indicator" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_gravity="bottom" 
 android:background="@android:color/transparent" 
 android:gravity="center" 
 android:text="@string/viewpager_indicator" 
 android:textColor="@android:color/white" 
 android:textSize="18sp" /> 
 
</FrameLayout> 

HackyViewPager.java

public class HackyViewPager extends ViewPager { 
 
 private static final String TAG = "HackyViewPager"; 
 
 public HackyViewPager(Context context) { 
 super(context); 
 } 
 
 public HackyViewPager(Context context, AttributeSet attrs) { 
 super(context, attrs); 
 } 
 
 @Override 
 public boolean onInterceptTouchEvent(MotionEvent ev) { 
 try { 
  return super.onInterceptTouchEvent(ev); 
 } catch (IllegalArgumentException e) { 
  // 不理会 
  Log.e(TAG, "hacky viewpager error1"); 
  return false; 
 } catch (ArrayIndexOutOfBoundsException e) { 
  // 不理会 
  Log.e(TAG, "hacky viewpager error2"); 
  return false; 
 } 
 } 
 
} 

ImagePagerActivity.java

/** 
 * 图片查看器 
 */ 
public class ImagePagerActivity extends FragmentActivity { 
 private static final String STATE_POSITION = "STATE_POSITION"; 
 public static final String EXTRA_IMAGE_INDEX = "image_index"; 
 public static final String EXTRA_IMAGE_URLS = "image_urls"; 
 
 private HackyViewPager mPager; 
 private int pagerPosition; 
 private TextView indicator; 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.image_detail_pager); 
 
 pagerPosition = getIntent().getIntExtra(EXTRA_IMAGE_INDEX, 0); 
 ArrayList<String> urls = getIntent().getStringArrayListExtra( 
  EXTRA_IMAGE_URLS); 
 
 mPager = (HackyViewPager) findViewById(R.id.pager); 
 ImagePagerAdapter mAdapter = new ImagePagerAdapter( 
  getSupportFragmentManager(), urls); 
 mPager.setAdapter(mAdapter); 
 indicator = (TextView) findViewById(R.id.indicator); 
 
 CharSequence text = getString(R.string.viewpager_indicator, 1, mPager 
  .getAdapter().getCount()); 
 indicator.setText(text); 
 // 更新下标 
 mPager.setOnPageChangeListener(new OnPageChangeListener() { 
 
  @Override 
  public void onPageScrollStateChanged(int arg0) { 
  } 
 
  @Override 
  public void onPageScrolled(int arg0, float arg1, int arg2) { 
  } 
 
  @Override 
  public void onPageSelected(int arg0) { 
  CharSequence text = getString(R.string.viewpager_indicator, 
   arg0 + 1, mPager.getAdapter().getCount()); 
  indicator.setText(text); 
  } 
 
 }); 
 if (savedInstanceState != null) { 
  pagerPosition = savedInstanceState.getInt(STATE_POSITION); 
 } 
 
 mPager.setCurrentItem(pagerPosition); 
 } 
 
 @Override 
 public void onSaveInstanceState(Bundle outState) { 
 outState.putInt(STATE_POSITION, mPager.getCurrentItem()); 
 } 
 
 private class ImagePagerAdapter extends FragmentStatePagerAdapter { 
 
 public ArrayList<String> fileList; 
 
 public ImagePagerAdapter(FragmentManager fm, ArrayList<String> fileList) { 
  super(fm); 
  this.fileList = fileList; 
 } 
 
 @Override 
 public int getCount() { 
  return fileList == null ? 0 : fileList.size(); 
 } 
 
 @Override 
 public Fragment getItem(int position) { 
  String url = fileList.get(position); 
  return ImageDetailFragment.newInstance(url); 
 } 
 
 } 
} 

          已知图片查看的界面是继承自FragmentActivity的,所以支持显示的界面必须需要Fragment来实现,那么就自定义个Frangment吧,用这个Fragment来从url中获取图片资源,显示图片。image_detail_fragment.xml

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="@android:color/black" > 
 
 <ImageView 
 android:id="@+id/image" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:adjustViewBounds="true" 
 android:contentDescription="@string/app_name" 
 android:scaleType="centerCrop" /> 
 
 <ProgressBar 
 android:id="@+id/loading" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_gravity="center" 
 android:visibility="gone" /> 
 
</FrameLayout> 

ImageDetailFragment.java

/** 
 * 单张图片显示Fragment 
 */ 
public class ImageDetailFragment extends Fragment { 
 private String mImageUrl; 
 private ImageView mImageView; 
 private ProgressBar progressBar; 
 private PhotoViewAttacher mAttacher; 
 
 public static ImageDetailFragment newInstance(String imageUrl) { 
 final ImageDetailFragment f = new ImageDetailFragment(); 
 
 final Bundle args = new Bundle(); 
 args.putString("url", imageUrl); 
 f.setArguments(args); 
 
 return f; 
 } 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 mImageUrl = getArguments() != null ? getArguments().getString("url") 
  : null; 
 } 
 
 @Override 
 public View onCreateView(LayoutInflater inflater, ViewGroup container, 
  Bundle savedInstanceState) { 
 final View v = inflater.inflate(R.layout.image_detail_fragment, 
  container, false); 
 mImageView = (ImageView) v.findViewById(R.id.image); 
 mAttacher = new PhotoViewAttacher(mImageView); 
 
 mAttacher.setOnPhotoTapListener(new OnPhotoTapListener() { 
 
  @Override 
  public void onPhotoTap(View arg0, float arg1, float arg2) { 
  getActivity().finish(); 
  } 
 }); 
 
 progressBar = (ProgressBar) v.findViewById(R.id.loading); 
 return v; 
 } 
 
 @Override 
 public void onActivityCreated(Bundle savedInstanceState) { 
 super.onActivityCreated(savedInstanceState); 
 
 ImageLoader.getInstance().displayImage(mImageUrl, mImageView, 
  new SimpleImageLoadingListener() { 
   @Override 
   public void onLoadingStarted(String imageUri, View view) { 
   progressBar.setVisibility(View.VISIBLE); 
   } 
 
   @Override 
   public void onLoadingFailed(String imageUri, View view, 
    FailReason failReason) { 
   String message = null; 
   switch (failReason.getType()) { 
   case IO_ERROR: 
    message = "下载错误"; 
    break; 
   case DECODING_ERROR: 
    message = "图片无法显示"; 
    break; 
   case NETWORK_DENIED: 
    message = "网络有问题,无法下载"; 
    break; 
   case OUT_OF_MEMORY: 
    message = "图片太大无法显示"; 
    break; 
   case UNKNOWN: 
    message = "未知的错误"; 
    break; 
   } 
   Toast.makeText(getActivity(), message, 
    Toast.LENGTH_SHORT).show(); 
   progressBar.setVisibility(View.GONE); 
   } 
 
   @Override 
   public void onLoadingComplete(String imageUri, View view, 
    Bitmap loadedImage) { 
   progressBar.setVisibility(View.GONE); 
   mAttacher.update(); 
   } 
  }); 
 } 
} 

         写到这里,此篇博文也宣告结束了。需要提出的是,我这里的图片查看器实现的图片的缩放效果使用的是开源组件PhotoView,关于PhotoView的github项目地址在这里,https://github.com/chrisbanes/PhotoView需要点进去这个项目的网址,去下载源码,将源码全部拷贝到项目中来,使用也是相当方便的,demo如下:

ImageView mImageView; 
PhotoViewAttacher mAttacher; 
 
@Override 
public void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.activity_main); 
 
 // Any implementation of ImageView can be used! 
 mImageView = (ImageView) findViewById(R.id.iv_photo); 
 
 // Set the Drawable displayed 
 Drawable bitmap = getResources().getDrawable(R.drawable.wallpaper); 
 mImageView.setImageDrawable(bitmap); 
 
 // Attach a PhotoViewAttacher, which takes care of all of the zooming functionality. 
 mAttacher = new PhotoViewAttacher(mImageView); 
} 
 
 
// If you later call mImageView.setImageDrawable/setImageBitmap/setImageResource/etc then you just need to call 
attacher.update(); 

         刚开始这个图片查看器是我自己自定义View来实现的,其实需要实现图片的手势识别+多点触控+缩放,是可以使用矩阵Matrix来实现的,只不过这样显得特别的麻烦不说,而且极易出现BUG,这对于某些“急功近利”的项目来说,是个不好的兆头。所以,我这里摒弃了我用Matrix自定义的效果,改用github大牛为我们写好的开源组件,这样效率就上去了,大家也可以用Matrix自己去实现一下图片的多点触摸缩放的效果,关于Matrix的学习,请参加我以前的博文,Android自定义控件——3D画廊和图像矩阵。其实关于android上的图片缩放真没什么其它的方式,唯一能使用的还是Matrix这个类,不信先来瞧瞧Github大牛写的开源组件PhotoView是怎么实现的,查看以下部分源码:

// These are set so we don't keep allocating them on the heap 
 private final Matrix mBaseMatrix = new Matrix(); 
 private final Matrix mDrawMatrix = new Matrix(); 
 private final Matrix mSuppMatrix = new Matrix(); 
 private final RectF mDisplayRect = new RectF(); 
 private final float[] mMatrixValues = new float[9]; 

/** 
 * Set's the ImageView's ScaleType to Matrix. 
 */ 
 private static void setImageViewScaleTypeMatrix(ImageView imageView) { 
 /** 
 * PhotoView sets it's own ScaleType to Matrix, then perts all calls 
 * setScaleType to this.setScaleType automatically. 
 */ 
 if (null != imageView && !(imageView instanceof IPhotoView)) { 
  if (!ScaleType.MATRIX.equals(imageView.getScaleType())) { 
  imageView.setScaleType(ScaleType.MATRIX); 
  } 
 } 
 } 

        以上只是PhotoView的部分源码,一目了然的发现它的实现也是基于Matrix的,时间与篇幅的局限性,大家需要更好的了解PhotoView的实现的话,就下载它的源码查看吧,要理解大神的想法是需要一些扎实的基础,关于PhotoView的具体实现细节,我也弄不太明白,可能是我对Matrix了解的不深刻吧,希望以后加强学习,也希望以后跟你们交流学习,共同进步!

点击复制链接 与好友分享!回本站首页
相关TAG标签 朋友 图片
上一篇:Android字段验证的实例代码
下一篇:Android系统模拟位置的使用方法
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站