独立于设备分辨率的按钮网格

Question

I want to create a grid of Buttons in my android app. The problem is, when I test this on low resolution devices, some Buttons are displayed off the screen. How can I fix that?

This is the layout I am using:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal">

    <Button
        android:text=""
        android:id="@+id/b0"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b1"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b2"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b3"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b4"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b5"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b6"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b7"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b8"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b9"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b10"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b11"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b12"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b13"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b14"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <Button
        android:text=""
        android:id="@+id/b15"
        android:padding="20dp"
        android:layout_margin="10dp" />

    <TextView
        android:id="@+id/text1"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="30sp"
        android:text="  Taget:-" />

    <TextView
        android:id="@+id/tar"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="30sp"
        android:text="" />

    <TextView
        android:id="@+id/text2"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="30sp"
        android:text="  Current:-" />

    <TextView
        android:id="@+id/cur"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="30sp"
        android:text="" />

    <TextView
        android:id="@+id/text3"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="20sp"
        android:text="  TimeLeft:-" />

    <TextView
        android:id="@+id/tim"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:textSize="20sp"
        android:text="" />


</GridLayout>

Answer 1

When using a GridLayout you need to specify where exactly you want the Views to be positioned and how big they are supposed to be. Try something like this:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="0"
        android:layout_columnSpan="2"
        android:layout_rowSpan="2" />

    ...

</GridLayout>

To define how many rows and columns there are use these two attributes on the GridLayout:

• android:columnCount
• android:rowCount

You can define the position of a View inside the GridLayout with these two attributes:

• android:layout_column
• android:layout_row

And you can define how many rows or columns a View spans with these two attributes:

• android:layout_rowSpan
• android:layout_columnSpan

Please note that the GridLayout was only added with API level 14! If you want to use the GridLayout in earlier versions you need to use the GridLayout from the support library:

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    ...    

</android.support.v7.widget.GridLayout>

---

Also note that you ARE NOT supposed to hardcode a fixed size for each Button . Set height and width to wrap_content , the GridLayout will take care of setting the size of the Buttons .

You can decrease the amount of columns you display by using a resource selector:

For example define this in res/values/dimens.xml so smaller devices use only two columns:

<dimen name="column_count">2</dimen>

And in res/values-w350dp/dimens.xml you define the same dimen resource with a bigger value:

<dimen name="column_count">3</dimen>

The w350dp means that all device which have a width bigger than 350dp use 3 columns instead of the default 2.

To make this work you of course need to set this dimen resource as the columnCount on your GridLayout :

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="@dimen/column_count"
    android:rowCount="2"
    android:orientation="horizontal">

    ...

</GridLayout>

Answer 2

First and foremost, the Android developer's page on supporting multiple screens is a pretty comprehensive guide on this subject.

In short, you're on the right track using dp instead of straight pixels, as Android will scale most things on its own pretty well. However, this system is not always perfect in practice. One way to get around this is to create different layouts for different screen sizes.

By default, Android resizes your application layout to fit the current device screen. In most cases, this works fine. In other cases, your UI might not look as good and might need adjustments for different screen sizes. For example, on a larger screen, you might want to adjust the position and size of some elements to take advantage of the additional screen space, or on a smaller screen, you might need to adjust sizes so that everything can fit on the screen.

The configuration qualifiers you can use to provide size-specific resources are small, normal, large, and xlarge. For example, layouts for an extra large screen should go in layout-xlarge/.

For example, you could use a similar layout with only 3 columns instead of 4 for small-medium screens (if that would work with your game), or make the size of each button smaller.

Additionally, you could declare in your application that small screen sizes are not supported. This is pretty universally frowned upon if you can avoid it, since it does exclude some users from your app.