Android ConstraintLayout Voorbeeld Tutorial

In deze tutorial bespreken we de complexiteiten van android ConstraintLayout. Google introduceerde de Android ConstraintLayout-editor tijdens de Google I/O-conferentie in 2016. De nieuwe Layout Editor bevat een reeks krachtige tools waarmee ontwikkelaars platte-UI-hiërarchieën kunnen maken voor hun complexe lay-outs.

Android ConstraintLayout

Om gebruik te maken van Android ConstraintLayout, zorg ervoor dat je de nieuwste versie van Android Studio gebruikt. Idealiter Android Studio 2.2 en hoger. We moeten de nodige SDK-tools voor ConstraintLayout downloaden vanuit de SDK Manager. Maak een nieuw leeg activiteitenproject aan en voeg de volgende afhankelijkheid toe binnen het build.gradle-bestand. compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' Maak een nieuw layout met de rootklasse ingesteld op ConstraintLayout, zoals weergegeven in de onderstaande afbeelding. Om een oud layout om te zetten naar een ConstraintLayout, open het ontwerppaneel van het desbetreffende layout, klik met de rechtermuisknop op het hoofdonderdeel en kies de relevante optie zoals weergegeven in de onderstaande afbeelding.

Android Constraint Layout Overzicht

Android ConstraintLayout wordt gebruikt om een lay-out te definiëren door beperkingen toe te wijzen aan elk kindweergave/widget ten opzichte van andere aanwezige weergaven. Een ConstraintLayout lijkt op een RelativeLayout, maar heeft meer kracht. Het doel van ConstraintLayout is om de prestaties van de toepassingen te verbeteren door geneste weergaven te vervangen door een plat en flexibel ontwerp. Een weergave binnen ConstraintLayout heeft handgrepen (of ankerpunten) aan elke zijde die worden gebruikt om de beperkingen toe te wijzen. Laten we een TextView naar de lay-out slepen en de beperkingen eraan toewijzen. De bovenstaande TextView heeft drie soorten handgrepen:

Formaat handgreep – Deze bevindt zich op de vier hoeken en wordt gebruikt om de weergave te vergroten of te verkleinen, terwijl de beperkingen behouden blijven. Zijhandgreep – Dit is de cirkelvormige handgreep in het midden van elke zijde. Het wordt gebruikt om de boven-, linker-, onder- en rechterbeperkingen van de weergave in te stellen. Basislijnhandgreep – Het wordt gebruikt om de basislijn uit te lijnen met een andere tekstweergave in de lay-out.

Laten we de beperkingen toewijzen aan de TextView en de XML-code ervan bekijken. Let op het eigenschappeninspectievenster aan de rechterkant: Hier worden de marges voor elke zijde van de weergave weergegeven. Het biedt ook de mogelijkheid om de grootte van de weergave te wijzigen door te schakelen tussen de volgende modi:

• Wrap Content – Dit past de weergave aan om de inhoud ervan te vullen.
• Any Size – Dit is vergelijkbaar met match parent.
• Fixed Size – Hiermee kunnen we een constante breedte en hoogte instellen.

De XML-code voor het bovenstaande ontwerp ziet er als volgt uit: 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 is het verankeringspunt aan de linkerkant van de weergave. toLeftOf geeft aan dat de weergave wordt uitgelijnd aan de linkerkant van de toegewezen weergave, die in dit geval “parent” is.
  Wanneer de absolute posities op de weergave zijn ingesteld, worden de xml-eigenschappen die worden gebruikt, als volgt:

tools:layout_editor_absoluteY="48dp"
tools:layout_editor_absoluteX="40dp"

We voegen nog een TextView toe en lijnen hun basislijnen uit. De xml-code voor de bovenstaande lay-out is:

<?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>

Er zijn twee andere tools, Auto-Connect en Inference, die worden gebruikt om automatisch beperkingen te maken.

1. Auto-Connect – Deze functie kan worden ingeschakeld door te klikken op: Zoals de naam al aangeeft, maakt Auto-Connect automatisch beperkingen tussen twee aangrenzende weergaven.
2. Inference – Deze functie wordt ingeschakeld door te klikken op: De Inference-engine creëert beperkingen tussen alle elementen in een lay-out. De inferentie-engine probeert optimale verbindingen te vinden en te creëren op basis van verschillende factoren zoals de posities van de widgets en hun grootte.

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 van een lay-out met ingeschakelde inferentie wordt hieronder gegeven: De XML-code voor de bovenstaande gif is:

<?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": De makerattributen om bij te houden wie de beperkingen heeft gemaakt, met name als ze zijn gemaakt door de inferentie-engine, worden ze toegewezen als 1.

Beperkingen verwijderen

Om een individuele beperking te verwijderen, zweef je over de cirkelvormige handgreep en klik je erop zodat hij rood wordt. Om alle beperkingen van een weergave te verwijderen, klik je op het symbool eronder dat eruitziet als: Een voorbeelddemo-gif wordt hieronder gegeven: Hiermee komt een einde aan deze tutorial. U kunt doorgaan en proberen enkele van uw eigen lay-outs te vervangen door een constraint-layout.