如何在纸牌游戏中使用网格布局

Question

我正在开发一个内存卡游戏，它有十二张卡，三行由四张卡组成。为此，布局由三个线性布局组成，每个布局包含四个文本视图。

我如何用另一种方式使用网格布局？

这是我创建卡片行的布局xml：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="4">

    <ImageView
        android:id="@+id/iv_a"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="centerInside"
        android:src="@drawable/card" />

    <ImageView
        android:id="@+id/iv_b"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="centerInside"
        android:src="@drawable/card" />

    <ImageView
        android:id="@+id/iv_c"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="centerInside"
        android:src="@drawable/card" />

    <ImageView
        android:id="@+id/iv_d"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:scaleType="centerInside"
        android:src="@drawable/card" />

</LinearLayout>

Answer 1

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:rowCount="3" >

    <ImageView
        android:id="@+id/iv_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/card" />

    <ImageView
        android:id="@+id/iv_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/card" />

    .
    .
    .

</ GridLayout>

阅读：https://medium.com/google-developer-experts/android-grid-layout-1faf0df8d6f2

Answer 2

在这种情况下，您可以使用GridView。我把我非常简化的代码放在这里，所以您可以使用它们并根据需要更改它们。这个GridView只有12个图像视图。

1. 为GridView创建适配器类：

MyGridViewAdapter。JAVA

public class MyGridViewAdapter extends BaseAdapter {

    private Context context;
    private List<Integer> drawables;


    MyGridViewAdapter(Context context) {
        this.context = context;
    }

    void setDrawables(List<Integer> drawables)
    {
        this.drawables = drawables;
    }

    public int getCount() {
        return drawables.size();
    }

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

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

    // create new ImageViews for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {

        // main layout of each item of gridView:
        RelativeLayout relativeLayout=new RelativeLayout(context);
        relativeLayout.setLayoutParams(new GridView.LayoutParams((int)dpToPx(context, 100),
                (int)dpToPx(context, 100)));

        // images:
        ImageView imageView = new ImageView(context);
        imageView.setImageResource(R.drawable.ic_launcher_background);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
                RelativeLayout.LayoutParams.MATCH_PARENT));
        relativeLayout.addView(imageView);

        return relativeLayout;
    }

    private float dpToPx(Context context, float dp) {
        return dp * context.getResources().getDisplayMetrics().density;
    }
}

活动测试。xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TestActivity"
    android:orientation="vertical">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/gridView"
        android:numColumns="auto_fit"
        android:gravity="center"
        android:columnWidth="100dp"
        android:stretchMode="columnWidth"
        android:choiceMode="singleChoice"
        android:drawSelectorOnTop="true"
        android:focusable="true"
        android:clickable="true"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        android:layout_margin="10dp"/>

</LinearLayout>

TestActivity.java

public class TestActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);

        // list of 12 images:
        List<Integer> drawables=new ArrayList<>();
        for(int i=0; i<12; i++)
        {
            drawables.add(R.drawable.ic_launcher_background);
        }

        // gridView adapter:
        MyGridViewAdapter adapter = new MyGridViewAdapter(this);
        adapter.setDrawables(drawables);

        // gridView:
        GridView gridView = findViewById(R.id.gridView);
        gridView.setAdapter(adapter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                // what happen when you click on each item
            }
        });
    }
}

结果是：

祝你好运