¿Cómo escalar diferentes vistas a todos los tamaños de pantalla en Android Studio?

En este artículo, se muestra cómo cambiar el tamaño de la vista en el desarrollo de aplicaciones de Android (como TextView, etc.), para que puedan modificar el contenido que se muestra en la pantalla.

Nota: Para este artículo, visualizador XML en lugar de Android Studio .

A continuación se muestran los diversos métodos para cambiar el tamaño de las Vistas en Android:

1. Codificando los valores en dp (densidad de píxeles): Sabemos que los píxeles son una unidad de medida para una imagen o cualquier objeto que aparece en la pantalla de una computadora. Pero si especificamos el tamaño de una vista en píxeles, surgirá un problema muy grande, ya que cada dispositivo tiene una relación de pantalla de píxeles diferente. Cuanto mayor sea la cantidad de píxeles que tenga un dispositivo, más nítidas y de mejor calidad se podrán ver las imágenes.

   Por ejemplo, si especificamos una vista de 4 píxeles * 4 píxeles , se puede mostrar en diferentes tamaños según el dispositivo en cuestión.
   

   Podemos superar este problema especificando la vista en píxeles de densidad (dp) en lugar de píxeles. Cuando se especifica en dp, el propio dispositivo ajusta la vista de modo que la vista ocupe el espacio para el que estaba destinado.

   

   Ahora que conocemos la ventaja de usar píxeles de densidad sobre píxeles, veamos el código para hacerlo:

   <TextView     android:text="You are in GeeksforGeeks!"     android:background="#66bb6a"     android:layout_width="250dp"     android:layout_height="450dp" />

   Nota: Para ejecutar este código, borre cualquier código escrito previamente del Visualizador XML y pegue el código anterior.

   Producción:

   

   Vemos una escritura muy pequeña en un gran rectángulo verde. El rectángulo tiene el tamaño especificado por nosotros: 450dp*250dp . Es evidente a partir del código que al especificar el tamaño de la vista (en el ejemplo anterior es una vista de texto), debemos establecer valores para dos parámetros: alto y ancho. Si alguno de ellos está ausente, el código no se ejecutará.

2. Uso de wrap_content: generalmente, codificar los valores en dp no es una buena práctica. Tome el resultado anterior como ejemplo: nuestro texto es bastante pequeño pero estamos usando un cuadro verde gigante para encerrarlo. No solo se ve raro, sino que también ocupa mucho espacio innecesario. Además, muchas veces no sabemos cuánto contenido habrá en la vista; digamos la entrada del usuario, si es una entrada larga, entonces el tamaño que especificamos en dp podría ser pequeño para contener el contenido, por lo tanto, cortarlo y si la entrada es muy pequeña, quedará mucho espacio dentro de la vista especificada, por lo tanto resultando en un mal diseño.

   <TextView     android:text="This is a very very large input in a very very small view size!"     android:background="#ffff00"     android:layout_width="30dp"     android:layout_height="80dp" />

   Producción:
   

   Para resolver este problema, usamos la wrap_contentfunción. Hace que el tamaño de la vista esté restringido al contenido que cubre. Por lo tanto, el tamaño de la vista crecerá y se reducirá a medida que el contenido que cubre crezca o se reduzca. Veamos el código para ello:

   <TextView     android:text="This is a very very large input in a view size which will grow accordingly!"     android:background="#42a5f5"     android:layout_width="wrap_content"     android:layout_height="wrap_content" />

   Producción:
   

   Sin embargo, hay una forma más que resulta útil cuando se trata de más de una vista.

3. Uso de match_parent: cuando tenemos más de una vista en la pantalla, usamos diseños para organizar las vistas. El diseño que usamos también es una vista y se conoce como vista principal y todas las vistas que contiene se conocen como vistas secundarias .

   Al especificar el diseño, también debemos especificar su tamaño tal como lo haríamos con cualquier otra vista. Podemos hacer esto codificando los valores en dp o usando wrap_content. Sin embargo, el uso wrap_contentde diseños puede hacer que el diseño sea deficiente, ya que a veces puede hacer que la vista del niño sea más pequeña o más grande de lo previsto.

   

   Si queremos que el tamaño del diseño coincida con el tamaño del dispositivo, debemos usar match_parent. No solo se puede usar para el diseño, también conocido como vista principal, sino también para vistas secundarias. Si lo usamos para vistas secundarias, tendrá el tamaño de la vista principal.

   A continuación se muestra el código para mostrar el método anterior:

   <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="horizontal"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="@android:color/darker_gray">            <ImageView         android:src="@drawable/rainbow"         android:layout_width="wrap_content"         android:layout_height="wrap_content"/> </LinearLayout>

   Ahora el diseño se extenderá por toda la pantalla. Aquí, usamos el color «darker_gray» para el diseño para que podamos verlo cubriendo todo el dispositivo. Si no se especifica ningún color, el diseño será invisible.

   Producción:
   

   Si usamos match_parent en una vista de imagen, tomará el tamaño de la pantalla completa del dispositivo, creando así una imagen con sangrado completo:

   <ImageView         android:src="@drawable/rainbow"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:scaleType="centerCrop"/>

   Producción: