Android自定义HorizontalScrollView打造超强Gallery效果

自从gallery被谷歌废弃以后，google推荐使用viewpager和horizontalscrollview来实现gallery的效果。的确horizontalscrollview可以实现gallery的效果，但是horizontalscrollview存在一个很大的问题，如果你仅是用来展示少量的图片，应该是没问题的，但是如果我希望horizontalscrollview可以想viewpager一样，既可以绑定数据集（动态改变图片），还能做到，不管多少图片都不会oom（viewpager内部一直初始化，回收，至多只保持3个view）。本篇博客首先介绍horizontalscrollview的简单用法，然后会在此基础上进行扩展，自定义horizontalscrollview实现我们上面提到的效果，类似一屏可以显示多个view的viewpager，再多的图片也不怕oom。
1、horizontalscrollview的简单用法
horizontalscrollview其实是framelayout的子类，所以内部只能有一个直接的子view。我们用来做gallery效果，首选当然是linearlayout，然后方向设置为水平。
1）、布局文件：

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 > 
 <horizontalscrollview 
 android:layout_width="wrap_content" 
 android:layout_height="150dp" 
 android:layout_gravity="center_vertical" 
 android:background="#aa444444" 
 android:scrollbars="none" > 
 
 <linearlayout 
  android:id="@+id/id_gallery" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:orientation="horizontal" > 
 </linearlayout> 
 </horizontalscrollview> 
 
</linearlayout> 

很简单，就一个horizontalscrollview内部有个水平方向的linearlayout
mainactivity:

package com.example.zhy_horizontalscrollview; 
 
import android.app.activity; 
import android.os.bundle; 
import android.view.layoutinflater; 
import android.view.view; 
import android.view.window; 
import android.widget.imageview; 
import android.widget.linearlayout; 
import android.widget.textview; 
 
public class mainactivity extends activity 
{ 
 
 private linearlayout mgallery; 
 private int[] mimgids; 
 private layoutinflater minflater; 
 
 @override 
 protected void oncreate(bundle savedinstancestate) 
 { 
 super.oncreate(savedinstancestate); 
 requestwindowfeature(window.feature_no_title); 
 setcontentview(r.layout.activity_main); 
 minflater = layoutinflater.from(this); 
 initdata(); 
 initview(); 
 
 } 
 
 private void initdata() 
 { 
 mimgids = new int[] { r.drawable.a, r.drawable.b, r.drawable.c, 
  r.drawable.d, r.drawable.e, r.drawable.f, r.drawable.g, 
  r.drawable.h, r.drawable.l }; 
 } 
 
 private void initview() 
 { 
 mgallery = (linearlayout) findviewbyid(r.id.id_gallery); 
 
 for (int i = 0; i < mimgids.length; i++) 
 { 
  
  view view = minflater.inflate(r.layout.activity_index_gallery_item, 
   mgallery, false); 
  imageview img = (imageview) view 
   .findviewbyid(r.id.id_index_gallery_item_image); 
  img.setimageresource(mimgids[i]); 
  textview txt = (textview) view 
   .findviewbyid(r.id.id_index_gallery_item_text); 
  txt.settext("some info "); 
  mgallery.addview(view); 
 } 
 } 
 
} 

很简单，我预先准备了一些图片直接放在了drawble下，然后循环加入horizontalscrollview的linearlayout中即可，item的布局就省了，后面会贴源码。
效果图：

效果还是不错的~如果只需要简单展示几张图片，直接用就可以了。
下面准备进入正题，horizontalscrollview不管里面多少view都是不会回收的，当达到一定量的时候会发生oom，下面介绍如何改写horizontalscollview实现文章开始所说的效果。
2、自定义horizontalscrollview
思想：
1、首先根据屏幕的大小和item的大小，计算可以一个屏幕最多可以加载多少个item，然后加载该数量item。
2、当用户右滑（从右向左），滑动到一定距离时，加载下一张，删除第一张
3、当用户左滑（从左向右），滑动到一定距离时，加载上一张，删除最后一张
看下最后的效果图：

