Relative Layout - Développement d'applications natives pour Android avec Netbeans

UNE Disposition relative est une vue de groupe qui montre les composants dans des positions par rapport à un autre composant. La position de chaque composant peut être spécifiée par rapport à d'autres éléments tels qu'à gauche d'un bouton ou en dessous d'une certaine zone de texte ou alignée en bas, à gauche ou au centre.
Nous commençons par le tutoriel Développer des applications natives pour Android avec Netbeans expliquant comment utiliser le Disposition linéaireDans ce tutoriel, nous verrons que le conteneur pour créer des interfaces dans Android est la disposition relative.
La principale caractéristique de cette disposition est que les composants qui sont à l'intérieur de ce conteneur vont localiser leur position par rapport aux autres éléments. De cette façon, nous pouvons définir que le Le composant Button est situé sous le composant de zone de texte et celui-ci est à son tour aligné horizontalement par rapport au composant Label.
Parmi les propriétés qui nous aident à positionner les éléments par rapport aux autres figurent :
android : layout_above : cela signifie que le composant qui a cette propriété sera situé au-dessus du composant que nous indiquons.
Exemple:

Le bouton sera positionné au dessus de l'élément label comme indiqué android : layout_above = "@ id / titre"
android : layout_alignLeft : Cela signifie que le composant qui a cette propriété doit coïncider avec le bord gauche du composant que nous indiquons. Si nous voulons qu'il coïncide avec le bord droit, nous utiliserons android : layout_alignRight.
Android : layout_toLeftOf : Cela signifie que le composant qui a cette propriété sera situé à gauche du composant que nous indiquons.
Android : layout_toRightOf : Cela signifie que le composant qui a cette propriété sera positionné à droite du composant que nous indiquons.
Android : layout_bottom : Cela signifie que le composant qui a cette propriété sera positionné en dessous du composant que nous indiquons.
Nous allons programmer un exemple simple de calculatrice sous Android, dans ce tutoriel nous utiliserons Netbeans et le SDK Android comme nous l'avons fait dans le tutoriel Développer des applications natives pour Android avec Netbeans.

Nous allons créer le projet LayoutRelativo

Une fois le projet créé, nous allons commencer par le design dans le dossier layout, ouvrir le fichier main.xml et copier le code suivant :

Ensuite nous écrirons la fonctionnalité en Java dans le fichier MainActivity.java

 paquet com.Relatif; importer android.app.Activity; importer android.os.Bundle; importer android.widget.*; importer android.view.*; La classe publique MainActivity étend l'Activité {// Nous instancions des variables et des composants que nous utiliserons // pour les calculs private double number, numberrob; valeur EditText privée, valueb; résultat TextView privé; public void onCreate (Bundle protectedInstanceState) {super.onCreate (savedInstanceState); // Nous démarrons l'application avec la mise en page principale setContentView (R.layout.main); // Nous attribuons chaque composant à une variable this.valora = (EditText) findViewById (R.id.numeroa); this.valorb = (EditText) findViewById (R.id.numerob); this.result = (TextView) findViewById (R.id.result); } public void btSumar (View view) {// Add function // Si les deux valeurs sont supérieures à zéro, il est converti en un nombre décimal et ajouté if (this.value.getText().toString().length ( )> 0 && this.valorb.getText ().toString ().length ()> 0) {this.numeroa = Double.parseDouble (this.valora.getText ().toString ()); this.numerob = Double.parseDouble (this.valorb.getText ().toString ()); this.result.setText (Double.toString ((this.numeroa + this.numerob))); }} public void btRestar (View view) {// Fonction de soustraction // Si les deux valeurs sont supérieures à zéro, elle est convertie en nombre décimal et soustraite if (this.value.getText().toString().longueur ()> 0 && this.valorb.getText (). ToString (). Length ()> 0) {this.numeroa = Double.parseDouble (this.valora.getText (). ToString ()); this.numerob = Double.parseDouble (this.valorb.getText ().toString ()); this.result.setText (Double.toString ((this.numeroa - this.numerob))); }} public void btMultiplicar (View view) {// Multiply function // Si les deux valeurs sont supérieures à zéro, il est converti en un nombre décimal et multiplié if (this.value.getText().toString().longueur ()> 0 && this.valorb.getText (). ToString (). Length ()> 0) {this.numeroa = Double.parseDouble (this.valora.getText (). ToString ()); this.numerob = Double.parseDouble (this.valorb.getText ().toString ()); this.result.setText (Double.toString ((this.numeroa * this.numerob))); }} public void btDivide (View view) {// Divide function // Si les deux valeurs sont supérieures à zéro, il est converti en un nombre décimal et divisé if (this.value.getText().toString().longueur ()> 0 && this.valorb.getText (). ToString (). Length ()> 0) {this.numeroa = Double.parseDouble (this.valora.getText (). ToString ()); this.numerob = Double.parseDouble (this.valorb.getText ().toString ()); if (this.numerob! = 0) {this.result.setText (Double.toString ((this.numeroa / this.numerob))); }}} public boolean onCreateOptionsMenu (menu Menu) {// Créer un menu à partir d'un modèle ou d'une mise en page getMenuInflater().inflate (R.menu.main, menu); renvoie vrai; }

