GridView横向滑动+预览

最新推荐文章于 2017-03-20 15:28:23 发布

小白的成长之路

最新推荐文章于 2017-03-20 15:28:23 发布

阅读量618

点赞数

CC 4.0 BY-SA版权

分类专栏： GridView基础学习01 文章标签： GridView横向滑动

本文链接：https://blog.youkuaiyun.com/bobo8945510/article/details/52573172

GridView基础学习01 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何实现Android GridView的横向滑动，包括纯横向滑动和带有预览效果的滑动。讲解了关键属性如android:columnWidth、android:stretchMode等，并提供了示例代码和下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯横向滑动dome：http://download.youkuaiyun.com/detail/bobo8945510/9602040

带预览的滑动：http://download.youkuaiyun.com/detail/bobo8945510/9632729

看下效果图
这里写图片描述

讲解

(1).android:columnWidth

主要用来指定每一列的宽度，使用该属性时应该注意和后面的拉伸模式相关联。如果拉伸模式为spacingWidth，则该属性必须指定；如果拉伸模式为columnWidth指定该属性无效。

(2).android:gravity
用于指定每个item的对其方式起始位置，当有多个是可以使用’|’隔开

(3).android:horizontalSpacing
用于指定每一列的之间的间距。注意：如果拉伸模式为spacingWidth，则该值设定无效

(4).android:numColumns
每一列的item数目

(5).android:verticalSpacing
用于指定每一行的之间的间距。

(6).android:stretchMode(*)
如果以列间距拉伸，则不需要指定列之间的间距；如果以列的等宽度拉伸，则不需要指定列的宽度。

(2)常量值描述

这里写图片描述

代码：

此方法是横向滑动的关键

首先看main布局文件

<HorizontalScrollView
        android:layout_width="fill_parent"
        android:layout_height="80dp"
        android:layout_margin="5dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_margin="10dp" >

            <GridView
                android:id="@+id/grid"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="center"
                android:numColumns="auto_fit"
                android:stretchMode="spacingWidthUniform" >
            </GridView>
        </LinearLayout>
    </HorizontalScrollView>

    //预览图片控件
    <ImageSwitcher android:id="@+id/switcher"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center_horizontal"
        android:inAnimation="@android:anim/fade_in"
        android:outAnimation="@android:anim/fade_out"/>

上面布局有一个控件

它是由FrameLayout派生而出，ImageSwitcher组件和ImageView很相似，他们都可用于显示图片，但是ImageSwitcher比普通ImageView多一个功能：他所显示的图片切换时可以设置动画效果。

这是横向滑动关键

    private void setGridView() {

        int size = datas.size();
        int length = 100;
        //获取手机分辨率
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        float density = dm.density;
        Log.i("Text",density+"");
        int gridviewWidth = (int) (size * (length + 4) * density);
        int itemWidth = (int) (length * density);
        Log.i("Text",itemWidth+"ss");
        //设计宽高
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(gridviewWidth, LinearLayout.LayoutParams.MATCH_PARENT);
        gridView.setLayoutParams(params);
        gridView.setColumnWidth(itemWidth);
        gridView.setHorizontalSpacing(5);
        gridView.setStretchMode(GridView.NO_STRETCH);
        gridView.setNumColumns(size);

        GridViewActivityAdapter adapter = new GridViewActivityAdapter(MainActivity.this, datas);
        gridView.setAdapter(adapter);
    }

图片预览方法

使用ImageSwitcher时往往需要它设置一个ImageSwitCher.ViewFactory，实ImageSwitcher.ViewFactory时需要实现一个makeView()方法，该方法通常会返回一个ImageView，而ImageSwitcher则负责显示这个ImageView。

private void setswicher() {
        switcher.setFactory(new ViewSwitcher.ViewFactory()
        {
            @Override
            public View makeView()
            {
                // 创建ImageView对象
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                        ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
                // 返回ImageView对象
                return imageView;
            }
        });

列表内容

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                // 预览显示被单击的图片
                if("老鼠".equals(datas.get(i).get("name"))){
                    switcher.setImageResource(R.drawable.png_01);
                }else if("牛".equals(datas.get(i).get("name"))){
                    switcher.setImageResource(R.drawable.png_02);
                }else if("老虎".equals(datas.get(i).get("name"))){
                    switcher.setImageResource(R.drawable.png_03);
                }else if("兔子".equals(datas.get(i).get("name"))){
                    switcher.setImageResource(R.drawable.png_04);
                }else if("龙".equals(datas.get(i).get("name"))){
                    switcher.setImageResource(R.drawable.png_05);
                }else if("蛇".equals(datas.get(i).get("name"))){
                    switcher.setImageResource(R.drawable.png_06);
                }
            }
        });