为了增加一定的趣味，做了一个类似上面的相册效果，支持拖动时自动变化，和点击变化~~是不是很赞~
1）、首先看布局文件：

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:background="@android:color/white" 
 android:orientation="vertical" > 
 
 <framelayout 
 android:layout_width="fill_parent" 
 android:layout_height="0dp" 
 android:layout_weight="1" > 
 
 <imageview 
  android:id="@+id/id_content" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:layout_gravity="center" 
  android:layout_margin="10dp" 
  android:scaletype="centercrop" 
  android:src="@drawable/ic_launcher" /> 
 </framelayout> 
 
 <com.example.zhy_horizontalscrollview.myhorizontalscrollview 
 android:id="@+id/id_horizontalscrollview" 
 android:layout_width="wrap_content" 
 android:layout_height="150dp" 
 android:layout_gravity="bottom" 
 android:background="@android:color/white" 
 android:scrollbars="none" > 
 
 <linearlayout 
  android:id="@+id/id_gallery" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:orientation="horizontal" > 
 </linearlayout> 
 </com.example.zhy_horizontalscrollview.myhorizontalscrollview> 
 
</linearlayout> 

没任何变化，除了把类名改成了我们自定义的类~
2）、为了和国际接轨，我们也搞个adapter，类似baseadapter

package com.example.zhy_horizontalscrollview; 
 
import java.util.list; 
 
import android.content.context; 
import android.view.layoutinflater; 
import android.view.view; 
import android.view.viewgroup; 
import android.widget.baseadapter; 
import android.widget.imageview; 
import android.widget.textview; 
 
public class horizontalscrollviewadapter 
{ 
 
 private context mcontext; 
 private layoutinflater minflater; 
 private list<integer> mdatas; 
 
 public horizontalscrollviewadapter(context context, list<integer> mdatas) 
 { 
 this.mcontext = context; 
 minflater = layoutinflater.from(context); 
 this.mdatas = mdatas; 
 } 
 
 public int getcount() 
 { 
 return mdatas.size(); 
 } 
 
 public object getitem(int position) 
 { 
 return mdatas.get(position); 
 } 
 
 public long getitemid(int position) 
 { 
 return position; 
 } 
 
 public view getview(int position, view convertview, viewgroup parent) 
 { 
 viewholder viewholder = null; 
 if (convertview == null) 
 { 
  viewholder = new viewholder(); 
  convertview = minflater.inflate( 
   r.layout.activity_index_gallery_item, parent, false); 
  viewholder.mimg = (imageview) convertview 
   .findviewbyid(r.id.id_index_gallery_item_image); 
  viewholder.mtext = (textview) convertview 
   .findviewbyid(r.id.id_index_gallery_item_text); 
 
  convertview.settag(viewholder); 
 } else 
 { 
  viewholder = (viewholder) convertview.gettag(); 
 } 
 viewholder.mimg.setimageresource(mdatas.get(position)); 
 viewholder.mtext.settext("some info "); 
 
 return convertview; 
 } 
 
 private class viewholder 
 { 
 imageview mimg; 
 textview mtext; 
 } 
 
} 

3）、下面先看用法：

package com.example.zhy_horizontalscrollview; 
 
import java.util.arraylist; 
import java.util.arrays; 
import java.util.list; 
 
import android.app.activity; 
import android.graphics.color; 
import android.os.bundle; 
import android.view.view; 
import android.view.window; 
import android.widget.imageview; 
 
import com.example.zhy_horizontalscrollview.myhorizontalscrollview.currentimagechangelistener; 
import com.example.zhy_horizontalscrollview.myhorizontalscrollview.onitemclicklistener; 
 
public class mainactivity extends activity 
{ 
 
