¿Cómo hacer que el diseño con Ver llene el espacio restante?


188

Estoy diseñando la interfaz de usuario de mi aplicación. Necesito un diseño como este:

Ejemplo de diseño deseado

(<y> son botones). El problema es que no sé cómo asegurarme de que TextView llene el espacio restante, con dos botones de tamaño fijo.

Si uso fill_parent para la Vista de texto, el segundo botón (>) no se puede mostrar.

¿Cómo puedo crear un diseño que se parezca a la imagen?


¿Qué utilizas como diseño raíz?
woodshy

1
@woodshy Cualquier diseño está bien, no importa.
Luke Vo

Respuestas:


213

La respuesta de woodshy funcionó para mí, y es más simple que la respuesta de Ungureanu Liviu, ya que no se usa RelativeLayout. Estoy dando mi diseño para mayor claridad:

<LinearLayout 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      >

     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
     <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
     <Button
        android:layout_width = "80dp"
        android:layout_weight = "0"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>   
 </LinearLayout>

Hay cosas como alignLefty alignParentLeft, etc., que nunca se pueden lograr con LinearLayout.
IcyFlame

No entiendo completamente cómo esto es posible, pero es muy buen truco para evitar RelativeLayout
a.dibacco

2
¿Cómo puede ser esta la respuesta aceptada? No hay vista de imagen, es solo una parte de la solución. Al menos es mejor que la vieja respuesta mejor votada con diseño relativo (expliqué por qué en mi respuesta)
Livio

solución genial
Mohammad Elsayed

92

En caso de que <TEXT VIEW> se coloque en LinearLayout, establezca la propiedad Layout_weight de <y> en 0 y 1 para TextView.
En caso de RelativeLayout, alinee <y> a izquierda y derecha y establezca la propiedad "Diseño a la izquierda de" y "Diseño a la derecha de" de TextView a los identificadores de <y>


¿Alguien todavía necesita muestra?
woodshy

Cómo agregar imágenes en este diseño para llenar toda la vista
Tushar Pandey

cómo agregará la imagen dentro del diseño relativo, para llenar toda la vista
Tushar Pandey

44
@woodshy sí, una muestra aún sería útil
Frank Schwieterman

Mire la respuesta de Vivek Pandey como ejemplo
MyDogTom

71

Si lo usa RelativeLayout, puede hacerlo de la siguiente manera:

<RelativeLayout
    android:layout_width = "fill_parent"
    android:layout_height = "fill_parent">
    <ImageView
        android:id = "@+id/my_image"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_alignParentTop ="true" />
    <RelativeLayout
        android:id="@+id/layout_bottom"
        android:layout_width="fill_parent"
        android:layout_height = "50dp"
        android:layout_alignParentBottom = "true">
        <Button
            android:id = "@+id/but_left"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&lt;"
            android:layout_alignParentLeft = "true"/>
        <TextView
            android:layout_width = "fill_parent"
            android:layout_height = "wrap_content"
            android:layout_toLeftOf = "@+id/but_right"
            android:layout_toRightOf = "@id/but_left" />
        <Button
            android:id = "@id/but_right"
            android:layout_width = "80dp"
            android:layout_height = "wrap_content"
            android:text="&gt;"
            android:layout_alignParentRight = "true"/>
    </RelativeLayout>
</RelativeLayout>

Gracias, funciona :) Pero no entiendo. ¿Por qué el TextView no llena todo el espacio, no para el >botón?
Luke Vo

2
¿Por qué tener dos diseños relativos anidados? La raíz debería ser suficiente. Entonces, todo lo que necesita hacer es asegurarse de que los elementos secundarios del diseño relativo inferior estén todos alignParentBottom = "true"
Noel

@Noel Tienes razón. Elijo el diseño 2 porque esta es la forma en que me uso: en mis aplicaciones puede suceder que necesite cambiar la visibilidad de algunas vistas y es más fácil colocarlas todas en un diseño y cambiar la visibilidad solo para este diseño . Mi ejemplo no es perfecto, pero funciona y puede ser útil para alguien.
Ungureanu Liviu

1
@WN Esto también es extraño para mí :) Creo que la vista de texto no usa todo el espacio porque el botón derecho tiene un ancho fijo. Si cambia el android: layout_width = "80dp" a android: layout_width = "wrap_content" para el botón derecho, debería funcionar.
Ungureanu Liviu

