Question

我在res/drawable目录中创建的图片包含适当的hdpi，mdpi，xhdpi和xxhdpi张号，我想使用它们而不是常规按钮。我已经完成了那部分，但我需要一些布局和格式的帮助。我先写下我的问题，然后我会在下面发布代码和两个截图。任何建议表示赞赏。谢谢！

有关我的设备和图片的详细信息：

Nexus 5正在运行Lollipop。

hdpi A，B，C，D是96x96。 E是72x72

mdpi A，B，C，D是64x64。 E是48x48。

xhdpi A，B，C，D是128x128。 E是96x96。

xxhdpi A，B，C，D是192x192。 E是144x144。

问题：

1）为什么最后一行的按钮E水平拉伸？按钮E是一个圆形边缘的正方形，就像所有其他正方形一样，但它按比例缩小。它为什么伸展，我该如何解决？

2）如何根据屏幕尺寸动态调整可绘制的空间之间的空间以保持比例相同？（见下图2）

fragment_main.xml :(见下图1，了解其外观）

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragmentMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TableLayout
        android:id="@+id/fragmentMainTableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <TableRow
           android:gravity="center_horizontal"
            android:layout_weight="0">

            <Button
                android:id="@+id/buttonA"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/a_selector"/>

            <Button
                android:id="@+id/buttonB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/b_selector"/>

        </TableRow>

        <TableRow
            android:gravity="center_horizontal"
            android:layout_weight="0">

            <Button
                android:id="@+id/buttonC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/c_selector"/>

            <Button
                android:id="@+id/buttonD"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/d_selector"/>

        </TableRow>

        <TableRow
            android:gravity="center|bottom"
            android:layout_weight="0">

            <Button
                android:id="@+id/buttonE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/e_selector"/>

        </TableRow>

    </TableLayout>

</LinearLayout>

图片1，当前布局：

Current layout

图片2，所需的布局（但按钮E的形状正确）：

Desired layout

Answer 1

要使E形状正确，请尝试

<TableRow
        android:gravity="center"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

对于图像之间的间距，请尝试使用margin属性。下面是间距为的完整代码：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragmentMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">

<TableLayout
    android:id="@+id/fragmentMainTableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
        android:layout_weight=".5"
    android:gravity="bottom">

    <TableRow
       android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonA"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

        <Button
            android:id="@+id/buttonB"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

    <TableRow
        android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonC"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

        <Button
            android:id="@+id/buttonD"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

</TableLayout>
<TableLayout
    android:id="@+id/fragmentMainTableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
        android:layout_weight="0.5"
    android:gravity="center">
    <TableRow
        android:gravity="center"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonE"
            android:layout_margin="15dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/abc_ab_share_pack_holo_dark"/>

    </TableRow>

</TableLayout>

</LinearLayout>

替换图像名称

Answer 2

试试这个。希望它有助于你...

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragmentMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TableLayout
        android:id="@+id/fragmentMainTableLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" >

        <TableRow
            android:layout_weight="1"
            android:gravity="center|bottom"
            android:weightSum="4" >

            <Button
                android:id="@+id/buttonA"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />

            <Button
                android:id="@+id/buttonB"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />
        </TableRow>

        <TableRow
            android:layout_weight="0"
            android:gravity="center_horizontal"
            android:weightSum="4" >

            <Button
                android:id="@+id/buttonC"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />

            <Button
                android:id="@+id/buttonD"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@drawable/ic_launcher" />
        </TableRow>

        <TableRow
            android:layout_weight="1"
            android:gravity="center" >

            <Button
                android:id="@+id/buttonE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:background="@drawable/ic_launcher" />
        </TableRow>
    </TableLayout>

</LinearLayout>

像这样转换你的图片。

enter image description here

Answer 3

使用下面的布局检查，我没有太大变化，但是当我根据您的需要进行测试时。

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragmentMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TableLayout
        android:id="@+id/fragmentMainTableLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <Button
                android:id="@+id/buttonA"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/a_selector" />

            <Button
                android:id="@+id/buttonB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/b_selector" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <Button
                android:id="@+id/buttonC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/c_selector" />

            <Button
                android:id="@+id/buttonD"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/d_selector" />
        </TableRow>

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:gravity="center_horizontal">

            <Button
                android:id="@+id/buttonE"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/e_selector" />
        </TableRow>
    </TableLayout>

</LinearLayout>

Answer 4

试试这个

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"

>
<TableLayout 
    android:id="@+id/fragmentMainTableLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TableRow
        android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/a_selector"/>

        <Button
            android:id="@+id/buttonB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/b_selector"/>

    </TableRow>

    <TableRow
        android:gravity="center_horizontal"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonC"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/c_selector"/>

        <Button
            android:id="@+id/buttonD"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/d_selector"/>

    </TableRow>

    <TableRow
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:layout_weight="0">

        <Button
            android:id="@+id/buttonE"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/e_selector"/>

    </TableRow>

   </TableLayout>
  </LinearLayout>

使用自定义图像作为按钮排列布局

4 个答案: