【问题标题】:Add a Header to a GridView (Android)将标题添加到 GridView (Android)
【发布时间】:2012-10-24 10:04:36
【问题描述】:

我知道 GridView 不支持页眉或页脚。 我广泛使用 GridViews,我希望标题可以随之滚动。

解决问题的最佳方法是什么?扩展 GridView?扩展 ScrollView 还是 ListView?

任何指针或建议将不胜感激!谢谢!

【问题讨论】:

标签: android gridview scrollview


【解决方案1】:

Google 的HeaderGridView 实现解决了这个问题。它们是 GridView 的子类。

HeaderGridView

我相信这是 Google+ 照片应用或图库原生应用的一部分。

/*
 * Copyright (C) 2013 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.android.photos.views;
import android.content.Context;
import android.database.DataSetObservable;
import android.database.DataSetObserver;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.FrameLayout;
import android.widget.GridView;
import android.widget.ListAdapter;
import android.widget.WrapperListAdapter;
import java.util.ArrayList;
/**
 * A {@link GridView} that supports adding header rows in a
 * very similar way to {@link ListView}.
 * See {@link HeaderGridView#addHeaderView(View, Object, boolean)}
 */
public class HeaderGridView extends GridView {
    private static final String TAG = "HeaderGridView";
    /**
     * A class that represents a fixed view in a list, for example a header at the top
     * or a footer at the bottom.
     */
    private static class FixedViewInfo {
        /** The view to add to the grid */
        public View view;
        public ViewGroup viewContainer;
        /** The data backing the view. This is returned from {@link ListAdapter#getItem(int)}. */
        public Object data;
        /** <code>true</code> if the fixed view should be selectable in the grid */
        public boolean isSelectable;
    }
    private ArrayList<FixedViewInfo> mHeaderViewInfos = new ArrayList<FixedViewInfo>();
    private void initHeaderGridView() {
        super.setClipChildren(false);
    }
    public HeaderGridView(Context context) {
        super(context);
        initHeaderGridView();
    }
    public HeaderGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initHeaderGridView();
    }
    public HeaderGridView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initHeaderGridView();
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        ListAdapter adapter = getAdapter();
        if (adapter != null && adapter instanceof HeaderViewGridAdapter) {
            ((HeaderViewGridAdapter) adapter).setNumColumns(getNumColumns());
        }
    }
    @Override
    public void setClipChildren(boolean clipChildren) {
       // Ignore, since the header rows depend on not being clipped
    }
    /**
     * Add a fixed view to appear at the top of the grid. If addHeaderView is
     * called more than once, the views will appear in the order they were
     * added. Views added using this call can take focus if they want.
     * <p>
     * NOTE: Call this before calling setAdapter. This is so HeaderGridView can wrap
     * the supplied cursor with one that will also account for header views.
     *
     * @param v The view to add.
     * @param data Data to associate with this view
     * @param isSelectable whether the item is selectable
     */
    public void addHeaderView(View v, Object data, boolean isSelectable) {
        ListAdapter adapter = getAdapter();
        if (adapter != null && ! (adapter instanceof HeaderViewGridAdapter)) {
            throw new IllegalStateException(
                    "Cannot add header view to grid -- setAdapter has already been called.");
        }
        FixedViewInfo info = new FixedViewInfo();
        FrameLayout fl = new FullWidthFixedViewLayout(getContext());
        fl.addView(v);
        info.view = v;
        info.viewContainer = fl;
        info.data = data;
        info.isSelectable = isSelectable;
        mHeaderViewInfos.add(info);
        // in the case of re-adding a header view, or adding one later on,
        // we need to notify the observer
        if (adapter != null) {
            ((HeaderViewGridAdapter) adapter).notifyDataSetChanged();
        }
    }
    /**
     * Add a fixed view to appear at the top of the grid. If addHeaderView is
     * called more than once, the views will appear in the order they were
     * added. Views added using this call can take focus if they want.
     * <p>
     * NOTE: Call this before calling setAdapter. This is so HeaderGridView can wrap
     * the supplied cursor with one that will also account for header views.
     *
     * @param v The view to add.
     */
    public void addHeaderView(View v) {
        addHeaderView(v, null, true);
    }
    public int getHeaderViewCount() {
        return mHeaderViewInfos.size();
    }
    /**
     * Removes a previously-added header view.
     *
     * @param v The view to remove
     * @return true if the view was removed, false if the view was not a header
     *         view
     */
    public boolean removeHeaderView(View v) {
        if (mHeaderViewInfos.size() > 0) {
            boolean result = false;
            ListAdapter adapter = getAdapter();
            if (adapter != null && ((HeaderViewGridAdapter) adapter).removeHeader(v)) {
                result = true;
            }
            removeFixedViewInfo(v, mHeaderViewInfos);
            return result;
        }
        return false;
    }
    private void removeFixedViewInfo(View v, ArrayList<FixedViewInfo> where) {
        int len = where.size();
        for (int i = 0; i < len; ++i) {
            FixedViewInfo info = where.get(i);
            if (info.view == v) {
                where.remove(i);
                break;
            }
        }
    }
    @Override
    public void setAdapter(ListAdapter adapter) {
        if (mHeaderViewInfos.size() > 0) {
            HeaderViewGridAdapter hadapter = new HeaderViewGridAdapter(mHeaderViewInfos, adapter);
            int numColumns = getNumColumns();
            if (numColumns > 1) {
                hadapter.setNumColumns(numColumns);
            }
            super.setAdapter(hadapter);
        } else {
            super.setAdapter(adapter);
        }
    }
    private class FullWidthFixedViewLayout extends FrameLayout {
        public FullWidthFixedViewLayout(Context context) {
            super(context);
        }
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int targetWidth = HeaderGridView.this.getMeasuredWidth()
                    - HeaderGridView.this.getPaddingLeft()
                    - HeaderGridView.this.getPaddingRight();
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(targetWidth,
                    MeasureSpec.getMode(widthMeasureSpec));
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
    /**
     * ListAdapter used when a HeaderGridView has header views. This ListAdapter
     * wraps another one and also keeps track of the header views and their
     * associated data objects.
     *<p>This is intended as a base class; you will probably not need to
     * use this class directly in your own code.
     */
    private static class HeaderViewGridAdapter implements WrapperListAdapter, Filterable {
        // This is used to notify the container of updates relating to number of columns
        // or headers changing, which changes the number of placeholders needed
        private final DataSetObservable mDataSetObservable = new DataSetObservable();
        private final ListAdapter mAdapter;
        private int mNumColumns = 1;
        // This ArrayList is assumed to NOT be null.
        ArrayList<FixedViewInfo> mHeaderViewInfos;
        boolean mAreAllFixedViewsSelectable;
        private final boolean mIsFilterable;
        public HeaderViewGridAdapter(ArrayList<FixedViewInfo> headerViewInfos, ListAdapter adapter) {
            mAdapter = adapter;
            mIsFilterable = adapter instanceof Filterable;
            if (headerViewInfos == null) {
                throw new IllegalArgumentException("headerViewInfos cannot be null");
            }
            mHeaderViewInfos = headerViewInfos;
            mAreAllFixedViewsSelectable = areAllListInfosSelectable(mHeaderViewInfos);
        }
        public int getHeadersCount() {
            return mHeaderViewInfos.size();
        }
        @Override
        public boolean isEmpty() {
            return (mAdapter == null || mAdapter.isEmpty()) && getHeadersCount() == 0;
        }
        public void setNumColumns(int numColumns) {
            if (numColumns < 1) {
                throw new IllegalArgumentException("Number of columns must be 1 or more");
            }
            if (mNumColumns != numColumns) {
                mNumColumns = numColumns;
                notifyDataSetChanged();
            }
        }
        private boolean areAllListInfosSelectable(ArrayList<FixedViewInfo> infos) {
            if (infos != null) {
                for (FixedViewInfo info : infos) {
                    if (!info.isSelectable) {
                        return false;
                    }
                }
            }
            return true;
        }
        public boolean removeHeader(View v) {
            for (int i = 0; i < mHeaderViewInfos.size(); i++) {
                FixedViewInfo info = mHeaderViewInfos.get(i);
                if (info.view == v) {
                    mHeaderViewInfos.remove(i);
                    mAreAllFixedViewsSelectable = areAllListInfosSelectable(mHeaderViewInfos);
                    mDataSetObservable.notifyChanged();
                    return true;
                }
            }
            return false;
        }
        @Override
        public int getCount() {
            if (mAdapter != null) {
                return getHeadersCount() * mNumColumns + mAdapter.getCount();
            } else {
                return getHeadersCount() * mNumColumns;
            }
        }
        @Override
        public boolean areAllItemsEnabled() {
            if (mAdapter != null) {
                return mAreAllFixedViewsSelectable && mAdapter.areAllItemsEnabled();
            } else {
                return true;
            }
        }
        @Override
        public boolean isEnabled(int position) {
            // Header (negative positions will throw an ArrayIndexOutOfBoundsException)
            int numHeadersAndPlaceholders = getHeadersCount() * mNumColumns;
            if (position < numHeadersAndPlaceholders) {
                return (position % mNumColumns == 0)
                        && mHeaderViewInfos.get(position / mNumColumns).isSelectable;
            }
            // Adapter
            final int adjPosition = position - numHeadersAndPlaceholders;
            int adapterCount = 0;
            if (mAdapter != null) {
                adapterCount = mAdapter.getCount();
                if (adjPosition < adapterCount) {
                    return mAdapter.isEnabled(adjPosition);
                }
            }
            throw new ArrayIndexOutOfBoundsException(position);
        }
        @Override
        public Object getItem(int position) {
            // Header (negative positions will throw an ArrayIndexOutOfBoundsException)
            int numHeadersAndPlaceholders = getHeadersCount() * mNumColumns;
            if (position < numHeadersAndPlaceholders) {
                if (position % mNumColumns == 0) {
                    return mHeaderViewInfos.get(position / mNumColumns).data;
                }
                return null;
            }
            // Adapter
            final int adjPosition = position - numHeadersAndPlaceholders;
            int adapterCount = 0;
            if (mAdapter != null) {
                adapterCount = mAdapter.getCount();
                if (adjPosition < adapterCount) {
                    return mAdapter.getItem(adjPosition);
                }
            }
            throw new ArrayIndexOutOfBoundsException(position);
        }
        @Override
        public long getItemId(int position) {
            int numHeadersAndPlaceholders = getHeadersCount() * mNumColumns;
            if (mAdapter != null && position >= numHeadersAndPlaceholders) {
                int adjPosition = position - numHeadersAndPlaceholders;
                int adapterCount = mAdapter.getCount();
                if (adjPosition < adapterCount) {
                    return mAdapter.getItemId(adjPosition);
                }
            }
            return -1;
        }
        @Override
        public boolean hasStableIds() {
            if (mAdapter != null) {
                return mAdapter.hasStableIds();
            }
            return false;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // Header (negative positions will throw an ArrayIndexOutOfBoundsException)
            int numHeadersAndPlaceholders = getHeadersCount() * mNumColumns ;
            if (position < numHeadersAndPlaceholders) {
                View headerViewContainer = mHeaderViewInfos
                        .get(position / mNumColumns).viewContainer;
                if (position % mNumColumns == 0) {
                    return headerViewContainer;
                } else {
                    if (convertView == null) {
                        convertView = new View(parent.getContext());
                    }
                    // We need to do this because GridView uses the height of the last item
                    // in a row to determine the height for the entire row.
                    convertView.setVisibility(View.INVISIBLE);
                    convertView.setMinimumHeight(headerViewContainer.getHeight());
                    return convertView;
                }
            }
            // Adapter
            final int adjPosition = position - numHeadersAndPlaceholders;
            int adapterCount = 0;
            if (mAdapter != null) {
                adapterCount = mAdapter.getCount();
                if (adjPosition < adapterCount) {
                    return mAdapter.getView(adjPosition, convertView, parent);
                }
            }
            throw new ArrayIndexOutOfBoundsException(position);
        }
        @Override
        public int getItemViewType(int position) {
            int numHeadersAndPlaceholders = getHeadersCount() * mNumColumns;
            if (position < numHeadersAndPlaceholders && (position % mNumColumns != 0)) {
                // Placeholders get the last view type number
                return mAdapter != null ? mAdapter.getViewTypeCount() : 1;
            }
            if (mAdapter != null && position >= numHeadersAndPlaceholders) {
                int adjPosition = position - numHeadersAndPlaceholders;
                int adapterCount = mAdapter.getCount();
                if (adjPosition < adapterCount) {
                    return mAdapter.getItemViewType(adjPosition);
                }
            }
            return AdapterView.ITEM_VIEW_TYPE_HEADER_OR_FOOTER;
        }
        @Override
        public int getViewTypeCount() {
            if (mAdapter != null) {
                return mAdapter.getViewTypeCount() + 1;
            }
            return 2;
        }
        @Override
        public void registerDataSetObserver(DataSetObserver observer) {
            mDataSetObservable.registerObserver(observer);
            if (mAdapter != null) {
                mAdapter.registerDataSetObserver(observer);
            }
        }
        @Override
        public void unregisterDataSetObserver(DataSetObserver observer) {
            mDataSetObservable.unregisterObserver(observer);
            if (mAdapter != null) {
                mAdapter.unregisterDataSetObserver(observer);
            }
        }
        @Override
        public Filter getFilter() {
            if (mIsFilterable) {
                return ((Filterable) mAdapter).getFilter();
            }
            return null;
        }
        @Override
        public ListAdapter getWrappedAdapter() {
            return mAdapter;
        }
        public void notifyDataSetChanged() {
            mDataSetObservable.notifyChanged();
        }
    }
}

