Android使用HorizontalScrollView实现水平滚动
horizontalscrollview 和 scrollview 都是由 framelayout 派生出来的。它们就是一个用于为普通组件添加滚动条的组件。且 horizontalscrollview 和 scrollview 里面最多只能包含一个组件(当然组件里面还可以嵌套组件)。它们不同的是 horizontalscrollview 用于添加水平滚动,而 scrollview 用于添加垂直滚动。
突然间想到 做一个屏幕下方水平滑动,屏幕上方并作出相应的反应的效果。只是在下方滚动时,屏幕上方没有作出理想的反应,点击事件倒是实现了。最终只能在网上搜索,终于找到了一个。于是作出的效果如下:
只是这个效果还有所缺陷,加载了 13 张图片,在屏幕下方水平滚动到最后一页时,第 9 张的图片并没有在上面的显示出来(原作者的也有这个问题);如果图片的数量小于或者等于 4 张时则不能运行。
本例的难点主要在于 myhorizontalview 类中,并且还有收集而来的注解。
mainactivity.java :
package com.crazy.horizontalscrollviewtest; import java.io.inputstream; import java.util.arraylist; import java.util.arrays; import java.util.list; import com.crazy.horizontalscrollviewtest.myhorizontalview.currentimagechangelistener; import com.crazy.horizontalscrollviewtest.myhorizontalview.onitemclicklistener; import android.content.context; import android.graphics.bitmap; import android.graphics.bitmapfactory; import android.graphics.color; import android.os.bundle; import android.util.log; import android.view.view; import android.widget.imageview; import android.support.v7.app.appcompatactivity; public class mainactivity extends appcompatactivity { private imageview mimageview; private myhorizontalview myhorizontalview; private list<bitmap> bitmaplist; private myadapter adapter; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); init(); } private void init() { mimageview = (imageview)findviewbyid(r.id.imageview); bitmaplist = new arraylist<>(arrays.aslist( readbitmap(this, r.drawable.bricks), readbitmap(this, r.drawable.dog), readbitmap(this, r.drawable.flower), readbitmap(this, r.drawable.grass), readbitmap(this, r.drawable.stones), readbitmap(this, r.drawable.wood), readbitmap(this, r.drawable.bg_01), readbitmap(this, r.drawable.bg_02), readbitmap(this, r.drawable.bg_03), readbitmap(this, r.drawable.bg_04), readbitmap(this, r.drawable.bg_05), readbitmap(this, r.drawable.bg_06), readbitmap(this, r.drawable.bg_07) )); myhorizontalview = (myhorizontalview)findviewbyid(r.id.my_horizontal); adapter = new myadapter(this, bitmaplist); //设置适配器 myhorizontalview.initdatas(adapter); //添加滚动回调 myhorizontalview .setcurrentimagechangelistener(new currentimagechangelistener() { @override public void oncurrentimgchanged(int position, view viewindicator) { log.e("==============","=============== " + position); mimageview.setimagebitmap(bitmaplist.get(position)); viewindicator.setbackgroundcolor(color.parsecolor("#aa024da4")); } }); //添加点击回调 myhorizontalview.setonitemclicklistener(new onitemclicklistener() { @override public void onitemclick(view view, int position) { mimageview.setimagebitmap(bitmaplist.get(position)); view.setbackgroundcolor(color.parsecolor("#aa024da4")); } }); } public static bitmap readbitmap(context mcontext, int resid) { bitmapfactory.options opt = new bitmapfactory.options(); opt.inpreferredconfig = bitmap.config.rgb_565; opt.inpurgeable = true; opt.ininputshareable = true; inputstream is = mcontext.getresources().openrawresource(resid); return bitmapfactory.decodestream(is, null, opt); } }
myadapter 这部分并不是为 abslistview 和 absspinner 及其子类提供列表项的。它主要用于为 horizontalscrollview 提供数据。
myadapter.java :
package com.crazy.horizontalscrollviewtest; import java.util.arraylist; import java.util.list; import android.content.context; import android.graphics.bitmap; import android.util.log; import android.view.view; import android.view.viewgroup; import android.widget.baseadapter; import android.widget.imageview; import android.widget.relativelayout; /** * created by antimage on 2016/1/9. */ public class myadapter extends baseadapter { private list<bitmap> bitmaplist; private context mcontext; public myadapter(context context, list<bitmap> bitmaplist) { mcontext = context; if (bitmaplist == null) { bitmaplist = new arraylist<bitmap>(); } else { this.bitmaplist = bitmaplist; } } @override public int getcount() { return bitmaplist.size(); } @override public object getitem(int position) { return bitmaplist.get(position); } @override public long getitemid(int position) { return position; } @override public view getview(int position, view convertview, viewgroup parent) { viewholder viewholder = null; view view = null; // 此处要用相对布局,且与 xml 中的布局相同; // 如果使用线性布局,则显示不完整 relativelayout layout; if (convertview == null) { layout = (relativelayout) view.inflate(mcontext, r.layout.image_item_layout, null); viewholder = new viewholder(); viewholder.image = (imageview) layout.findviewbyid(r.id.top_image); layout.settag(viewholder); } else { layout = (relativelayout) convertview; view = layout; viewholder = (viewholder) layout.gettag(); log.e("myadapter", "正在检测数据来了没有 "); } bitmap btm = (bitmap) getitem(position); viewholder.image.setimagebitmap(btm); log.e("myadapter", "信息来了哦!"); return layout; } private static class viewholder { imageview image; } }
myhorizontalview 类主要用于未 mainacitivity 类提供接口、水平滚动时屏幕上方的反应及相应的点击事件等。该类主要使用了收集而来的代码,并做了相应的调整。
myhorizontalview.java :
package com.crazy.horizontalscrollviewtest; import java.util.hashmap; import java.util.map; import android.app.activity; 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.viewgroup; import android.widget.horizontalscrollview; /** * created by antimage on 2016/1/9. */ public class myhorizontalview extends horizontalscrollview implements view.onclicklistener { private string tag = "myhorizontalview"; private viewgroup parent; private int screenwidth; /* 当前最后一张图片的index*/ private int mcurrentindex; /* 当前第一张图片的下标*/ private int mfristindex; /* 每屏幕最多显示的个数*/ private int mcountonescreen; /* 子元素的宽度*/ private int mchildwidth; /* 子元素的高度*/ private int mchildheight; private myadapter madapter; private currentimagechangelistener mlistener; private onitemclicklistener monitemclicklistener; /** * 图片滚动时的回调接口 */ public interface currentimagechangelistener { void oncurrentimgchanged(int position, view viewindicator); } /** * 点击条目时的回调 */ public interface onitemclicklistener { void onitemclick(view view, int pos); } /* 保存view与位置的键值对 */ private map<view, integer> mviewpos = new hashmap<>(); public myhorizontalview(context context) { this(context, null); } public myhorizontalview(context context, attributeset attrs) { this(context, attrs, 0); } public myhorizontalview(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); this.setsmoothscrollingenabled(true); displaymetrics metrics = new displaymetrics(); // 取得窗口属性 ((activity) context).getwindowmanager().getdefaultdisplay().getmetrics(metrics); // 窗口的宽度 (像素) screenwidth = metrics.widthpixels; } /** * 初始化数据,设置数据适配器 */ public void initdatas(myadapter madapter) { if (getchildcount() == 0) { log.e(tag, "必须要有子元素"); } if (getchildcount() == 0 || madapter == null) return; this.madapter = madapter; parent = (viewgroup) getchildat(0); // 获得适配器中第一个view final view view = madapter.getview(0, null, parent); parent.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, "子组件的宽:" + mchildwidth + ", 子组件的高:" + mchildheight); // 计算每次加载多少个view mcountonescreen = screenwidth / mchildwidth + 2; log.e(tag, "mcountonescreen = " + mcountonescreen + " ,mchildwidth = " + mchildwidth); } //初始化第一屏幕的元素 loadfirstchild(mcountonescreen); } /** * 加载第一屏的view */ public void loadfirstchild(int mcountonescreen) { parent.removeallviews(); mviewpos.clear(); for (int i = 0; i < mcountonescreen; i++) { view view = madapter.getview(i, null, parent); view.setonclicklistener(this); parent.addview(view); mviewpos.put(view, i); mcurrentindex = i; } if (mlistener != null) { notifycurrentimagechanged(); } } @override public boolean ontouchevent(motionevent event) { switch (event.getaction()) { case motionevent.action_move: int scrollx = getscrollx(); // 如果当前scrollx为view的宽度,加载下一张,移除第一张 if (scrollx >= mchildwidth) { loadnextimage(); } // 如果当前scrollx = 0, 往前设置一张,移除最后一张 if (scrollx == 0) { loadpreimage(); } break; } // 这里无论返回值是设置 true 还是 false // horizontalscrollview都不会滑动 return super.ontouchevent(event); } /** * 加载下一张图片 */ protected void loadnextimage() { // 数组边界值计算 if (mcurrentindex == madapter.getcount() - 1) { return; } //移除第一张图片,且将水平滚动位置置0(图片有宽度,所以为置0) scrollto(0, 0); mviewpos.remove(parent.getchildat(0)); parent.removeviewat(0); //获取下一张图片,并且设置onclick事件,且加入容器中 view view = madapter.getview(++mcurrentindex, null, parent); log.e(tag, "mcurrentindex ===" + mcurrentindex); view.setonclicklistener(this); parent.addview(view); mviewpos.put(view, mcurrentindex); //当前第一张图片小标 mfristindex++; //如果设置了滚动监听则触发 if (mlistener != null) { notifycurrentimagechanged(); } } /** * 加载前一张图片 */ protected void loadpreimage() { //如果当前已经是第一张,则返回 if (mfristindex == 0) return; //获得当前应该显示为第一张图片的下标 int index = mcurrentindex - mcountonescreen; if (index >= 0) { //移除最后一张 int oldviewpos = parent.getchildcount() - 1; mviewpos.remove(parent.getchildat(oldviewpos)); parent.removeviewat(oldviewpos); //将此view放入第一个位置 view view = madapter.getview(index, null, parent); mviewpos.put(view, index); parent.addview(view, 0); view.setonclicklistener(this); //水平滚动位置向左移动view的宽度个像素 scrollto(mchildwidth, 0); //当前位置--,当前第一个显示的下标-- mcurrentindex--; mfristindex--; //回调 if (mlistener != null) { notifycurrentimagechanged(); } } } /** * 滑动时的回调 */ public void notifycurrentimagechanged() { int sum = parent.getchildcount(); for (int i = 0; i < sum; i++) { // 清除所有的背景色,点击时会设置为蓝色 parent.getchildat(i).setbackgroundcolor(color.white); } mlistener.oncurrentimgchanged(mfristindex, parent.getchildat(0)); } @override public void onclick(view v) { if (monitemclicklistener != null) { int sum = parent.getchildcount(); for (int i = 0; i < sum; i++) { parent.getchildat(i).setbackgroundcolor(color.white); } monitemclicklistener.onitemclick(v, mviewpos.get(v)); } } public void setonitemclicklistener(onitemclicklistener monclicklistener) { this.monitemclicklistener = monclicklistener; } public void setcurrentimagechangelistener(currentimagechangelistener mlistener) { this.mlistener = mlistener; } }
该类中的很多数据都在 list 集合里面,而集合的下标初始值为 0,与 list.size() 不相等。顾猜测,正是由于这个原因,在 mimageview 显示图片时,不能显示到第 9 张。
在这个类中 计算每次加载多少个 view 时的 mcountonescreen 计算方法感觉略有问题,从效果图中可以看出,屏幕中能加载 3 张多一点的图片。mcountonescreen = screenwidth / mchildwidth + 2; 在我的模拟器上计算得出的结果等于 5,也就是为什么不能加载小于等于 4 张图片,如果想要让该屏幕底部上只显示 3 张即一个屏幕也就能显示完。那就不用水平滚动了,那样就感觉使用 horizontalscrollview 失去了意义。
所用到的布局文件:
content_main.xml :
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="5dp" android:paddingtop="5dp" android:paddingright="5dp" android:paddingbottom="5dp" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.crazy.horizontalscrollviewtest.mainactivity" tools:showin="@layout/activity_main"> <imageview android:id="@+id/imageview" android:layout_width="match_parent" android:layout_height="380dp" android:scaletype="centercrop" /> <com.crazy.horizontalscrollviewtest.myhorizontalview android:id="@+id/my_horizontal" android:layout_below="@id/imageview" android:layout_alignparentbottom="true" android:scrollbars="none" android:layout_width="match_parent" android:layout_height="wrap_content"> <linearlayout android:id="@+id/linear_layout" android:orientation="horizontal" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> </linearlayout> </com.crazy.horizontalscrollviewtest.myhorizontalview> </relativelayout>
image_item_layout.xml (主要用于提供水平滚动的图片(屏幕底部)):
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <imageview android:id="@+id/top_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:scaletype="centercrop"/> </relativelayout>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
android使用PopupWindow实现页面点击顶部弹出下拉菜单
-
学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果
-
Android 使用CoordinatorLayout实现滚动标题栏效果的实例
-
Android中使用 AutoCompleteTextView 实现手机号格式化附带清空历史的操作
-
Android Support Library 标题栏(Toolbar)滚动效果实现方法
-
Android垂直滚动控件ScrollView使用方法详解
-
HorizontalScrollView水平滚动控件使用方法详解
-
android实现上下滚动的TextView
-
android使用Messenger绑定Service的多种实现方法
-
Android实现两个ScrollView互相联动的同步滚动效果代码