¿Cómo mover las vistas fuera del camino con dodgeInsetEdges en Android?

Hemos utilizado el botón de acción flotante que tiene el comportamiento de expandirse hacia arriba y mostrar el mensaje de la barra de refrigerios debajo de ese botón de acción flotante. Este comportamiento está presente con el Botón de acción flotante con comportamiento predeterminado, pero si queremos agregar este tipo de comportamiento en nuestra vista personalizada. Entonces, en este artículo, veremos cómo moverse fuera del camino con dodgeInsetEdges en Android. 

¿Qué vamos a construir en este artículo? 

Construiremos una vista expandible simple que mostraremos al hacer clic en un botón en Android. qué

Move Views out of the way with dodgeInsetEdges in Android Sample GIF

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<!--we are using coordinator layout for this example-->
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    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"
    tools:context=".MainActivity">
  
    <!--button to expand the view-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|start"
        android:layout_margin="16dp"
        android:text="Click to Expand"
        app:layout_dodgeInsetEdges="bottom" />
  
    <!--Nested scroll view to display 
        bottom scrolled layout-->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:background="@color/purple_500"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior"
        app:layout_insetEdge="bottom">
  
        <!--we will be displaying a simple text
            view in that nested scroll view-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:text="Welcome to the DSA Self paced Course,
                          where you will get to learn all about 
                          Data Structures and Algorithms in detail."
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold" />
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Paso 3: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.android.material.bottomsheet.BottomSheetBehavior;
  
public class MainActivity extends AppCompatActivity {
  
    // creating a new variable for bottom sheet behaviour.
    private BottomSheetBehavior bottomSheetBehavior;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initializing view for our bottom sheet below.
        View bottomSheet = findViewById(R.id.bottom_sheet);
  
        // initializing bottom sheet behaviour
        // with our bottom sheet view.
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
  
        // initializing the button where we will
        // be displaying our expanded view.
        Button button = findViewById(R.id.button);
  
        //adding on click listener to our button.
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // below line is use to expand our view on button click in android.
                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            }
        });
    }
}

Ahora ejecute la aplicación y vea el resultado de la aplicación. 

Producción:

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *