跨越三列gridview的两列答案

【问题标题】：Span two columns of gridview over three跨越三列gridview的两列
【发布时间】：2013-12-18 10:04:53
【问题描述】：

我希望有人可以帮助我，我有一个由 8 个项目的适配器填充的网格布局。网格中有三列，这让我有两行和三个完整的列，然后是两行，最后有一个空白。我附上了图片来详细说明我想要实现的目标。我希望能够拉伸最后一行行列以填充 gridview 的宽度。这是由适配器填充的。

下面是应用程序现在的样子，我有 8 个单元格中的内容，没有第 9 个单元格，以防与我的图像混淆。

这是我想要的样子。所以我想将这两个单元格拉伸成三列。

下面是我迄今为止实现的代码

public class channels_fragment extends Fragment {

    private View view;
    private GridView channelsGridView;
    protected Handler handler;
    //protected GridAdapter gridAdapter;
    private Main_Activity main;
    private final ChannelsModel model = new ChannelsModel();

    static final String[] channelTitles = new String[]{"test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"};


    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        main = (Main_Activity) this.getActivity();
        view = inflater.inflate(R.layout.channels_fragment_layout, null);

        channelsGridView = (GridView)view.findViewById(R.id.channelsGrid);

        channelsGridView.setAdapter(new ImageAdapter(this.getActivity(), channelTitles));
        channelsGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

            }
        });


        return view;
    }


    public static int convertDpToPixels(float dp, Context context){
        Resources resources = context.getResources();
        return (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                dp,
                resources.getDisplayMetrics()
        );
    }

class ImageAdapter extends BaseAdapter{

    private Context context;
    private final String[] channelTitles;

    public ImageAdapter(Context context, String[] channelTitles){
        this.context = context;
        this.channelTitles = channelTitles;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View gridView;

        if (convertView == null) {

            gridView = new View(context);

            // get layout from mobile.xml
            gridView = inflater.inflate(R.layout.grid_item_layout, null);

            // set value into textview
            TextView textView = (TextView) gridView
                    .findViewById(R.id.grid_item_text);
            textView.setText(channelTitles[position]);

            // set image based on selected text
            ImageView imageView = (ImageView) gridView
                    .findViewById(R.id.grid_item_image);

            ImageView iv = (ImageView) gridView.findViewById(R.id.ver_border_dark);

            String channelTitle = channelTitles[position];

            if (position == 6 ){

                gridView.setBackgroundResource(R.drawable.background_bottom_dark);
                textView.setTextColor(Color.WHITE);

            }
            if (position ==7)

            {
                gridView.setBackgroundResource(R.drawable.background_bottom_dark);
                textView.setTextColor(Color.WHITE);
                iv.setVisibility(View.VISIBLE);
                iv.setImageResource(R.drawable.grid_line_ondark_vert);
            }

            if (channelTitle.equals("test1")) {
                imageView.setImageResource(R.drawable.icon_events);
            } else if (channelTitle.equals("test2?")) {
                imageView.setImageResource(R.drawable.icon_whats_nearby);
            } else if (channelTitle.equals("test3")) {
                imageView.setImageResource(R.drawable.icon_top_tips);
            } else if (channelTitle.equals("test4")) {
            imageView.setImageResource(R.drawable.icon_plan_my_trip);
            } else if (channelTitle.equals("test5")) {
                imageView.setImageResource(R.drawable.icon_special_offers);
            } else if (channelTitle.equals("test6")) {
                imageView.setImageResource(R.drawable.icon_explore_more);
            } else if (channelTitle.equals("test7")) {
                imageView.setImageResource(R.drawable.icon_city_plus);
            } else if (channelTitle.equals("test8")) {

                imageView.setImageResource(R.drawable.icon_audio_guides);
            }

        } else {
            gridView = (View) convertView;
        }

        return gridView;
    }

    @Override
    public int getCount() {
        return channelTitles.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

}

这是我的片段布局的代码，包括网格视图

<?xml version="1.0" encoding="utf-8"?>
<Relative xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id = "@+id/dub_photo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/photo"/>

    <GridView
        android:id="@+id/channelsGrid"
        android:background="@drawable/light_background"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="100dp"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:stretchMode="columnWidth"
        android:layout_below="@+id/dub_photo">
    </GridView>
</RelativeLayout>

最后是我的网格项目的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/gridItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:padding="10dp">

        <ImageView
            android:id ="@+id/grid_item_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true" />

        <TextView
            android:textColor="#000000"
            android:id = "@+id/grid_item_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12dp"
            android:layout_centerHorizontal="true"
            android:layout_below="@+id/grid_item_image"
            android:layout_marginTop="10dp" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/horizontal_border"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/gridItem">

        <ImageView
            android:id = "@+id/hor_border"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/grid_line_horizontal"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_alignStart="@id/horizontal_border"
        android:layout_height="wrap_content"
        android:layout_above="@+id/horizontal_border">

        <ImageView
            android:id = "@+id/ver_border"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/grid_line_vertical"/>

        <ImageView
            android:id = "@+id/ver_border_dark"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/grid_line_ondark_vert"
            android:visibility="gone"/>
    </RelativeLayout>
</RelativeLayout>

如果有人能帮我解决这个问题，我将不胜感激。我研究了论坛，并遇到了使用 gridlayout 的建议，api 14 及更高版本支持，但我正在为 api 9 及更高版本开发。

谢谢！

【问题讨论】：

Android - GridView : Specify Column Span 的可能重复项
不是重复的，怎么是重复的？我在问一个特定的问题，我正在提供我的来源..我也看过，在那个答案中除了说表格布局提供跨越之外没有任何帮助
用相同的基础提出一个新问题不会让它变得不同吗？如果使用 GridView 不可能，那么您可能不会尝试使用 Gridview ！
这是不同的，因为我不能使用表格布局，我正在解析 xml，并使用适配器来填充我的网格。我不知道是否可以用gridview来做，这就是为什么我问这个问题希望有人能提供一些有用的信息......我已经通过堆栈溢出，我已经查找了相关问题，我找到的答案没有用。所以我需要问我的问题。无论如何感谢您的帮助
@DJ-DOO 好运吗？请分享

标签： android gridview

【解决方案1】：

您可以使用带有 GridLayoutManager 的 RecyclerView 来完成这项工作：

    final int columns = 12;
    GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(), columns);
    gridLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
    gridLayoutManager.setSpanSizeLookup(
            new GridLayoutManager.SpanSizeLookup() {
                @Override
                public int getSpanSize(int position) {
                    IItem adapterItem = mAdapter.getItem(position);
                    if (adapterItem instanceof DefaultItem) {
                        return columns/3;
                    }
                    if (adapterItem instanceof BiggerItem) {
                        return columns / 2;
                    }
                    if (adapterItem instanceof FullWidthItem) {
                        return columns;
                    }
                    return 1;
                }
            });

    mRecyclerView.setLayoutManager(gridLayoutManager);

PS：我使用 FastAdapter 库为 RecyclerView 创建项目，我强烈推荐：https://github.com/mikepenz/FastAdapter

【讨论】：