【讨论】:

  • 如果您愿意,请点击以下链接:android.googlesource.com/platform/packages/apps/Gallery2/+/…
  • 这段代码比其他代码运行得更好,但在我的情况下,它只显示一半的标题视图,另一半不在屏幕上,有什么问题?
  • @MohamadGhafourian 那是因为您在 GridView 上设置了重力输入。删除重力规范。
  • 这个类非常有用。请注意,它不能很好地处理项目点击侦听器:您必须自己忽略标题计数。
  • 谢谢,上面的代码工作正常,只需从 gridview 中移除重力并将 central_horizo​​ntal 放在 headerview 中。一切正常。
【解决方案2】:

我用了github上的Stickygridheaders,很漂亮也很简单,试试吧。

【讨论】:

  • 是的,这似乎是一个不错的图书馆。这是github链接顺便说一句:github.com/TonicArtos/StickyGridHeaders
  • 你好android开发者,我提到这个链接AFAIK!
  • 我已经测试了这个库,但它仍然存在一些问题。
  • 我建议不要使用stickygridheaders,性能很糟糕。编辑:我说的是 1.0.1 版本,未来的更新可能会使其可用
【解决方案3】:

在这种情况下,我会选择扩展 GridView,因为这似乎是最简单的。如果您决定扩展 ListView 或 ScrollView,则必须先实现所有 GridView 功能,这对您的情况来说是不必要的。

