如何调整相对布局之间水平间隙的权重和

时间:2019-04-17 03:33:59

标签: android xml android-layout

我里面有一个Framelayout,我有Linealayout,它的weightSum 5.1在那里,我们有5个布局,我想根据从左到右的某个比率(27:51:48:48:48:24)调整水平间距,因此它应该但不是固定的。该如何解决?

我尝试使用layout_weight 1,.9,.9,.8,1,但无法解决  该比率,但UI不能确定我的水平间隙比率。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bb_bottom_bar_outer_container"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@drawable/float_common"
    android:clickable="true">

    <LinearLayout
        android:id="@+id/btn_updatenow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:orientation="horizontal"
        android:weightSum="5.1">

        <RelativeLayout
            android:id="@+id/float_layout_home"
            android:layout_width="@dimen/dp0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:paddingTop="2dp">

            <ImageView
                android:id="@+id/float_image_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="@dimen/margin_6"
                android:background="@drawable/float_home__new_click" />

            <TextView
                android:id="@+id/float_text_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="@dimen/padding_7"
                android:letterSpacing="-0.05"
                android:text="@string/home"
                android:textColor="@color/text_mid_grey" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/float_layout_collect"
            android:layout_width="@dimen/dp0"
            android:layout_height="match_parent"
            android:layout_weight=".9"
            android:background="?attr/selectableItemBackground"
            android:orientation="vertical"
            android:paddingTop="2dp">

            <ImageView
                android:id="@+id/float_image_collect"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="@dimen/margin_6"
                android:background="@drawable/float_collect_new_click" />

            <TextView
                android:id="@+id/float_text_collect"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="@dimen/padding_7"
                android:letterSpacing="-0.05"

                android:text="@string/collect_tab_title"
                android:textColor="@color/text_mid_grey" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/float_layout_offers"
            android:layout_width="@dimen/dp0"
            android:layout_height="match_parent"
            android:layout_weight=".9"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="2dp">

            <ImageView
                android:id="@+id/float_offers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="@dimen/margin_6"
                android:background="@drawable/float_offercoupons_new_click" />

            <TextView
                android:id="@+id/txt_badge"
                style="@style/Typeface.Footnote.White"
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:layout_gravity="top|right"
                android:layout_marginLeft="-5dp"
                android:layout_marginTop="3dp"
                android:layout_toRightOf="@+id/float_offers"
                android:background="@drawable/badge_background"
                android:gravity="center"
                android:visibility="gone" />

            <TextView
                android:id="@+id/float_text_offers"
                style="@style/Typeface.Small.TextMidGrey"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="@dimen/padding_7"
                android:gravity="center"
                android:letterSpacing="-0.05"
                 />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/float_layout_voucher"
            android:layout_width="@dimen/dp0"
            android:layout_height="match_parent"
            android:layout_weight=".8"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="2dp"
            android:visibility="visible">

            <ImageView
                android:id="@+id/float_voucher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="@dimen/margin_6"
                android:background="@drawable/float_myimage_new_click" />

            <TextView
                android:id="@+id/float_text_voucher"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="@dimen/padding_7"
                android:letterSpacing="-0.05"
                android:text="@string/vouchers"
                android:textColor="@color/text_mid_grey" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/float_layout_boost"
            android:layout_width="@dimen/dp0"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingTop="2dp"
            android:visibility="visible">

            <ImageView
                android:id="@+id/float_boost"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="@dimen/margin_6"
                android:background="@drawable/float_image2_new_click" />

            <TextView
                android:id="@+id/float_text_boost"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="@dimen/padding_7"
                android:letterSpacing="-0.05"
                android:text="@string/boost"
                android:textColor="@color/text_mid_grey" />
        </RelativeLayout>

    </LinearLayout>

</FrameLayout>

我想要保持水平比例,以便我的UI像屏幕下方一样

enter image description here

1 个答案:

答案 0 :(得分:0)

您的重量有问题,但是您会遇到另一个问题,您说相对布局要考虑宽度,但是在内部将包装内容放在元素上。

这是一个示例,如果您的总宽度为1000dp,并且在容器内的某个元素上放置了权重,则假设元素的宽度为100dp(计算出的权重),但是图像的wrap_content为120dp,您看到了吗有问题吗?

让我告诉你我写的这个小解决方案

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="246">

    <Space
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="27" />

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text1" />
    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="51" />

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text2" />
    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="48" />

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text3" />
    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="48" />

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text4" />
    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="48" />

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="text5" />
    </LinearLayout>

    <Space
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="24" />
</LinearLayout>

在此代码中,重量仅在元素之间的空间上完全像您的图形一样,空间之间的每个元素都可以包裹其内容

相关问题