Android中的相对布局

Question

以下是我期待

的布局

工具栏将始终位于屏幕底部。 工具栏有5个按钮，其中4个按钮的高度和宽度相同，其中一个按钮位于中间，略大于另一个按钮（请参阅下面的参考图片）。

到目前为止，我已经提出了这个代码：

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >    
        <RelativeLayout
            android:id="@+id/bottomMenuLeft"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/bg_gradation">
            <ImageButton
                android:id="@+id/bottomChat"
                android:layout_width="70dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dip"
                android:src="@drawable/chat_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomMarket"
                android:layout_width="80dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:layout_toRightOf="@id/bottomChat"
                android:src="@drawable/market_bottom_ic" />
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/bottomMenuCenter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/bg_gradation"
            android:layout_toRightOf="@id/bottomMenuLeft">
            <ImageButton
                android:id="@+id/bottomFinger"
                android:layout_width="95dp"
                android:layout_height="105dp"
                android:scaleX="1.50"
                android:scaleY="1.50"
                android:padding="0dip"
                android:src="@drawable/fingerprint_ic"/>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/bottomMenuRight"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/bg_gradation"
            android:layout_toRightOf="@id/bottomMenuCenter">
            <ImageButton
                android:id="@+id/bottomCommunity"
                android:layout_width="70dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dip"
                android:src="@drawable/community_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomEvent"
                android:layout_width="70dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:layout_toRightOf="@id/bottomCommunity"
                android:src="@drawable/favorite_bottom_ic" />
        </RelativeLayout>
</RelativeLayout>

<!-- android:layout_gravity="start" tells DrawerLayout to treat
     this as a sliding drawer on the left side for left-to-right
     languages and on the right side for right-to-left languages.
     The drawer is given a fixed width in dp and extends the full height of
     the container. A solid background is used for contrast
     with the content view. -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

但是，这是最终的布局：

当我在模拟器（nexus 4）上运行此布局时，按钮正确对齐。但是，当我使用不同的设备测试时，布局会发生变化。

有人可以帮我吗？

编辑＃1

这是我到目前为止所得到的......一切都在顶部对齐。我试图对此进行修改（试图将其对齐在底部）：

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">

    <LinearLayout
    android:id="@+id/bottomMenu"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/bg_gradation"
    android:weightSum="1" >
        <ImageButton
        android:id="@+id/bottomFinger"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".2"
        android:src="@drawable/chat_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomChat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/market_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomMarket"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/fingerprint_ic" />

        <ImageButton
            android:id="@+id/bottomCommunity"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/community_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomEvent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/favorite_bottom_ic" />
    </LinearLayout>
</RelativeLayout>

编辑2

所以我最终在我的XML中使用了这段代码：

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
    <LinearLayout
    android:id="@+id/bottomMenu"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center|bottom"
    android:layout_alignParentBottom="true"
    android:background="@drawable/bg_gradation"
    android:weightSum="1" >
        <ImageButton
        android:id="@+id/bottomFinger"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".2"
        android:src="@drawable/chat_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomChat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/market_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomMarket"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/fingerprint_ic" />

        <ImageButton
            android:id="@+id/bottomCommunity"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/community_bottom_ic" />

        <ImageButton
            android:id="@+id/bottomEvent"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".2"
            android:src="@drawable/favorite_bottom_ic" />
    </LinearLayout>
</RelativeLayout>

<!-- android:layout_gravity="start" tells DrawerLayout to treat
     this as a sliding drawer on the left side for left-to-right
     languages and on the right side for right-to-left languages.
     The drawer is given a fixed width in dp and extends the full height of
     the container. A solid background is used for contrast
     with the content view. -->
<ListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

我最接近参考的是哪一个。我必须使用RelativeLayout包装整个LinearLayout以确保我的工具栏保持在底部。然而，这仍然没有完全回答这个问题，因为我正在尝试实现参考文献中所见的布局。

Answer 1

这可以通过两种情况来处理

  

A）创建水平线性布局并且没有图像按钮，不向'图像按钮'添加'width'属性添加'android：layout_weight =“0.2”'属性，其中假设0.2指定为20％如果我们考虑完整的线性布局100％的布局。   i）关注网址： Linear Layout and weight in Android

     

B）根据屏幕尺寸创建一个单独的图像，并存储在res文件夹中的分离的Drawable文件夹中，根据安装它的移动设备的屏幕尺寸，从中获取图像。

     

希望这会对你有所帮助。

Answer 2

试试这个：

<LinearLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" android:weightSum="6">    

            <ImageButton
                android:id="@+id/bottomChat"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dp"
                android:layout_weight="1"
                android:src="@drawable/chat_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomMarket"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:layout_weight="1"
                android:src="@drawable/market_bottom_ic" />


            <ImageButton
                android:id="@+id/bottomFinger"
                android:layout_width="0dp"
                android:layout_height="105dp"
                android:scaleX="1.50"
                android:scaleY="1.50"
                android:padding="0dip"
            android:layout_weight="2"
                android:src="@drawable/fingerprint_ic"/>


            <ImageButton
                android:id="@+id/bottomCommunity"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:scaleX="1.16"
                android:scaleY="1.16"
                android:padding="0dip"
                android:layout_weight="1"
                android:src="@drawable/community_bottom_ic"/>

            <ImageButton
                android:id="@+id/bottomEvent"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:padding="0dip"
                android:scaleX="1.16"
                android:layout_weight="1"
                android:scaleY="1.16"
                android:src="@drawable/favorite_bottom_ic" />

</LinearLayout>

Answer 3

试试我的代码：

<LinearLayout
    android:id="@+id/bottomMenuRight"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:weightSum="1" >

    <ImageButton
        android:id="@+id/bottomFinger"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomChat"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomMarket"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomCommunity"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />

    <ImageButton
        android:id="@+id/bottomEvent"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight=".2"
        android:src="@drawable/ic_circle" />
</LinearLayout>

Answer 4

首先放置中间按钮，然后在按钮的左右两侧给予相同的重量。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/bottomMenuRight"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >

<ImageButton
    android:id="@+id/bottomFinger"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:src="@drawable/icon" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toLeftOf="@+id/bottomFinger" >

    <ImageButton
        android:id="@+id/bottomChat"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />

    <ImageButton
        android:id="@+id/bottomMarket"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/bottomFinger" >

    <ImageButton
        android:id="@+id/bottomCommunity"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />

    <ImageButton
        android:id="@+id/bottomEvent"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:src="@drawable/icon" />
</LinearLayout>

</RelativeLayout>

Answer 5

广泛使用RelativeLayout会导致性能下降。对于按钮，使用具有“水平”方向和“权重”属性的LinearLayout。正确地为按钮分配重量，以便您可以根据需要获得按钮的宽度。要正确使用“weight”属性，请查看“width”应为0。

编辑：不要使用硬编码宽度android：layout_width =“150dp”。而是使它成为match_parent。