GridView横向显示 实现图片预览

先附效果图：

实现原理：布局文件中在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的宽度直接是一行显示时所有列宽的和。

源码实例

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

转载于:https://my.oschina.net/u/2441486/blog/519505