 private myhorizontalscrollview mhorizontalscrollview; 
 private horizontalscrollviewadapter madapter; 
 private imageview mimg; 
 private list<integer> mdatas = new arraylist<integer>(arrays.aslist( 
  r.drawable.a, r.drawable.b, r.drawable.c, r.drawable.d, 
  r.drawable.e, r.drawable.f, r.drawable.g, r.drawable.h, 
  r.drawable.l)); 
 
 @override 
 protected void oncreate(bundle savedinstancestate) 
 { 
 super.oncreate(savedinstancestate); 
 requestwindowfeature(window.feature_no_title); 
 setcontentview(r.layout.activity_main); 
 
 mimg = (imageview) findviewbyid(r.id.id_content); 
 
 mhorizontalscrollview = (myhorizontalscrollview) findviewbyid(r.id.id_horizontalscrollview); 
 madapter = new horizontalscrollviewadapter(this, mdatas); 
 //添加滚动回调 
 mhorizontalscrollview 
  .setcurrentimagechangelistener(new currentimagechangelistener() 
  { 
   @override 
   public void oncurrentimgchanged(int position, 
    view viewindicator) 
   { 
   mimg.setimageresource(mdatas.get(position)); 
   viewindicator.setbackgroundcolor(color 
    .parsecolor("#aa024da4")); 
   } 
  }); 
 //添加点击回调 
 mhorizontalscrollview.setonitemclicklistener(new onitemclicklistener() 
 { 
 
  @override 
  public void onclick(view view, int position) 
  { 
  mimg.setimageresource(mdatas.get(position)); 
  view.setbackgroundcolor(color.parsecolor("#aa024da4")); 
  } 
 }); 
 //设置适配器 
 mhorizontalscrollview.initdatas(madapter); 
 } 
 
} 

用起来是不是有点像listview，初始化数据适配器，然后设置数据适配器，然后就是设置各种回调~~
如果仅仅是一堆图片展示，类似商品切换，更见简单，就不需要设置滚动监听和点击监听了~
4）、最后看自定义的myhorizontalscrollview类

package com.example.zhy_horizontalscrollview; 
 
import java.util.hashmap; 
import java.util.map; 
 
import android.content.context; 
import android.graphics.color; 
import android.util.attributeset; 
import android.util.displaymetrics; 
import android.util.log; 
import android.view.motionevent; 
import android.view.view; 
import android.view.view.onclicklistener; 
import android.view.windowmanager; 
import android.widget.horizontalscrollview; 
import android.widget.linearlayout; 
 
