android - 将两列 gridview 跨越三列

Question

我希望有人能帮助我，我有一个网格布局，由一个包含 8 个项目的适配器填充。网格中有三列，这让我有两行，三列完整，还有两行，最后有一个空隙。我已附上图片以详细说明我要实现的目标。我希望能够拉伸(stretch)最后一行行列以填充 gridview 的宽度。这是由适配器填充的。

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

这是我希望的样子。 所以我想将两个单元格跨三列。

下面是我目前实现的代码

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;
    }

}

这是我的 fragment 布局的代码，包括 gridview

<?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 及更高版本开发。

谢谢!

Answer 1

您可以使用 RecyclerView 和 GridLayoutManager 来完成这项工作:

    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