# 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

> [color=#E35DDA]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

> [color=#E35DDA]On peut affecter aux attributs des valeurs statiques, dynamiques ou des références.

> [color=#E35DDA]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"
        ... />

> [color=#E35DDA]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

> [color=#E35DDA]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"
    ...>

> [color=#E35DDA]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.

> [color=#E35DDA] :warning: 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.

> [color=#E35DDA] :warning: 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)

> [color=#E35DDA] :warning: 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](https://developer.android.com/topic/libraries/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;
            }
        });

    }
}