Nous exécutons l'application et lorsque l'émulateur est activé, nous verrons l'écran suivant.

La première zone de texte accepte uniquement les nombres qui contiennent 1 ou 5 comme nous l'avons indiqué, qui peuvent être des combinaisons des chiffres dans les spécifications de conception avec la propriété android : chiffres = "12345"
Nous allons également ajouter un menu et un sous-menu, dans le dossier Ressources Nous allons créer un dossier appelé menu et à l'intérieur un fichier xml appelé main.xm qui contiendra la configuration du menu.

A l'intérieur du dossier des valeurs, nous devons déclarer le nom du menu dans le fichier chaînes.xml

 Calculatrice - Configuration relative de la disposition 

Nous exécutons à nouveau l'application, puis appuyez sur le bouton de menu et cliquez sur Réglage.

Nous avons réalisé une application entièrement fonctionnelle, pour tester son fonctionnement si nous tournons le mobile et que l'écran doit être logé, nous appuyons sur :

Ctrl + F12

Cela simulera la rotation du mobile.

Les boutons sont positionnés par les propriétés, par exemple pour le bouton Soustraire nous nous positionnons à droite de l'ajout et alignés avec le bord supérieur du bouton d'ajout.

 android : layout_toRightOf = "@ id / add" android : layout_alignTop = "@ id / add"

Dans le cas du bouton utile, on l'aligne par rapport au premier bouton à ajouter et au dernier bouton à multiplier.

 android : layout_toRightOf = "@ id / multiplier" android : layout_alignTop = "@ id / add"

Ensuite, nous ajouterons un bouton avec une icône. Pour cela, nous téléchargeons n'importe quelle icône du site Web www.Icofinder.com. Nous allons copier l'icône dans le dossier Ressources / drawable-mdpi.

Nous ajoutons le code de conception ci-dessous nous allons dans le dossier de mise en page, nous ouvrons le fichier main.xml.

Le but principal des dispositions relatives, comme nous l'avons dit plus haut pour la conception est d'utiliser le moins de mises en page imbriquées possibleDans cet exemple de Calculatrice, nous avons utilisé une seule mise en page avec tous ses composants. Cela permettra à l'application d'être plus rapide. L'imbrication avec une disposition différente ralentit et diminue les performances de l'application.
Ongle Disposition Hiérarchie relative d'habitude Il utilisera moins de mise en page et aura une manipulation plus simple qu'une hiérarchie LinearLayout. L'avantage par rapport à LinearLayout est que nous devons créer un nouveau LinearLayout chaque fois que nous voulons changer l'orientation d'un composant ou créer des vues supplémentaires. Par conséquent, il est recommandé d'utiliser d'abord RelativeLayout pour toute mise en page complexe.
En outre Mise en page linéaire il n'est orienté que verticalement ou horizontalement par rapport à un composant alors que Layout Relative a beaucoup plus d'options. Si vous avez aimé et servi ce tutoriel, suivez-moi !Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif