【android】简易实现横向的ListView

时间：2022-04-03 00:14:25

众所周知，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

相关文章