Question

我尝试实现这样的目标：

enter image description here

到目前为止我的代码是：

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <Button
            android:id="@+id/btemail"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="45dp"
            android:layout_marginLeft="34dp"
            android:drawableTop="@drawable/mail"
            android:text="E-mail"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <Button
            android:id="@+id/btcharts"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_above="@+id/btemail"
            android:layout_alignLeft="@+id/btemail"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/chart"
            android:drawablePadding="-35dp"
            android:text="Charts"
            android:textAppearance="?android:attr/textAppearanceSmall"  />

        <Button
            android:id="@+id/bthistory"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_alignBaseline="@+id/btemail"
            android:layout_alignBottom="@+id/btemail"
            android:layout_toRightOf="@+id/btemail"
            android:drawableTop="@drawable/list"
            android:text="History"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <Button
            android:id="@+id/btimport"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:layout_alignLeft="@+id/bthistory"
            android:layout_alignTop="@+id/btcharts"
            android:drawableTop="@drawable/add"
            android:text="New Measurement"
            android:textAppearance="?android:attr/textAppearanceSmall" />

    </RelativeLayout>

我的观点是：

enter image description here

这可以仅使用相对视图完成，还是应该使用gridview？

如果我设置android：layout_height =“130dp”，但不同屏幕的图标大小不同“50x50 66x66 98x98 130x130”。对于不同的屏幕会有问题吗？有没有办法动态实现它？

如何将图标中心放置在图表按钮的垂直和水平位置????因为现在距离中心有一点点了..

Answer 1

我建议您使用 RelativeLayout 将文字和背景以及按钮添加到 TableLayout 或 GridLayout < / strong>（具有适当的边距）将嵌套在其父级中 - RelativeLayout 。

Answer 2

dp或dip指标是密度为160或mdpi的像素数，因此您将布局文件夹中的大小设置为mdpi中的像素，并将其他大小缩放为下表：

xhdpi：2.0
hdpi：1.5
mdpi：1.0（基线）
ldpi：0.75

有关详细信息，请参阅this和this

编辑：我认为进行此布局的最佳方法是将所有按钮设置为线性布局，并将相对布局设置为root，并通过重力或类似方式对齐线性布局。

我的例子：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="42dp"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/btcharts"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:drawablePadding="-35dp"
            android:drawableTop="@drawable/chart"
            android:text="Charts"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <Button
            android:id="@+id/btimport"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:drawableTop="@drawable/add"
            android:text="New Measurement"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" >

        <Button
            android:id="@+id/btemail"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:drawableTop="@drawable/mail"
            android:text="E-mail"
            android:textAppearance="?android:attr/textAppearanceSmall" />

        <Button
            android:id="@+id/bthistory"
            android:layout_width="130dp"
            android:layout_height="130dp"
            android:drawableTop="@drawable/list"
            android:text="History"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </LinearLayout>
</LinearLayout>

我不知道它是全部对齐的，因为我没有你的drawables，但我可以认为你可以从这里改进，你的“图表”按钮也是不同的，因为它有一个透明的背景。

如何制作此布局（带文字和图标的按钮）

2 个答案: