Porcentaje de ancho en un RelativeLayout

Estoy trabajando en un diseño de formulario para una Activity inicio de sesión en mi aplicación de Android. La imagen a continuación es cómo quiero que se vea así:

enter image description here

Pude lograr este diseño con el siguiente XML . El problema es que es un poco hackish. Tuve que codificar un ancho para el host EditText. Específicamente, tuve que especificar:

 android:layout_width="172dp" 

Me gustaría dar un ancho de porcentaje al host y al puerto EditText. (Algo así como 80% para el host, 20% para el puerto). ¿Es esto posible? El siguiente XML funciona en mi Droid, pero no parece funcionar para todas las pantallas. Realmente me gustaría una solución más robusta.

             

Está buscando el atributo android:layout_weight . Le permitirá usar porcentajes para definir su diseño.

En el siguiente ejemplo, el botón izquierdo usa el 70% del espacio y el botón derecho el 30%.

     

Funciona igual con cualquier tipo de Vista, puede reemplazar los botones con un poco de EditText para que se ajuste a sus necesidades.

Asegúrese de establecer el layout_width en 0dp o sus vistas no se escalarán correctamente.

Tenga en cuenta que la sum de peso no tiene que ser igual a 1, simplemente me resulta más fácil leer de esta manera. Puede establecer el primer peso en 7 y el segundo en 3 y obtendrá el mismo resultado.

Esto no responde completamente a la pregunta original, que fue para una división 70/30, pero en el caso especial de una división 50/50 entre los componentes hay una manera: coloque un puntal invisible en el centro y utilícelo para posicionar el dos componentes de interés.

      

Como este es un caso bastante común, esta solución es más que una curiosidad. Es un truco pero eficiente porque el puntal vacío de tamaño cero debería costar muy poco.

En general, sin embargo, es mejor no esperar demasiado de los diseños de stock de Android …

Actualización 1

Según lo señalado por @EmJiHash, PercentRelativeLayout está en desuso en el nivel de API 26.0.0

A continuación, citando google comment:

Esta clase estaba en desuso en el nivel de API 26.0.0. considere usar ConstraintLayout y diseños asociados en su lugar. A continuación, se muestra cómo replicar la funcionalidad de los diseños de porcentaje con un Restricción de Límites


Google presentó una nueva API llamada android.support.percent

Luego puedes simplemente especificar el porcentaje a tomar por vista

Agregar dependencia de comstackción como

 compile 'com.android.support:percent:22.2.0 

en eso, PercentRelativeLayout es lo que podemos hacer un diseño porcentual sabio

     

No puede usar porcentajes para definir las dimensiones de una Vista dentro de RelativeLayout. La mejor manera de hacerlo es usar LinearLayout y pesos, o un diseño personalizado.

Puede echar un vistazo a la nueva biblioteca de soporte porcentual.

 compile 'com.android.support:percent:22.2.0' 

documentos

muestra

Puede usar PercentRelativeLayout , es una adición reciente no documentada a Design Support Library , permite la capacidad de especificar no solo los elementos relativos entre sí sino también el porcentaje total de espacio disponible.

Subclase de RelativeLayout que admite dimensiones y márgenes basados ​​en porcentaje. Puede especificar una dimensión o un margen de elemento secundario mediante el uso de atributos con el sufijo “Porcentaje”.

    

El paquete Porcentaje proporciona API para admitir la adición y administración de dimensiones basadas en porcentaje en su aplicación.

Para usarlo, debe agregar esta biblioteca a su lista de dependencias de Gradle :

 dependencies { compile 'com.android.support:percent:22.2.0'//23.1.1 } 

He resuelto esto creando una vista personalizada:

 public class FractionalSizeView extends View { public FractionalSizeView(Context context, AttributeSet attrs) { super(context, attrs); } public FractionalSizeView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); setMeasuredDimension(width * 70 / 100, 0); } } 

Este es un puntal invisible que puedo usar para alinear otras vistas dentro de RelativeLayout.

Actualizar

Según lo señalado por @EmJiHash PercentRelativeLayout y PercentFrameLayout está en desuso en el nivel de la API 26.0.0

Considere usar Restricción

Google presentó una nueva API llamada android.support.percent

1) PercentRelative Lay out

2) PercentFrameLayout

Agregar dependencia de comstackción como

 compile 'com.android.support:percent:23.1.1' 

Puede especificar la dimensión en porcentaje, de modo que obtenga los dos beneficios de RelativeLayout y porcentaje

     

PercentRelativeLayout está en desuso de la Revisión 26.0.0 de la Biblioteca de soporte.

Google introdujo un nuevo diseño llamado RestricciónDeLiminación .

Agregue la biblioteca como una dependencia en su archivo build.gradle de nivel de módulo:

  dependencies { compile 'com.android.support.constraint:constraint-layout:1.0.1' } 