public class myhorizontalscrollview extends horizontalscrollview implements 
 onclicklistener 
{ 
 
 /** 
 * 图片滚动时的回调接口 
 * 
 * @author zhy 
 * 
 */ 
 public interface currentimagechangelistener 
 { 
 void oncurrentimgchanged(int position, view viewindicator); 
 } 
 
 /** 
 * 条目点击时的回调 
 * 
 * @author zhy 
 * 
 */ 
 public interface onitemclicklistener 
 { 
 void onclick(view view, int pos); 
 } 
 
 private currentimagechangelistener mlistener; 
 
 private onitemclicklistener monclicklistener; 
 
 private static final string tag = "myhorizontalscrollview"; 
 
 /** 
 * horizontallistview中的linearlayout 
 */ 
 private linearlayout mcontainer; 
 
 /** 
 * 子元素的宽度 
 */ 
 private int mchildwidth; 
 /** 
 * 子元素的高度 
 */ 
 private int mchildheight; 
 /** 
 * 当前最后一张图片的index 
 */ 
 private int mcurrentindex; 
 /** 
 * 当前第一张图片的下标 
 */ 
 private int mfristindex; 
 /** 
 * 当前第一个view 
 */ 
 private view mfirstview; 
 /** 
 * 数据适配器 
 */ 
 private horizontalscrollviewadapter madapter; 
 /** 
 * 每屏幕最多显示的个数 
 */ 
 private int mcountonescreen; 
 /** 
 * 屏幕的宽度 
 */ 
 private int mscreenwitdh; 
 
 
 /** 
 * 保存view与位置的键值对 
 */ 
 private map<view, integer> mviewpos = new hashmap<view, integer>(); 
 
 public myhorizontalscrollview(context context, attributeset attrs) 
 { 
 super(context, attrs); 
 // 获得屏幕宽度 
 windowmanager wm = (windowmanager) context 
  .getsystemservice(context.window_service); 
 displaymetrics outmetrics = new displaymetrics(); 
 wm.getdefaultdisplay().getmetrics(outmetrics); 
 mscreenwitdh = outmetrics.widthpixels; 
 } 
 
 @override 
 protected void onmeasure(int widthmeasurespec, int heightmeasurespec) 
 { 
 super.onmeasure(widthmeasurespec, heightmeasurespec); 
 mcontainer = (linearlayout) getchildat(0); 
 } 
 
 /** 
 * 加载下一张图片 
 */ 
 protected void loadnextimg() 
 { 
 // 数组边界值计算 
 if (mcurrentindex == madapter.getcount() - 1) 
 { 
  return; 
 } 
 //移除第一张图片，且将水平滚动位置置0 
 scrollto(0, 0); 
 mviewpos.remove(mcontainer.getchildat(0)); 
 mcontainer.removeviewat(0); 
  
 //获取下一张图片，并且设置onclick事件，且加入容器中 
 view view = madapter.getview(++mcurrentindex, null, mcontainer); 
 view.setonclicklistener(this); 
 mcontainer.addview(view); 
 mviewpos.put(view, mcurrentindex); 
  
 //当前第一张图片小标 
 mfristindex++; 
 //如果设置了滚动监听则触发 
 if (mlistener != null) 
 { 
  notifycurrentimgchanged(); 
 } 
 
 } 
 /** 
 * 加载前一张图片 
 */ 
 protected void loadpreimg() 
 { 
 //如果当前已经是第一张，则返回 
 if (mfristindex == 0) 
  return; 
 //获得当前应该显示为第一张图片的下标 
 int index = mcurrentindex - mcountonescreen; 
 if (index >= 0) 
 { 
//  mcontainer = (linearlayout) getchildat(0); 
  //移除最后一张 
  int oldviewpos = mcontainer.getchildcount() - 1; 
  mviewpos.remove(mcontainer.getchildat(oldviewpos)); 
  mcontainer.removeviewat(oldviewpos); 
  
  //将此view放入第一个位置 
  view view = madapter.getview(index, null, mcontainer); 
  mviewpos.put(view, index); 
  mcontainer.addview(view, 0); 
  view.setonclicklistener(this); 
  //水平滚动位置向左移动view的宽度个像素 
  scrollto(mchildwidth, 0); 
  //当前位置--，当前第一个显示的下标-- 
  mcurrentindex--; 
  mfristindex--; 
  //回调 
  if (mlistener != null) 
  { 
  notifycurrentimgchanged(); 
 
  } 
 } 
 } 
 
 /** 
 * 滑动时的回调 
 */ 
 public void notifycurrentimgchanged() 
 { 
 //先清除所有的背景色，点击时会设置为蓝色 
 for (int i = 0; i < mcontainer.getchildcount(); i++) 
 { 
  mcontainer.getchildat(i).setbackgroundcolor(color.white); 
 } 
  
 mlistener.oncurrentimgchanged(mfristindex, mcontainer.getchildat(0)); 
 
 } 
 
 /** 
 * 初始化数据，设置数据适配器 
 * 
 * @param madapter 
 */ 
 public void initdatas(horizontalscrollviewadapter madapter) 
 { 
 this.madapter = madapter; 
 mcontainer = (linearlayout) getchildat(0); 
 // 获得适配器中第一个view 
 final view view = madapter.getview(0, null, mcontainer); 
 mcontainer.addview(view); 
 
 // 强制计算当前view的宽和高 
 if (mchildwidth == 0 && mchildheight == 0) 
 { 
  int w = view.measurespec.makemeasurespec(0, 
   view.measurespec.unspecified); 
  int h = view.measurespec.makemeasurespec(0, 
   view.measurespec.unspecified); 
  view.measure(w, h); 
  mchildheight = view.getmeasuredheight(); 
  mchildwidth = view.getmeasuredwidth(); 
  log.e(tag, view.getmeasuredwidth() + "," + view.getmeasuredheight()); 
  mchildheight = view.getmeasuredheight(); 
  // 计算每次加载多少个view 
  mcountonescreen = mscreenwitdh / mchildwidth+2; 
 
  log.e(tag, "mcountonescreen = " + mcountonescreen 
   + " ,mchildwidth = " + mchildwidth); 
  
 
 } 
 //初始化第一屏幕的元素 
 initfirstscreenchildren(mcountonescreen); 
 } 
 
 /** 
 * 加载第一屏的view 
 * 
 * @param mcountonescreen 
 */ 
 public void initfirstscreenchildren(int mcountonescreen) 
 { 
 mcontainer = (linearlayout) getchildat(0); 
 mcontainer.removeallviews(); 
 mviewpos.clear(); 
 
 for (int i = 0; i < mcountonescreen; i++) 
 { 
  view view = madapter.getview(i, null, mcontainer); 
  view.setonclicklistener(this); 
  mcontainer.addview(view); 
  mviewpos.put(view, i); 
  mcurrentindex = i; 
 } 
 
 if (mlistener != null) 
 { 
  notifycurrentimgchanged(); 
 } 
 
 } 
 
 @override 
 public boolean ontouchevent(motionevent ev) 
 { 
 switch (ev.getaction()) 
 { 
 case motionevent.action_move: 
//  log.e(tag, getscrollx() + ""); 
 
  int scrollx = getscrollx(); 
  // 如果当前scrollx为view的宽度，加载下一张，移除第一张 
  if (scrollx >= mchildwidth) 
  { 
  loadnextimg(); 
  } 
  // 如果当前scrollx = 0， 往前设置一张，移除最后一张 
  if (scrollx == 0) 
  { 
  loadpreimg(); 
  } 
  break; 
 } 
 return super.ontouchevent(ev); 
 } 
 
 @override 
 public void onclick(view v) 
 { 
 if (monclicklistener != null) 
 { 
  for (int i = 0; i < mcontainer.getchildcount(); i++) 
  { 
  mcontainer.getchildat(i).setbackgroundcolor(color.white); 
  } 
  monclicklistener.onclick(v, mviewpos.get(v)); 
 } 
 } 
 
 public void setonitemclicklistener(onitemclicklistener monclicklistener) 
 { 
 this.monclicklistener = monclicklistener; 
 } 
 
 public void setcurrentimagechangelistener( 
  currentimagechangelistener mlistener) 
 { 
 this.mlistener = mlistener; 
 } 
 
} 

首先，加载第一个item，根据item的宽计算当前屏幕可以加载多少张图片，然后初始化第一屏的图片，接下来就是从写ontouchevent，在其中监听用户的action_move，然后根据移动的距离加载前一张或者后一张，同时动态移除不可见的view，回收内存~~~~
代码中有个map专门存储view和posion的，主要是为了给点击回调提供当前的view的位置，有点类似：android 自定义 viewpager 打造千变万化的图片切换效果里面的map的巧妙用法~~
是不是完全实现了viewpager和horizontalscrollview的合体~~~horizontalscrollview的效果，viewpager的特性~~~~
最后贴一下旋转屏幕后的效果图：

可以看出，不仅是做相册，还是图片轮播想过都是刚刚的！

源码下载：horizontalscrollview打造超强gallery效果

如果你的项目中需要用到gallery类似的效果，果断使用上例尝试吧！