Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

自从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的特性~~~~

最后贴一下旋转屏幕后的效果图：

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

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

源码下载

总结

以上所述是小编给大家介绍的android 自定义 horizontalscrollview 打造多图片oom 的横向滑动效果(实例代码)，希望对大家有所帮助