¿Cómo usar el Porcentaje para el diseño de Android?

Hasta el momento, la biblioteca de asistencia de Android se ha limitado en dónde usar esto:

1. Con RelativeLayout

    android.support.percent.PercentRelativeLayout 

2. Con FrameLayout

    android.support.percent.PercentFrameLayout 

¿Cómo usarlo?

Bueno, primero asegúrese de incluir la dependencia en build.grade(Module: app)

 dependencies { compile 'com.android.support:percent:23.3.0' } 

A continuación, vaya a su diseño xml en este ejemplo (.MainActivity)

 <android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <Button android:id="@+id/button" android:text="Button" android:layout_height="wrap_content" android:layout_alignParentTop="true" app:layout_widthPercent="30%"/> <Button android:id="@+id/button2" android:text="Button 2" android:layout_height="wrap_content" android:layout_toRightOf="@id/button" app:layout_widthPercent="60%"/> <Button android:id="@+id/button3" android:text="Button 3" android:layout_height="wrap_content" android:layout_below="@+id/button" android:layout_alignParentStart="true" android:layout_alignParentLeft="true" app:layout_widthPercent="90%"/> </android.support.percent.PercentRelativeLayout> 

Para más detalles, por favor verifique aquí :

La biblioteca de soporte sólo agregó un diseño de porcentaje.

Se puede hacer así

  <android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView app:layout_widthPercent="50%" app:layout_heightPercent="50%" app:layout_marginTopPercent="25%" app:layout_marginLeftPercent="25%"/> </android.support.percent.PercentFrameLayout> 

https://developer.android.com/reference/android/support/percent/PercentFrameLayout.html

Puede utilizar PercentRelativeLayout , es una adición reciente no documentada a la biblioteca de soporte de diseño , permite la capacidad de especificar no sólo elementos relativos entre sí, sino también el porcentaje total de espacio disponible.

Estructura Es

 <android.support.percent.PercentRelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageview" android:layout_gravity="center" app:layout_widthPercent="50%" app:layout_heightPercent="50%" android:src="@mipmap/ic_launcher" android:background="#cecece"/> <TextView android:id="@+id/textview1" android:layout_below="@id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_marginStartPercent="25%" app:layout_marginEndPercent="25%" android:text="PercentRelativeLayout example" android:background="#bebebe"/> </android.support.percent.PercentRelativeLayout> 

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

Para usarlo, debe agregar esta biblioteca a your Gradle dependency lista de your Gradle dependency :

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

Para el propósito de demostración, puede visitar Git android-percent-support-lib-sample .

Google tiene una nueva API llamada android.support.percent

Ejemplo PercentRelativeLayout

  <android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/myTextView" app:layout_widthPercent="75%" app:layout_heightPercent="50%"/> </android.support.percent.PercentFrameLayout> 

Puede utilizar PercentRelativeLayout Es una subclase de RelativeLayout que admite porcentajes basados ​​en dimensiones y márgenes.

Para usarlo, debe agregar esta biblioteca a su Gradle dependency :

 dependencies { compile 'com.android.support:percent:23.1.0' } 

La estructura de la muestra es

 <android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView app:layout_widthPercent="50%" app:layout_heightPercent="50%" app:layout_marginTopPercent="25%" app:layout_marginLeftPercent="25%"/> </android.support.percent.PercentRelativeLayout> 

Con PercentFrameLayout y PercentRelativeLayout siendo depreciados en 26.0.0, debe utilizar ConstraintLayout para dimensionar su TextView con valores porcentuales.

ConstraintLayout es una herramienta muy poderosa para construir la interfaz de usuario de respuesta para la plataforma de Android, puede encontrar más detalles aquí Construir una interfaz de usuario de respuesta con ConstraintLayout .

Aquí está el ejemplo de cómo dimensionar su TextView (w = 75%, h = 50%) usando ConstraintLayout:

 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.constraint.Guideline android:id="@+id/ver_guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.75"/> <android.support.constraint.Guideline android:id="@+id/hor_guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.5"/> <TextView android:layout_width="0dp" android:layout_height="0dp" android:layout_marginBottom="0dp" android:layout_marginEnd="0dp" android:layout_marginStart="0dp" android:layout_marginTop="0dp" app:layout_constraintBottom_toTopOf="@+id/hor_guideline" app:layout_constraintEnd_toStartOf="@+id/ver_guideline" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout> 

No se olvide de añadir la dependencia de dependencia de constraint-layout a su módulo build.gradle archivo

 dependencies { ... implementation 'com.android.support.constraint:constraint-layout:1.0.2' ... } 

O edite su diseño directamente en el Editor de diseño, como se muestra a continuación:

Como resultado, el ancho de TextView es el 75% del ancho de los padres y la altura es el 50% de la altura de los padres: