GridView上的边距/填充顶部

Question

I have a problem with my GridView. I am using part of Bitmapfun project, and I don't want to have a margin on the top.

See this capture :

I have a large black area (where I put the 3 question marks) between the spinner and the first pictures.

If I scroll down, I get a good render : photos slide under the spinner :

If I go back to the top, I have again this large black area just before the first pics. Someone could help me ?

Here is my gridview (image_grid_fragment.xml) :

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView"
    style="@style/PhotoGridLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="@dimen/image_thumbnail_size"
    android:horizontalSpacing="@dimen/image_thumbnail_spacing"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:verticalSpacing="@dimen/image_thumbnail_spacing" >

</GridView>

The GridView is included in this main layout :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="17dp"
        android:layout_marginLeft="16dp"
        android:text="Album : "
        android:textAppearance="?android:attr/textAppearanceSmallPopupMenu"
        android:textSize="18dp" />

    <Spinner
        android:id="@+id/spinner_album"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/TextView1"
        android:layout_marginTop="12dp"
        android:inputType="text"
        android:textSize="18dp" />

    <include layout="@layout/image_grid_fragment" />

</RelativeLayout>

values/styles.xml :

<style name="PhotoGridLayout">
    <item name="android:drawSelectorOnTop">false</item>
    <item name="android:listSelector">@drawable/photogrid_list_selector</item>
</style>

values-v11/styles.xml :

<style name="PhotoGridLayout">
    <item name="android:drawSelectorOnTop">true</item>
</style>

---

ImageGridActivity.java :

public class ImageGridActivity extends FragmentActivity {
    private static final String TAG = "ImageGridFragment";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (getSupportFragmentManager().findFragmentByTag(TAG) == null) {
            final FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            ft.add(android.R.id.content, new ImageGridFragment(), TAG);
            ft.commit();
        }
    }
}

With layout bounds activated in development options, I have this result :

Answer 1

What is the content of @layout/image_grid_fragment ?

What if you try to change

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView"
    style="@style/PhotoGridLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
   ...

to

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView"
    style="@style/PhotoGridLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   ...

Run your app on android 4.2 and in system settings, Developer Options -> show layout bounds (place checkmark). You will see if it's a padding or margin of some views.

Also you might be set something wrong in bindView(or getView) for gridView adapter.

Answer 2

Thanks to Roger Alien !! He put me on the right way !

The problem was on the gridView adapter :

Partial source code of ImageGridFragment.java :

/**
 * The main adapter that backs the GridView. This is fairly standard except the number of
 * columns in the GridView is used to create a fake top row of empty views as we use a
 * transparent ActionBar and don't want the real top row of images to start off covered by it.
 */
private class ImageAdapter extends BaseAdapter {

    private final Context mContext;
    private int mItemHeight = 0;
    private int mNumColumns = 0;
    private int mActionBarHeight = 0;
    private GridView.LayoutParams mImageViewLayoutParams;

    public ImageAdapter(Context context) {
        super();
        mContext = context;
        mImageViewLayoutParams = new GridView.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        // Calculate ActionBar height
        TypedValue tv = new TypedValue();
        if (context.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
            mActionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, context.getResources().getDisplayMetrics());
        }
    }

    @Override
    public int getCount() {
        // If columns have yet to be determined, return no items
        if (getNumColumns() == 0) {
            return 0;
        }

        // Size + number of columns for top empty row
        return Images.imageThumbUrls.length + mNumColumns;
    }

    @Override
    public Object getItem(int position) {
        return position < mNumColumns ?
                null : Images.imageThumbUrls[position - mNumColumns];
    }

    @Override
    public long getItemId(int position) {
        return position < mNumColumns ? 0 : position - mNumColumns;
    }

    @Override
    public int getViewTypeCount() {
        // Two types of views, the normal ImageView and the top row of empty views
        return 2;
    }

    @Override
    public int getItemViewType(int position) {
        return (position < mNumColumns) ? 1 : 0;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup container) {
        // First check if this is the top row
        if (position < mNumColumns) {
            if (convertView == null) {
                convertView = new View(mContext);
            }
            // Set empty view with height of ActionBar
            convertView.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, mActionBarHeight));
            //
            // THE PROBLEM IS HERE !!
            //

            return convertView;
        }

        // Now handle the main ImageView thumbnails
        ImageView imageView;
        if (convertView == null) { // if it's not recycled, instantiate and initialize
            imageView = new RecyclingImageView(mContext);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setLayoutParams(mImageViewLayoutParams);
        } else { // Otherwise re-use the converted view
            imageView = (ImageView) convertView;
        }

        // Check the height matches our calculated column width
        if (imageView.getLayoutParams().height != mItemHeight) {
            imageView.setLayoutParams(mImageViewLayoutParams);
        }

        // Finally load the image asynchronously into the ImageView, this also takes care of
        // setting a placeholder image while the background thread runs
        mImageFetcher.loadImage(Images.imageThumbUrls[position - mNumColumns], imageView, false);
        return imageView;
    }

    /**
     * Sets the item height. Useful for when we know the column width so the height can be set
     * to match.
     *
     * @param height
     */
    public void setItemHeight(int height) {
        if (height == mItemHeight) {
            return;
        }
        mItemHeight = height;
        mImageViewLayoutParams = new GridView.LayoutParams(LayoutParams.MATCH_PARENT, mItemHeight);
        mImageFetcher.setImageSize(height);
        notifyDataSetChanged();
    }

    public void setNumColumns(int numColumns) {
        mNumColumns = numColumns;
    }

    public int getNumColumns() {
        return mNumColumns;
    }
}

Look in the middle, in public View getView() : Bitmapfun project adds an empty view with a height equal to the height of ActionBar (because the actionbar is visible on the Bitmapfun original project).

If we comment this line (or if we let mActionBarHeight to 0 in public ImageAdapter()), we dont have this space before first pictures.

Thanks to Tim Castelijns too .!