LinearLayout y sus atributos importantes con ejemplos en Android

julio 5, 2022 Rudeus Greyrat

LinearLayout es el diseño más básico en Android Studio, que alinea a todos los niños secuencialmente, ya sea de forma horizontal o vertical, especificando el atributo android:orientation . Si se aplica android:orientation=”vertical” , los elementos se organizarán uno tras otro de forma vertical y si se aplica android:orientation=”horizontal” , los elementos se organizarán uno tras otro de forma horizontal.

Código de muestra de LinearLayout

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
       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:orientation="vertical"
    tools:context=".MainActivity">
</LinearLayout>

Algunos atributos importantes de LinearLayout

Atributos	Descripción
Android: diseño_peso	Se define individualmente a las vistas del niño para especificar cómo LinearLayout divide el espacio restante entre las vistas que contiene
android:pesoSuma	Define la suma del peso total
Android: orientación	Cómo se deben organizar los elementos en el diseño. Puede ser horizontal o vertical.
Android: gravedad	Especifica cómo un objeto debe colocar su contenido en sus ejes X e Y. Los valores posibles son: center_vertical, fill, center, bottom, end, etc.
Android: diseño_gravedad	Establece la gravedad de la vista o el diseño en relación con su padre. Los valores posibles son: center_vertical, fill, center, bottom, end, etc.
Android: línea de base Alineada	Este debe ser un valor booleano, ya sea «verdadero» o «falso» y evita que el diseño de alinear las líneas de base de sus hijos.
Android: identificación	Esto le da una identificación única al diseño.

Ejemplos

1. Cómo organizar las vistas de los niños de manera vertical

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    tools:context=".MainActivity">
    <!-- Add vertical in the android:orientation-->
  
    <!-- Add Button-->
    <Button
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:layout_height="wrap_content"/>
  
    <!-- Add Button-->
    <Button
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:layout_height="wrap_content"/>
  
    <!-- Add Button-->
    <Button
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:layout_height="wrap_content"/>
  
</LinearLayout>

Interfaz de usuario de salida:

The output of the above code

2. Cómo organizar las vistas de los niños de manera horizontal

XML

<?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:orientation="horizontal"
    tools:context=".MainActivity">
    <!-- Add horizontal in the android:orientation-->
  
    <!-- Add Button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />
      
    <!-- Add Button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />
      
    <!-- Add Button-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp" />
  
</LinearLayout>

Interfaz de usuario de salida:

The output of the above code

3. Cómo usar layout_weight y weightSum

XML

<?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:orientation="horizontal"
    android:weightSum="3"
    tools:context=".MainActivity">
    <!-- Add value in the android:weightSum-->
    <!-- Add horizontal in the android:orientation-->
  
    <!-- Add Button-->
    <!-- Add value in the android:layout_weight-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1" />
      
    <!-- Add Button-->
    <!-- Add value in the android:layout_weight-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1" />
      
    <!-- Add Button-->
    <!-- Add value in the android:layout_weight-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1" />
  
</LinearLayout>

Interfaz de usuario de salida:

The output of the above code

4. Cómo usar la gravedad

XML

<?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:orientation="horizontal"
    android:weightSum="3"
    tools:context=".MainActivity">
    <!-- Add value in the android:weightSum-->
    <!-- Add horizontal in the android:orientation-->
  
    <!-- Add Button-->
    <!-- Add value in the android:gravity -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:gravity="bottom|center"
        android:text="GFG" />
      
    <!-- Add Button-->
    <!-- Add value in the android:gravity -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="GFG" />
      
    <!-- Add Button-->
    <!-- Add value in the android:gravity -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:gravity="center|top"
        android:text="GFG" />
  
</LinearLayout>

Interfaz de usuario de salida:

The output of the above code

5. Cómo usar layout_gravity

XML

<?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:orientation="vertical"
    tools:context=".MainActivity">
    <!-- Add vertical in the android:orientation-->
  
    <!-- Add Button-->
    <!-- Add value in the layout_gravity -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp" />
      
    <!-- Add Button-->
    <!-- Add value in the layout_gravity -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_margin="10dp" />
      
    <!-- Add Button-->
    <!-- Add value in the layout_gravity -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_margin="10dp" />
  
</LinearLayout>

Interfaz de usuario de salida:

The output of the above code

Publicación traducida automáticamente

Artículo escrito por kartiksrivastava6 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta