Esempio di Tutorial ConstraintLayout Android

Tutorial
Android

In questo tutorial, discuteremo delle complessità di android ConstraintLayout. Google aveva introdotto l’editor di layout di android ConstraintLayout alla conferenza Google I/O 2016. Il nuovo Layout Editor ha un insieme di potenti strumenti per consentire agli sviluppatori di creare gerarchie flat-ui per i loro layout complessi.

Android ConstraintLayout

Per utilizzare ConstraintLayout di Android, assicurati di utilizzare la versione più recente di Android Studio. Idealmente, Android Studio 2.2 e versioni successive. Dobbiamo scaricare gli strumenti SDK necessari per ConstraintLayout dal Gestore SDK. Crea un nuovo progetto di attività vuoto e aggiungi la seguente dipendenza nel file build.gradle. compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' Crea un nuovo layout con la classe radice impostata su ConstraintLayout come mostrato nell’immagine sottostante. Per convertire un vecchio layout in un ConstraintLayout, apri il riquadro di progettazione del layout rispettivo, fai clic con il tasto destro sul componente radice e scegli l’opzione rilevante come mostrato nell’immagine sottostante.

Panoramica di Android Constraint Layout

ConstraintLayout di Android viene utilizzato per definire un layout assegnando vincoli per ogni vista/widget figlio in relazione ad altre viste presenti. Un ConstraintLayout è simile a un RelativeLayout, ma con maggior potenza. L’obiettivo di ConstraintLayout è migliorare le prestazioni delle applicazioni eliminando le viste nidificate con un design piatto e flessibile. Una vista all’interno del ConstraintLayout ha delle maniglie (o punti di ancoraggio) su ogni lato che vengono utilizzate per assegnare i vincoli. Trasciniamo e rilasciamo un TextView sul layout e assegniamo i vincoli ad esso. Il TextView sopra ha tre tipi di maniglie:

Maniglia di ridimensionamento – È presente sugli angoli e viene utilizzata per ridimensionare la vista, mantenendo intatti i suoi vincoli. Maniglia laterale – È la maniglia circolare presente al centro di ogni lato. Viene utilizzata per impostare i vincoli superiori, sinistri, inferiori e destri della vista. Maniglia di base – Viene utilizzata per allineare la linea di base con un altro TextView nel layout.

Assegniamo i vincoli al TextView e diamo un’occhiata al codice xml di esso. Nota il riquadro dell’ispettore delle proprietà sul lato destro: Mostra i margini impostati per ogni lato della vista. Consente anche di cambiare le dimensioni della vista passando tra le seguenti modalità:

  • Avvolgi Contenuto – Questo avvolge la vista per riempire il suo contenuto.
  • Qualsiasi Dimensione – Questo è simile al genitore corrispondente.
  • Dimensione Fissa – Questo ci permette di impostare larghezza e altezza costanti.

Il codice xml per il layout sopra appare come: sample.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>
  • app:layout_constraintLeft_toLeftOf="parent" – constraintLeft è il punto di ancoraggio a sinistra della vista. toLeftOf indica l’allineamento della vista a sinistra della vista assegnata, che è “parent” in questo caso. Quando vengono impostate le posizioni assolute sulla vista, le proprietà XML utilizzate sono –
tools:layout_editor_absoluteY="48dp"
tools:layout_editor_absoluteX="40dp"

Aggiungiamo un altro TextView e allineiamo le loro linee di base. Il codice XML per il layout sopra è :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

</android.support.constraint.ConstraintLayout>

Ci sono altri due strumenti, Auto-connect e Inferences, che vengono utilizzati per creare vincoli automaticamente.

  1. Auto-Connect – Questa funzione può essere abilitata cliccando: Come suggerisce il nome, Auto-connect crea automaticamente vincoli tra due viste adiacenti
  2. Inference – Questa funzione è abilitata cliccando: L’Inference engine crea vincoli tra tutti gli elementi in un layout. L’Inference engine cerca di trovare e creare connessioni ottimali basate su vari fattori come le posizioni dei widget e le loro dimensioni.

A demo of Auto-Connect layout is given below: As you can see in the above gif, The constraints are animated automatically. Notice the horizontal and vertical sliders in the properties pane. They are called horizontal and vertical bias respectively. They allow us to position a view along the horizontal or vertical axis using a bias value, this will be relative to it’s constrained position. The xml code for the above demo is given below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58000004"
        app:layout_constraintHorizontal_bias="0.47" />
</android.support.constraint.ConstraintLayout>

Demo di un layout con Inferenza abilitata è fornito di seguito: Il codice xml per il gif sopra è: 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView22"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="59dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="31dp"
        app:layout_constraintRight_toRightOf="@+id/textView22"
        android:layout_marginTop="178dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="31dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_constraintTop_creator="1": Gli attributi creator per tenere traccia di chi ha creato i vincoli, particolarmente se sono creati dall’engine di inferenza, sono assegnati come 1.

Eliminazione dei Vincoli

Per eliminare un singolo vincolo, passa sopra l’impugnatura circolare e cliccala finché diventa rossa. Per eliminare tutti i vincoli di una vista, clicca sul simbolo sotto di essa che assomiglia a: Un esempio di demo gif è fornito di seguito: Questo conclude il tutorial. Puoi procedere e provare a sostituire alcuni dei tuoi layout con un layout a vincoli.

Source:
https://www.digitalocean.com/community/tutorials/android-constraintlayout