狼主的诱惑,外国语学校湖里分校,零卡素
自从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 的横向滑动效果(实例代码)，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio 解决logcat无过滤工具栏的操作
Android Studio 恢复小窗口停靠模式(Docked Mode)
Android studio保存logcat日志到本地的操作
Android Studio快捷键生成TAG、Log.x日志输出介绍
网友评论