RelativeLayout 中的第一个视图展开以填充剩余 space
First view in RelativeLayout expand to fill remaining space
我正在设计一个带有卡片视图、复选框和按钮的布局,其初始结构如第一张图片所示:
在这种情况下,直到用户单击卡片视图中的图像才会显示列表视图,因此当发生这种情况时,所需的结构就像
第二张图片
然而,由于列表视图实际上在一个片段内,我无法实现所需的布局,因为卡片视图的 wrap_content 和 match_parent 给了我下一个结果
如您所见,卡片视图与按钮重叠,复选框超出屏幕范围
现在这是我的布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageButton
android:layout_width="@dimen/event_invitation_expand_icon"
android:layout_height="@dimen/event_invitation_expand_icon"
android:id="@+id/shrink"
android:src="@drawable/ic_shrink"
android:background="@android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/shrink"
android:layout_marginTop="5dp"
android:id="@+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="@layout/fragment_list"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkBox"
android:layout_marginTop="20dp"
android:layout_below="@+id/card"/>
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/button"
android:layout_below="@+id/checkBox"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button"
android:layout_alignParentBottom="true"
style="@android:style/Widget.DeviceDefault.Button.Borderless"
/>
我希望你能帮我设置当 space 被填充时卡片视图的最大高度停止增长。
我还尝试将复选框设置为始终位于底部的顶部,并将卡片视图设置为填充剩余的 space,虽然在展开列表视图时它为我提供了正确的结构,但它不起作用对于隐藏的列表,因为 cardview 没有填充 space。
更新
正如我所建议的那样,我尝试使用权重将根布局更改为 LinearLayout,但是,我得到了与以前相同的结果,如果我将 cardview 的权重更改为 1 并将复选框更改为 0,我能够得到扩展列表所需的布局,但不是隐藏案例的所需布局。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<ImageButton
android:layout_width="@dimen/event_invitation_expand_icon"
android:layout_height="@dimen/event_invitation_expand_icon"
android:id="@+id/shrink"
android:src="@drawable/ic_shrink"
android:background="@android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/shrink"
android:layout_marginTop="5dp"
android:id="@+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="@layout/fragment_list"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/check"
android:id="@+id/check"
android:layout_marginTop="20dp"
android:layout_below="@+id/card"
/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button"
android:textStyle="bold"
android:textColor="@android:color/white"
/>
要完成您想要做的事情,最好使用垂直方向的 LinearLayout 作为根元素。这样做,您可以将 CardView 的权重设置为 1(并且 'height' 为 0dp,因为权重是如何工作的)而不给其他元素赋予权重,使其填充所有可用的 space 没有被其他两个元素占用。可以在此处找到执行此操作的方法:
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight
您需要使用 LinearLayout
并为孩子使用 Weight。
您可以在点击时更改所有视图权重。
但我认为您需要将 CheckBox
放在布局中并设置此布局权重。否则你会弄乱身高。
看起来不太接近您的布局,但您可能也需要为 CardView
这样做。
请记住这一点。
希望对您有所帮助
我正在设计一个带有卡片视图、复选框和按钮的布局,其初始结构如第一张图片所示:
在这种情况下,直到用户单击卡片视图中的图像才会显示列表视图,因此当发生这种情况时,所需的结构就像 第二张图片
然而,由于列表视图实际上在一个片段内,我无法实现所需的布局,因为卡片视图的 wrap_content 和 match_parent 给了我下一个结果
如您所见,卡片视图与按钮重叠,复选框超出屏幕范围
现在这是我的布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_alignParentTop="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageButton
android:layout_width="@dimen/event_invitation_expand_icon"
android:layout_height="@dimen/event_invitation_expand_icon"
android:id="@+id/shrink"
android:src="@drawable/ic_shrink"
android:background="@android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/shrink"
android:layout_marginTop="5dp"
android:id="@+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="@layout/fragment_list"/>
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkBox"
android:layout_marginTop="20dp"
android:layout_below="@+id/card"/>
<Space
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/button"
android:layout_below="@+id/checkBox"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button"
android:layout_alignParentBottom="true"
style="@android:style/Widget.DeviceDefault.Button.Borderless"
/>
我希望你能帮我设置当 space 被填充时卡片视图的最大高度停止增长。
我还尝试将复选框设置为始终位于底部的顶部,并将卡片视图设置为填充剩余的 space,虽然在展开列表视图时它为我提供了正确的结构,但它不起作用对于隐藏的列表,因为 cardview 没有填充 space。
更新
正如我所建议的那样,我尝试使用权重将根布局更改为 LinearLayout,但是,我得到了与以前相同的结果,如果我将 cardview 的权重更改为 1 并将复选框更改为 0,我能够得到扩展列表所需的布局,但不是隐藏案例的所需布局。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/card"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="0">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<ImageButton
android:layout_width="@dimen/event_invitation_expand_icon"
android:layout_height="@dimen/event_invitation_expand_icon"
android:id="@+id/shrink"
android:src="@drawable/ic_shrink"
android:background="@android:color/transparent"
android:scaleType="fitCenter"
android:layout_gravity="center_vertical"
android:layout_marginRight="5dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/shrink"
android:layout_marginTop="5dp"
android:id="@+id/list">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ListFragment"
tools:layout="@layout/fragment_list"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/check"
android:id="@+id/check"
android:layout_marginTop="20dp"
android:layout_below="@+id/card"
/>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/button"
android:textStyle="bold"
android:textColor="@android:color/white"
/>
要完成您想要做的事情,最好使用垂直方向的 LinearLayout 作为根元素。这样做,您可以将 CardView 的权重设置为 1(并且 'height' 为 0dp,因为权重是如何工作的)而不给其他元素赋予权重,使其填充所有可用的 space 没有被其他两个元素占用。可以在此处找到执行此操作的方法: http://developer.android.com/guide/topics/ui/layout/linear.html#Weight
您需要使用 LinearLayout
并为孩子使用 Weight。
您可以在点击时更改所有视图权重。
但我认为您需要将 CheckBox
放在布局中并设置此布局权重。否则你会弄乱身高。
看起来不太接近您的布局,但您可能也需要为 CardView
这样做。
请记住这一点。
希望对您有所帮助