2
¡Esta respuesta es realmente mala! Debe evitar anidar el diseño relativo de 2 ya que el diseño relativo siempre hace 2 pases para dibujar (contra 1 para cualquier otro tipo de diseño). Se vuelve exponencial cuando los anidas. Debe usar un diseño lineal con ancho = 0 y peso = 1 en el elemento que desea llenar el espacio restante. Recuerde: use el diseño relativo SOLO cuando no tenga otra opción. stackoverflow.com/questions/4069037/…
Livio

30

Usando un ConstraintLayout, he encontrado algo como

<Button
    android:id="@+id/left_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&lt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/left_button"
    app:layout_constraintRight_toLeftOf="@+id/right_button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/right_button"
    android:layout_width="80dp"
    android:layout_height="48dp"
    android:text="&gt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

trabajos. La clave es establecer las restricciones de borde derecho, izquierdo, superior e inferior de manera adecuada, luego establecer el ancho y la altura 0dpy dejar que descubra su propio tamaño.


44
Recién comenzando a usar ConstraintLayout, es genial saber que el ancho y la altura se pueden determinar mediante restricciones al establecerlos en "0", gracias por eso :)
MQoder

Es importante tener cuidado con la dirección de la flecha de cada restricción. Asegúrese de que TextViewtenga las restricciones izquierda y derecha. El TextViewno se estira si el primero Buttontiene la restricción correcta para el TextViewy el último Buttontiene la restricción izquierda para el TextView.
Manuel

¡mucho mejor! mejora el rendimiento al no tener diseños anidados. Gracias por recordarnos el truco
0dp

7

Es simple. Usted configura minWidth o minHeight, depende de lo que esté buscando, horizontal o vertical. Y para el otro objeto (el que desea llenar el espacio restante) establece un peso de 1 (establece el ancho para envolver su contenido), por lo que ocupará el resto del área.

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center|left"
        android:orientation="vertical" >
</LinearLayout>
<LinearLayout
        android:layout_width="80dp"
        android:layout_height="fill_parent"
        android:minWidth="80dp" >
</LinearLayout>

4

puede usar el atributo high layout_weight. A continuación puede ver un diseño donde ListView ocupa todo el espacio libre con botones en la parte inferior:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".ConfigurationActivity"
    android:orientation="vertical"
    >

        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1000"
            />


        <Button
            android:id="@+id/btnCreateNewRule"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Create New Rule" />



        <Button
            android:id="@+id/btnConfigureOk"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Ok" />


</LinearLayout>

3

Para aquellos que tienen el mismo problema técnico <LinearLayout...>que yo:

Es importante especificar android:layout_width="fill_parent", no funcionará con wrap_content.

OTOH, puede omitir android:layout_weight = "0", no es obligatorio.

Mi código es básicamente el mismo que el código en https://stackoverflow.com/a/25781167/755804 (por Vivek Pandey)


3

Debe evitar anidar el diseño relativo de 2 ya que el diseño relativo siempre hace 2 pases para dibujar (contra 1 para cualquier otro tipo de diseño). Se vuelve exponencial cuando los anidas. Debe usar un diseño lineal con ancho = 0 y peso = 1 en el elemento que desea llenar el espacio restante. Esta respuesta es mejor para el rendimiento y las prácticas. Recuerde: use el diseño relativo SOLO cuando no tenga otra opción.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/prev_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&lt;" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:singleLine="true"
            android:gravity="center"
            android:text="TextView" />

        <Button
            android:id="@+id/next_button"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:text="&gt;" />
    </LinearLayout>
</LinearLayout>

0

Puede usar set the layout_widtho layout_widthto 0dp(Por la orientación que desea llenar el espacio restante). Luego use layout_weightpara llenar el espacio restante.


0

utilice una distribución relativa para ajustar LinearLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:round="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&lt;"/>
    <TextView
        android:layout_width = "fill_parent"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"/>
    <Button
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:text="&gt;"/>

</LinearLayout>

</RelativeLayout>`

0

encontré

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginEnd="10dp"
        android:fontFamily="casual"
        android:text="(By Zeus B0t)"
     ``   android:textSize="10sp"
        android:gravity="bottom"
        android:textStyle="italic" />

0

Al usar un diseño relativo, puede hacer que una vista se extienda al anclarla a las dos vistas a las que se supone que se estira. Aunque no se tendrá en cuenta la altura especificada, Android aún requiere un atributo de altura, por eso escribí "0dp". Ejemplo:

<View
    android:id="@+id/topView"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="8dp"/>

<View
    android:id="@+id/stretchableView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_below="@id/topView"
    android:layout_above="@+id/bottomView"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:adjustViewBounds="true"/>

<View
    android:id="@id/bottomView"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="16dp"/>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.