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

时间:2019-04-25 18:45:48

标签: android

我正在开发具有十二张卡,三行由四张卡组成的存储卡游戏。 为此,布局由三个线性布局组成,每个线性布局包含四个textview。

如何使用网格布局以另一种方式进行操作?

这是我用于创建卡片行的布局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>

2 个答案:

答案 0 :(得分:2)

<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

答案 1 :(得分:2)

您可以在这种情况下使用GridView。我在这里放置了非常简化的代码,因此您可以使用它们并根据需要进行更改。这个GridView只有12个ImageView。

  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;
    }
}
  1. 将GridView添加到您的活动布局:

activity_test.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>
  1. 在活动中使用以下代码:

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

和结果:

the result image

祝你好运!