solo agregue un archivo de diseño:

    

Restricciones

Las restricciones lo ayudan a mantener los widgets alineados. Puede usar anclajes, como los identificadores de restricciones que se muestran a continuación, para determinar las reglas de alineación entre varios widgets.

  1. Wrap Content : la vista se expande según sea necesario para ajustar sus contenidos.
  2. Match Constraints : la vista se amplía según sea necesario para cumplir con la definición de sus restricciones después de tener en cuenta los márgenes. Sin embargo, si la dimensión dada tiene solo una restricción, la vista se expande para ajustarse a sus contenidos. Usar este modo ya sea en altura o ancho también le permite establecer una relación de tamaño.
  3. Fixed : especifica una dimensión específica en el cuadro de texto a continuación o cambia el tamaño de la vista en el editor.
  4. Spread : las vistas se distribuyen uniformemente (una vez que se tienen en cuenta los márgenes). Este es el predeterminado.
  5. Spread inside : la primera y la última vista se fijan a las restricciones en cada extremo de la cadena y el rest se distribuyen uniformemente.
  6. Weighted : cuando la cadena está configurada para extenderse o diseminarse dentro, puede llenar el espacio restante configurando una o más vistas para que coincidan con las restricciones (0dp). De forma predeterminada, el espacio se distribuye uniformemente entre cada vista que está configurada para “hacer coincidir restricciones”, pero puede asignar un peso de importancia a cada vista utilizando los atributos layout_constraintHorizontal_weight y layout_constraintVertical_weight. Si está familiarizado con layout_weight en un diseño lineal, esto funciona de la misma manera. Por lo tanto, la vista con el valor de peso más alto obtiene la mayor cantidad de espacio; las vistas que tienen el mismo peso obtienen la misma cantidad de espacio.
  7. Packed : las vistas se empaquetan juntas (una vez que se tienen en cuenta los márgenes). A continuación, puede ajustar toda la polarización de la cadena (izquierda / derecha o arriba / abajo) cambiando la inclinación de la vista de cabeza de la cadena.
  8. Center Horizontally or Center Vertically : para crear una cadena de vistas rápidamente, selecciónelas todas, haga clic con el botón derecho en una de las vistas y luego seleccione Centrar horizontalmente o Centrar verticalmente para crear una cadena horizontal o vertical
  9. Baseline alignment : alinee la línea de base de texto de una vista con la línea base de texto de otra vista.
  10. Constrain to a guideline : puede agregar una guía vertical u horizontal a la que puede restringir las vistas, y la guía será invisible para los usuarios de la aplicación. Puede colocar la guía dentro del diseño en función de las unidades dp o del porcentaje, en relación con el borde del diseño.
  11. Adjust the constraint bias : cuando agrega una restricción a ambos lados de una vista (y el tamaño de vista para la misma dimensión es “fijo” o “contenido envolvente”), la vista se centra entre las dos restricciones con un sesgo de 50 % por defecto. Puede ajustar el sesgo arrastrando el control deslizante de polarización en la ventana Propiedades
  12. Set size as a ratio : puede establecer el tamaño de la vista en una proporción como 16: 9 si al menos una de las dimensiones de la vista se establece en “restricciones de coincidencia” (0dp).

Puedes aprender más del documento oficial.

Como PercentRelativeLayout quedó obsoleto en 26.0.0 y los diseños nesteds como LinearLayout dentro de RelativeLayout tienen un impacto negativo en el rendimiento ( entendiendo los beneficios de rendimiento de ConstraintLayout ) la mejor opción para lograr el porcentaje de ancho es reemplazar su RelativeLayout con ConstraintLayout.

Esto se puede resolver de dos maneras.

SOLUCIÓN # 1 Uso de pautas con porcentaje de compensación

Editor de diseño

        

SOLUCIÓN # 2 Usando cadena con ancho ponderado para EditText

Editor de diseño

       

En ambos casos, obtienes algo como esto

Vista de resultados

Puede lograr esto a través de pesos de diseño. Un peso dicta cómo se dividen las partes no reclamadas de la pantalla. Dé a cada EditText un layout_width de 0 y algo de peso proporcional. Es decir, dale a uno un peso de 2 y el otro un peso de 1 si quieres que el primero ocupe el doble de espacio.

Curiosamente, basándose en la respuesta de @olefevre, no solo se pueden hacer diseños 50/50 con “puntales invisibles”, sino todo tipo de diseños que involucren poderes de dos.

Por ejemplo, aquí hay un diseño que corta el ancho en cuatro partes iguales (en realidad tres, con pesos de 1, 1, 2):

           

Simplemente coloque sus dos textviews host y port en una linearlayout independiente horizontal y use android: layout_weight para hacer el porcentaje

Compruebe https://github.com/mmin18/FlexLayout, que puede usar el porcentaje o la expresión java directamente en el diseño xml.