GridView横向显示 实现图片预览
博客专区 > 北ing 的博客 > 博客详情
GridView横向显示 实现图片预览
北ing 发表于2年前
GridView横向显示 实现图片预览
  • 发表于 2年前
  • 阅读 45
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

先附效果图:
这里写图片描述

实现原理:布局文件中在GridView外套一层HorizontalScrollView

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" tools:context="${relativePackage}.${activityClass}" >

    <HorizontalScrollView  android:layout_width="wrap_content" android:layout_height="wrap_content" android:scrollbars="none" >
        <LinearLayout  android:layout_width="wrap_content" android:layout_height="wrap_content" >
            <GridView  android:id="@+id/gridView" android:layout_width="match_parent" android:layout_height="match_parent" />
        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

2) 定义一个item:只显示一张图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center">
    <ImageView  android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/mm3" />
</LinearLayout>

3)注意在布局文件中gridview标签中没有定义其他的属性,需要在程序中动态获取才行。

public class MainActivity extends Activity {
    GridView gridView;
    int[] data = { R.drawable.mm1, R.drawable.mm2, R.drawable.mm3,
            R.drawable.mm4, R.drawable.mm5, R.drawable.mm6, };
    int count = data.length;// 总项数
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = (GridView) findViewById(R.id.gridView);

        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int columnWidth = dm.widthPixels;//由一屏幕显示的项数决定
        LayoutParams params1 = new LayoutParams(
                count * columnWidth + count, LayoutParams.WRAP_CONTENT);//
        gridView.setLayoutParams(params1);//设置高和宽
        gridView.setColumnWidth(columnWidth/1);//根据你一屏显示的项数决定
        gridView.setHorizontalSpacing(1);
        gridView.setStretchMode(GridView.NO_STRETCH);
        gridView.setNumColumns(count);//设置一行显示的总列数

        ImageAdapter adapter = new ImageAdapter();
        gridView.setAdapter(adapter);       
    }


    class ImageAdapter extends BaseAdapter{

        @Override
        public int getCount() {
            return data.length;
        }

        @Override
        public Object getItem(int position) {
            return data[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.item, parent, false);
            ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView);
            imageView.setImageResource(data[position]);
            return convertView;
        }
    }
}

LayoutParams params1 = new LayoutParams(
count * columnWidth + count, LayoutParams.WRAP_CONTENT);
关键就是这里,这里让gridView的宽度直接是一行显示时所有列宽的和。

源码实例

版权声明:本文为博主原创文章,未经博主允许不得转载。

标签: android gridview
共有 人打赏支持
粉丝 0
博文 12
码字总数 17332
×
北ing
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: