Relatieve lay-out - Ontwikkeling van native applicaties voor Android met Netbeans

EEN relatieve layout is een groepsweergave die de componenten toont in posities ten opzichte van een ander component. De positie van elk onderdeel kan worden gespecificeerd als relatief ten opzichte van andere elementen, zoals links van een knop of onder een bepaald tekstvak, of uitgelijnd naar beneden, links of in het midden.
We beginnen in de tutorial Native applicaties ontwikkelen voor Android met Netbeans waarin wordt uitgelegd hoe de Lineaire lay-outIn deze tutorial zullen we zien dat de container om interfaces in Android te maken de relatieve lay-out is.
Het belangrijkste kenmerk van deze lay-out is dat de componenten die zich in deze container bevinden, hun positie zullen bepalen ten opzichte van de andere elementen. Op deze manier kunnen we definiëren dat de Knoponderdeel bevindt zich onder het tekstvakonderdeel en dat dit op zijn beurt horizontaal is uitgelijnd ten opzichte van het labelonderdeel.
Onder de eigenschappen die ons helpen om de elementen te positioneren ten opzichte van anderen zijn:
android: layout_boven: het betekent dat het onderdeel met deze eigenschap zich boven het onderdeel bevindt dat we aangeven.
Voorbeeld:

De knop wordt zoals aangegeven boven het labelelement geplaatst android: layout_above = "@ id / titel"
android: layout_alignLinks: Het betekent dat de component die deze eigenschap heeft moet samenvallen met de linkerrand van de component die we aangeven. Als we willen dat het samenvalt met de rechterrand, gebruiken we android: layout_alignRight.
android: layout_toLeftOf: Het betekent dat de component met deze eigenschap zich links van de component bevindt die we aangeven.
android: layout_toRightOf: Het betekent dat de component die deze eigenschap heeft, rechts van de component wordt geplaatst die we aanduiden.
android: layout_bottom: Het betekent dat de component die deze eigenschap heeft, onder de door ons aangegeven component wordt geplaatst.
We gaan een eenvoudig voorbeeld van een rekenmachine in Android programmeren, in deze tutorial zullen we Netbeans en de Android SDK gebruiken zoals we deden in de tutorial Native applicaties ontwikkelen voor Android met Netbeans.

We zullen het LayoutRelativo-project maken

Zodra het project is gemaakt, beginnen we met het ontwerp in de lay-outmap, openen we het bestand main.xml en kopiëren we de volgende code:

Vervolgens we zullen de functionaliteit in Java schrijven in het bestand MainActivity.java

 pakket com.Relatief; android.app.Activiteit importeren; android.os.Bundel importeren; android.widget importeren.*; android.view importeren.*; openbare klasse MainActivity breidt Activiteit uit {// We instantiëren variabelen en componenten die we zullen gebruiken // voor berekeningen privé dubbel nummer, numberrob; privé EditText-waarde, waardeb; privé TextView-resultaat; public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); // We starten de applicatie met de hoofdlay-out setContentView (R.layout.main); // We wijzen elke component toe aan een variabele 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 // Als beide waarden groter zijn dan nul, wordt het geconverteerd naar een decimaal getal en toegevoegd als (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 ()); dit.resultaat.setText (Double.toString ((this.numeroa + this.numerob))); }} public void btRestar (View view) {// Subtract function // Als beide waarden groter zijn dan nul, wordt het geconverteerd naar een decimaal getal en afgetrokken if (this.value.getText (). toString (). length ()> 0 && dit.valorb.getText (). ToString (). Lengte ()> 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) {// Vermenigvuldigingsfunctie // Als beide waarden groter zijn dan nul, wordt het geconverteerd naar een decimaal getal en vermenigvuldigd als (this.value.getText (). toString (). length ()> 0 && dit.valorb.getText (). ToString (). Lengte ()> 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 // Als beide waarden groter zijn dan nul, wordt het geconverteerd naar een decimaal getal en gedeeld if (this.value.getText (). toString (). length ()> 0 && dit.valorb.getText (). ToString (). Lengte ()> 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 (Menumenu) {// Maak een menu van sjabloon of lay-out getMenuInflater ().inflate (R.menu.main, menu); retourneer waar; }

We voeren de applicatie uit en wanneer de emulator is geactiveerd, zien we het volgende scherm.

Het eerste tekstvak accepteert alleen cijfers die 1 of 5 bevatten zoals we hebben aangegeven, dit kunnen combinaties zijn van de cijfers in de ontwerpspecificaties met de eigenschap android: cijfers = "12345"
We zullen ook een menu en submenu toevoegen in de map Bronnen We zullen een map maken met de naam menu en in een xml-bestand met de naam main.xm dat de menuconfiguratie zal hebben.

In de waardenmap moeten we de naam van het menu in het bestand aangeven strings.xml

 Rekenmachine - Relatieve lay-outconfiguratie 

We starten de applicatie opnieuw en drukken dan op de menuknop en klik op Instelling.

We hebben een volledig functionele applicatie bereikt, om te testen hoe het werkt als we de mobiel draaien en het scherm moet worden ondergebracht, drukken we op:

Ctrl + F12

Hiermee wordt het draaien van de mobiel gesimuleerd.

De knoppen worden gepositioneerd door de eigenschappen, bijvoorbeeld voor de knop Aftrekken we plaatsen rechts van toevoegen en uitgelijnd met de bovenrand van de knop Toevoegen.

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

In het geval van de handige knop stemmen we deze af op de eerste knop die moet worden toegevoegd en op de laatste knop die moet worden vermenigvuldigd.

 android: layout_toRightOf = "@ id / vermenigvuldigen" android: layout_alignTop = "@ id / toevoegen"

Dan zullen we een knop met een pictogram toevoegen, hiervoor downloaden we elk pictogram van het web www.Icofinder.com. We zullen het pictogram in de map Bronnen kopiëren / tekenbare-mdpi.

We voegen de ontwerpcode hieronder toe, we gaan naar de lay-outmap, we openen het bestand main.xml.

Het belangrijkste doel van relatieve lay-outs, zoals we hierboven zeiden voor het ontwerp is om zo min mogelijk geneste lay-outs te gebruikenIn dit voorbeeld van Calculator hebben we een enkele lay-out met al zijn componenten gebruikt. Hierdoor zal de aanvraag sneller verlopen. Nesten met een andere lay-out vertraagt ​​en verlaagt de prestaties van de applicatie.
EEN Lay-out Relatieve hiërarchie gebruikelijk Het gebruikt minder lay-out en is eenvoudiger te hanteren dan een LinearLayout-hiërarchie. Het voordeel ten opzichte van LinearLayout is dat we elke keer dat we de oriëntatie van een component willen veranderen of extra Views willen creëren een nieuwe LinearLayout moeten maken. Daarom wordt aanbevolen dat u RelativeLayout eerst gebruikt voor elke lay-out die enige complexiteit heeft.
Bovendien Lineaire Lay-out het is alleen verticaal of horizontaal georiënteerd ten opzichte van een component, terwijl Layout Relative veel meer opties heeft. Als je deze tutorial leuk vond en geserveerd hebt, volg me dan!Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven