众所周知,android里面的ListView是竖着的。
如果想要横向的话需要自定义一下ListView。
CSDN上面有个人描述了一下一个国外大神的自定义横向ListVIew 请点击 --> 这里
自己也试了试这个HorizontalListView,发现bug还是不少 ,比如UI更新的时候排版总是不很正常,有时候item间距很大,有时候item间距很小。这让人很烦,所以就想着自己去实现以下简单的横向ListView
废话不多说:
布局 layout
<LinearLayout android:id="@+id/imgContent" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="10" android:gravity="center_vertical" android:orientation="vertical" > <HorizontalScrollView android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="0dip" android:background="#eee" > <LinearLayout android:id="@+id/thumbnailLinearLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center_vertical" android:orientation="horizontal" > </LinearLayout> </HorizontalScrollView> </LinearLayout>
对,你没有看错。布局文件就这么简单。还有个 horizontal_list_item 布局下面要用,但是里面就只有一个ImageView所以就没贴出来。
横向的ListView只需要一个 HorizontalScrollView和LinearLayout 就足够了 。
但是你会有疑问了,仅仅这样不能获取到LinearLayout里面的item啊,不能获取到item就不能给每个子View添加监听。别着急,向下看。
activity代码
//已经定义好的全局变量
listCount = 0; for(String imgUrl : imgUrlList){ listCount++; //加载布局 View view = mInflater.inflate(R.layout.horizontal_list_item,null); //找到ImageView ImageView thumImg = (ImageView)view.findViewById(R.id.img_list_item); //设定图片宽高(80*80) int w = getResources().getDimensionPixelOffset(R.dimen.thumnail_default_width); int h = getResources().getDimensionPixelSize(R.dimen.thumnail_default_height); //图片绑定设置 ImageOptions imageOptions = new ImageOptions.Builder() .setRadius(DensityUtil.dip2px(10))//ImageView圆角半径 .setSize(w,h) .setCrop(true) .setImageScaleType(ScaleType.FIT_CENTER) .setLoadingDrawableId(R.drawable.img_loading)//加载中默认显示图片 .setFailureDrawableId(R.drawable.img_fail) .build(); //异步加载图片 x.image().bind(thumImg, imgUrl, imageOptions); //添加到布局中 thumbnailLinearLayout.addView(view); } thumbnailLinearLayout.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { //获取到LinearLayout的宽度 注:在onCreat方法里面直接获取是0 所以要动态的获取 int width = thumbnailLinearLayout.getWidth(); //得到LinearLayout int itemCount = thumbnailLinearLayout.getChildCount(); //计算出每一个child的平均宽度 float itemWidth = width/itemCount*1.0f;
//得到点击的X坐标 float touchX = event.getX(0);
//用这个式子算出点击坐标所在那个child上 (点击的坐标除以每个child的宽度 就可以得出所在child的索引) 需要 +1 吗? int coverCount = (int) (touchX/itemWidth);
//有了索引就能干一些事情了
doSomething(coverCount);
for(int i=0;i<itemCount;i++){ thumbnailLinearLayout.getChildAt(i).setBackgroundColor(Color.TRANSPARENT); } //添加背景颜色,方便区别 所点击的那个child thumbnailLinearLayout.getChildAt(coverCount).setBackgroundColor(Color.rgb(120, 120, 120)); return false; } });
这段java代码写在activity的初始化控件里面。
重点在 thumbnailLinearLayout 设定setOnTouchListener 的方法里面 本来LinearLayout不能获取到自己的item 。但是可以用child来代替。获取到child和总长度以及touch的坐标(只需要X轴坐标)就能判定点下去的那个点相对于LinearLayout子View的索引了。
这只是一个简单的横向ListVIew ,能实现基本的 相册预览 功能。如果需要高级功能就自己自定义吧。
逻辑都在代码注释里面了。什么?看不懂? QQ462195349