2021-02-17 | Android | Vues

tags: kotlin android gobelins

Introduction

• Une vue compose les interfaces du téléphone
• Champs de text, images, conteneurs, formulaires, boutons…
• Tout ce qui intervient dans l'interraction avec l'utilisateur final

La vue est la super class pour tout les éléments d'une interface. Notion d'héritage.

Attributs

• La vue attribut des attributs communs (couleurs, dimensions, interractions, positions, visibilité, marges, contraintes, identifiants) -> composants de la classe mère View

On peut affecter aux attributs des valeurs statiques, dynamiques ou des références.

Il faut utiliser l'auto complétion.

Dimensions

Dynamique

• wrap_content : s'adapte au contenu de la vue
• match_parent : s'adapte à la dimension du parent
• 0dp : s'adapte aux contraintes

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        ... />

Statique

• dp ou dip (Density and Dependant pixel) : valeur en pixel en fonction de la résolution de l'écran. On n'utilise pas directement les pixels dans nos valeurs.
• sp pour les textes

    <TextView
        android:layout_width="10dp"
        android:layout_height="25dip"
        android:textSize="25sp"
        ... />

Les valeurs statiques sont déconseillées (sauf pour les textes)

Création des vues

1. Code (Java, XML)
2. JetPack Compose (Kotlin) -> créer des vues facilement sans le code

Le XML est le moyen le plus courant pour créer des vues.

Vues de groupe

• Conteneurs de vues
• Permet de gérer le positionnement des enfants
• Ils s'appellent xxxLayout

LinearLayout

Positionnement linéaire. Il suffit de définir l'orientation des élements. L'ordre d'affichage des éléments dépend de l'ordre de création dans le code xml.

<LinearLayout
    ...
    android:orientation="vertical/horizontal"
    ...>

Il est possible d'encapsuler un linearLayout dans un autre linearLayout.

Relative layout

Les éléments sont positionnés les uns par rapport aux autres.

<RelativeLayout ...>

Contraintes de positionnement

    <TextView
        android:id="@+id/tv1"
        .../>

    <TextView
        ...
        android:layout_below="@id/tv1"
        android:layout_toRightOf="@id/tv1"/>

Autres exemples :

    <TextView
        ...
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>

Constraint layout

Layout le plus utilisé. Il permet de faire le plus de choses sur l'interface. Il suffit d'ajouter des contraintes à tout les éléments.

Les contraintes sont obligatoires. Le code va quand même être compilé, mais le résultat n'est pas garanti.

<androidx.constraintlayout.widget.ConstraintLayout
...>

    <TextView
        android:id="@+id/tv1"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
        
    <TextView
        ...
        app:layout_constraintStart_toStartOf="@id/tv1"
        app:layout_constraintEnd_toEndOf="parent"/>

Les constraintes peuvent faire dépendre un élement d'un autre. Si l'élement de référence change de position, alors l'élement associé bouge également.

Pour les contraintes, il vaut mieux ne pas utiliser les Right et Left, mais préférer Start et End.

Ressources

On peut charger toute les ressources disponibles avec la classe R.

R.string.app_name
R.color.black
R.drawable.ic_launcher_background
R.layout.activity_main
R.mipmap.ic_launcher

Charger un layout

On peut récupérer la class R (= Ressource). La classe est chargée automatiquement. Elle permet de faire le lien entre le XML des ressources et le code Java/Kotlin de l'application.

On peut donc charger le layout avec la méthode setContentView().

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Récupérer les vues d'un layout

Il faut récupérer l'instance des objets. La méthode suivante retourne l'instance de l'objet, donc une classe Java, et permet de retrouver des méthodes liées à cet objet.

findViewById(R.id.tv1)

Le Java est un langage fortement typé. La méthode utilise un type générique, mais il faut faire attention lors de l'instanciation des objets.

---

Il y a une autre solution plus légère à privilégier : View Binding

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        binding.count.setOnLongClickListener(new View.OnLongClickListener() {
            ...
        });
    }
}

Evènements

Pour ajouter des évenements, il faut utiliser la méthode setOnClickListener de l'objet récupéré.

public class MainActivity extends AppCompatActivity {

    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btn = findViewById(R.id.btn1);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Clicked", Toast.LENGTH_SHORT).show();
            }
        });
        btn.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                Toast.makeText(MainActivity.this, "Looong Clicked", Toast.LENGTH_SHORT).show();
                return false;
            }
        });

    }
}