堆栈内存溢出
  简体   繁体   English

Android中的相对布局

[英]Relative Layout in Android

 原文  2013-12-31 04:52:14  1   5    android/ xml/ android-layout/ relativelayout

问题描述

Below is the layout i am expecting 以下是我期望的布局 预期的布局

The toolbar will always be placed at the bottom of the screen. 工具栏将始终放置在屏幕底部。 The toolbar has 5 buttons, where 4 of them have the same height and width and one of the button would sit in the middle and slightly bigger than the other (please see the reference image below). 工具栏上有5个按钮，其中4个具有相同的高度和宽度，其中一个按钮位于中间，稍大于另一个（请参见下面的参考图）。

So far i've come up with this code: 到目前为止，我已经提出了以下代码： 

<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"/>

However, this is the resulting layout: 但是，这是结果布局：

日食的最终布局

When i run this layout on emulator (nexus 4) the buttons are aligning correctly. 当我在模拟器（关系4）上运行此布局时，按钮正确对齐。 However, when i test it using different devices the layout would changes. 但是，当我使用不同的设备对其进行测试时，布局将发生变化。

Could anyone help me with this? 有人可以帮我吗？

EDIT #1 编辑＃1

This is what i got so far... Everything is align at the top. 这就是我到目前为止所得到的...一切都在顶部对齐。 I've tried to make modification to this (in an attempt to align it at the bottom): 我试图对此进行修改（以使其在底部对齐）： 

<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>

尝试1

EDIT 2 编辑2

So i ended up with this code in my XML: 因此，我最终在我的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"/>

Which is the closest thing i could get to the reference. 这是我能得到的最接近的参考。 I had to wrap my entire LinearLayout with RelativeLayout to ensure that my toolbar stays at the bottom. 我必须用RelativeLayout包装我的整个LinearLayout，以确保我的工具栏位于底部。 However this still does not answer the question exactly, since i am trying to achieve the layout as seen on the reference. 但是，这仍然不能完全回答问题，因为我正在尝试实现参考文献中所示的布局。

编辑2

5 个解决方案

解决方案1
 1  2013-12-31 06:09:25

This can be handled by two scenarios 这可以通过两种情况来处理

A) Creating a horizontal linear layout and and no of image buttons to it don't add 'width' attribute to the 'image buttons' add 'android:layout_weight="0.2"' attribute where like suppose 0.2 specify's 20 percent of the layout if we consider the complete linear layout 100%. A）创建水平线性布局，并且没有图像按钮，请不要在“图像按钮”中添加“宽度”属性，而在“图像按钮”中添加“ android：layout_weight =“ 0.2””属性，就像假设0.2指定布局的20％如果我们考虑完整的线性布局100％。 i) Follow Url : Linear Layout and weight in Android i）按照网址： Android中的线性布局和权重

B) Create a separate image in according to the screen size of the and store in separated Drawable folder in res folder from where it gets the images in according to the screen size of the mobile where it is been installed. B）根据的屏幕尺寸创建一个单独的图像，并将其存储在res文件夹中单独的Drawable文件夹中，从中根据安装了手机的屏幕尺寸从中获取图像。

Hope this helps you. 希望这对您有所帮助。

解决方案2
 0  2013-12-31 05:05:46

Try this: 尝试这个： 

<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>

解决方案3
 0  2013-12-31 05:13:43

Try out with my code: 试用我的代码： 

<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>

在此处输入图片说明

解决方案4
 0  2013-12-31 06:13:30

First place the middle button, then give equal weight to left and right side of buttons. 首先放置中间的按钮，然后对按钮的左侧和右侧施加相等的权重。 

<?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>

解决方案5
 -1  2013-12-31 04:59:36

Using RelativeLayout extensively gives bad performance. 广泛使用RelativeLayout会导致性能下降。 For buttons use LinearLayout with "horizontal" orientation and "weight" attribute . 对于按钮，请使用LinearLayout的“水平”方向和“ weight”属性。 Assign weight properly to buttons so that you can get the width of buttons as needed. 正确分配按钮的权重，以便您可以根据需要获得按钮的宽度。 To use "weight" attribute properly, view "width" should be 0. 要正确使用“重量”属性，视图“宽度”应为0。

Edit: Don't use hard coded width android:layout_width="150dp" . 编辑：不要使用硬编码宽度android：layout_width =“ 150dp”。 Instead make it match_parent. 而是将其设为match_parent。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 android中的相对布局 - Relative layout in android 相对布局Android - Relative Layout Android ListView Android中的相对布局 - Relative layout in ListView android Android相对布局 - Android relative layout 相对布局问题/ android - relative layout issues/android Android中的相对布局问题 - Relative Layout issue in Android 与listview android的相对布局 - Relative layout with listview android Android 没有为相对布局设置动画 - Android not animating the Relative Layout Android相对布局位置 - Android Relative Layout position Android相对布局 - Android Relative Layout
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM