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的寬度直接是一行顯示時所有列寬的和。

源碼實例

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章