GridView中的横向和垂直图像(如何自动裁剪/缩放)

时间:2015-05-06 12:38:56

标签: android user-interface gridview imageview

我想在GridView中向用户显示设备上的所有缩略图,其中每个“单元格”都是一个ImageView。如果所有照片都是风景方向,这看起来很好:每个缩略图都是矩形并裁剪为相同的大小(我假设这是缩略图在设备上生成/存储的方式)。

但是,垂直定向的照片(和缩略图)会导致问题。高缩略图会拉伸单元格,使UI看起来很糟糕:

Messy UI 凌乱的UI

Neat UI 整洁的用户界面

处理此问题的好方法是什么?也许我应该在ImageViews上设置一些最大高度,手动裁剪(或缩放)垂直拇指?这样的事情应该用XML还是用Java代码完成?

  

更新:另一个奇怪的事情是设备依赖(一如既往)。上面的图片来自模拟器(Nexus 7),而这里是我的(物理)索尼Xperia Z1紧凑型相同的应用程序。请注意,所有垂直缩略图(和图像)都自动旋转,这样所有拇指都具有相同的高大尺寸......   enter image description here

以下是相关文件:

布局/ fragment_main.xml

<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity$PhotoFragment">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="4"
        android:id="@+id/listview_photo"
        style="@style/ForecastListStyle"
        />

</FrameLayout>

布局/ grid_item_gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:padding="1dp"
    android:layout_height="match_parent">

    <ImageView
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:layout_width="fill_parent"
        android:id="@+id/grid_item_photo" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:textAppearanceSmall"
        android:fontFamily="sans-serif-light"
        android:id="@+id/grid_item_label" />

</LinearLayout>

PhotoFragment.java

public class PhotoFragment extends Fragment implements LoaderManager.LoaderCallbacks<Cursor> {

    private final static int LOADER_ID = 87;
    private PhotoAdapter mPhotoAdapter;
    private GridView mGridView;

    // these are the data we want from MediaStore
    private final static String[] THUMBNAIL_COLUMNS = {
            PhotoContract.ThumbEntry.COLUMN_THUMB_ID,
            PhotoContract.ThumbEntry.COLUMN_DATA,
            PhotoContract.ThumbEntry.COLUMN_IMAGE_ID
    };

    static final int COL_THUMB_ID = 0;
    static final int COL_THUMB_DATA = 1;
    static final int COL_THUMB_IMAGE_ID = 2;

    public PhotoFragment() {
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        getLoaderManager().initLoader(LOADER_ID, null, this);
        super.onActivityCreated(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_main, container, false);

        mPhotoAdapter = new PhotoAdapter(getActivity(), null, 0);
        GridView gridView = (GridView) rootView.findViewById(R.id.listview_photo);
        gridView.setAdapter(mPhotoAdapter);

        mEmptyView = (TextView) rootView.findViewById(R.id.list_empty);
        mGridView = gridView;

        return rootView;
    }

    @Override
    public Loader<Cursor> onCreateLoader(int i, Bundle bundle) {
        Uri thumbs_uri = MediaStore.Images.Thumbnails.EXTERNAL_CONTENT_URI;
        return new CursorLoader(getActivity(), thumbs_uri, THUMBNAIL_COLUMNS,
                null,null,  // read everything (all thumbnails)
                MediaStore.Images.Thumbnails._ID + " DESC");
    }

    @Override
    public void onLoadFinished(Loader<Cursor> cursorLoader, Cursor cursor) {
        int antall = 0;
        if (cursor != null) 
            mPhotoAdapter.swapCursor(cursor);
    }

    @Override
    public void onLoaderReset(Loader<Cursor> cursorLoader) {
        mPhotoAdapter.swapCursor(null);
    }

}

PhotoAdapter.java

public class PhotoAdapter extends CursorAdapter {

    public PhotoAdapter(Context context, Cursor c, int flags) {
        super(context, c, flags);
    }

    @Override
    public View newView(Context context, Cursor cursor, ViewGroup parent) {
        View view = LayoutInflater.from(context).inflate(R.layout.grid_item_gallery, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        view.setTag(viewHolder);
        return view;
    }

    @Override
    public void bindView(View view, Context context, Cursor cursor) {
        ViewHolder viewHolder = (ViewHolder) view.getTag();

        long imgId = cursor.getLong(PhotoFragment.COL_THUMB_ID);

        String thumbData = cursor.getString(PhotoFragment.COL_THUMB_DATA);
        Bitmap thumbBitmap = BitmapFactory.decodeFile(thumbData);
        viewHolder.iconView.setImageBitmap(thumbBitmap);
        viewHolder.lbl.setText("Photo " + imgId);
    }

    public static class ViewHolder {
        public final ImageView iconView;
        public final TextView lbl;

        public ViewHolder(View view) {
            iconView = (ImageView) view.findViewById(R.id.grid_item_photo);
            lbl = (TextView) view.findViewById(R.id.grid_item_label);
        }
    }
}

1 个答案:

答案 0 :(得分:0)

我认为解决办法可能是从xml文件中在ImageView中设置android:layout_height =“sizeThatYouLike”