【讨论】:

  • 我没有得到任何关于如何扩展 GridView 的指示,所以我想我将只使用一个 ListView 并在每行中放置 X 个项目以使其看起来像一个网格。有意义吗?
【解决方案4】:

在自己实现之后,我可以说最简单的方法是制作一个处理列的Adapter,并使用带有默认标题的ListView

我在这里发布了带有示例的代码:https://github.com/plattysoft/grid-with-header-list-adapter/

【讨论】:

    【解决方案5】:

    您必须在调用之前添加页眉/页脚视图 setAdapter(new Your_Adapter);

      Try below code:
    
    
    
      LayoutInflater layoutInflater = LayoutInflater.from(getActivity());
      View footerView = layoutInflater.inflate(R.layout.grid_view_footer, null);
      myListViewOrGridView.addFooterView(footerView);
      YourAdapter mAdapter = new YourAdapter(getActivity(), Your_Argument_Here);
      myListViewOrGridView.setAdapter(mAdapter);
    

    【讨论】:

    • 我没有听说过任何名为addFooterView()的方法,请详细回答。
    • @Ramswaroop 你能检查一下自定义gridview的toobsco42答案吗?它有方法myListViewOrGridView.addFooterView(footerView);谢谢。
    【解决方案6】:

    我知道这已经很老了,但是如果有人在使用自定义 GridView 类之一时遇到了在屏幕底部显示白色容器的错误:

    将 GridView 上方的布局高度设置为 match_parent 而不是 wrap_content

    【讨论】:

      【解决方案7】:

      您可以在布局文件中的 GridView 正上方添加标题视图。喜欢:

      <LinearLayout>
      ...
          <LinearLayout
              android:id="@+id/header" />
          <com.sample.MyGridView />
      ...
      </LinearLayout>
      

      然后生成标题视图并将其添加到带有 id header

      的 LinearLayout
      View header = inflater.inflate(R.layout.head_view, null);
      LinearLayout headerContainer = (LinearLayout) findViewById(R.id.header);
      headerContainer.addView(header);
      

      【讨论】:

      • @vasart 没有。如果你希望它与 GridView 一起滚动,你必须重写 onActionMove 来实现它。
      【解决方案8】:

      可以使用 ListView 内部使用的 HeaderViewListAdapter。它的限制是您必须具有与列相同数量的标题,并且标题不能跨越列(尽管您可以使用外观让它们看起来)。

      从好的方面来说,包装现有适配器并添加一些额外的标题单元格非常容易,您无需编写任何新代码。

      【讨论】:

        【解决方案9】:

        我找到了另一个允许在 gridView 上添加标题的库。

        导入它我有点烦人,它有许多不需要的资源,但它工作正常:AStickyHeader

        编辑:在标题上放置可点击视图似乎具有非常令人讨厌的灵活性。

        我认为最好的方法是从 GridView 扩展或以不同的方式实现它(如 here 所示,但它仅支持 gridView 顶部的单个标题)或使用带有线性布局的 listView 作为行。

        【讨论】:

          【解决方案10】:

          我在 c# 中的代码如下所示

          ((HeaderViewGridAdapter)Adapter).NumColumns = NumColumnsCompatible;
          
          private int NumColumnsCompatible
              {
                  get
                  {
                      if (Build.VERSION.SdkInt >= BuildVersionCodes.Honeycomb)
                      {
                          return base.NumColumns;
                      }
                      else
                      {
                          try
                          {
                              Field numColumns = this.Class.GetDeclaredField("numColumns");
                              numColumns.Accessible = true;
          
                              return numColumns.GetInt(this);
                          }
                          catch (Exception e)
                          {
                              if (numColumns != -1)
                              {
                                  return numColumns;
                              }
                              throw new Exception("Can not determine the NumColumns for this API platform, please call setNumColumns to set it.");
                          }
                      }
                  }
              }
          

          【讨论】:

            【解决方案11】:

            我认为这可以通过制作自己的布局来实现:

            <ScrollView>
              <LinearLayout android:id="@+id/container">
                <com.project.MyGridView/>
              </LinearLayout>
            </ScrollView>
            

            要添加标题使用类似的东西:

            container.addView(header, 0);
            

            最后你必须扩展 GridView 的高度:

            Class MyGridView extends GridView {
                ....
                @Override
                protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {
                    super.onMeasure(widthMeasureSpec, MeasureSpec.UNSPECIFIED);
                }
                ....
            }
            

            【讨论】:

            • ScrollView 只能有一个孩子。在这个例子中,它有两个,它不会工作。
            • 永远不要将可滚动视图放入另一个具有相同滚动方向的可滚动视图中。这是一种不好的做法,也是一种糟糕的用户体验。这里的另一个不好的做法;当您扩展 GridView 高度时,您会强制系统呈现 GridView 中的所有项目,这可能会导致内存问题。
            猜你喜欢
            • 1970-01-01
            • 2013-07-30
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-04-21
            • 2011-05-22
            • 2013-03-23
            相关资源
            最近更新 更多