View unanswered posts | View active topics It is currently 12 Dec 2017, 03:40



Reply to topic  [ 1 post ] 
 Αναβαθμίζοντας το User Interface σε XML Layout 
Author Message
Site Admin
User avatar

Joined: 24 May 2008, 23:50
Posts: 626
Location: Athens
Post Αναβαθμίζοντας το User Interface σε XML Layout
Το παράδειγμα "Hello World" χρησιμοποιεί αυτό που λέμε "προγραμματιστικό" UI layout. Αυτό σημαίνει οτι μπορούμε να κατασκευάσουμε το UI απευθείας απο τον πηγαίο κώδικα. Εαν έχετε εμπειρία στον προγραμματισμό UI πιθανώς να γνωρίζετε πόσο εύθραυστος είναι αυτός ο τρόπος: μικρές αλλαγές στο layout μπορεί να προκαλέσουν μεγάλα προβλήματα στον πηγαίο κώδικα. Επίσης είναι αρκετά πιθανό να ξεχάσουμε να συνδέσουμε σωστά τα View το οποίο μπορεί να προκαλέσει λάθη στο layout.

Για αυτούς τους λόγους το Android παρέχει ενα εναλλακτικό κατασκευαστικό μοντέλο UI: τα layout αρχεία που βασίζονται σε XML. Ο ευκολότερος τρόπος να εξηγήσουμε αυτό τον τρόπο είναι μέσω ενός παραδείγματος.

Εδώ έχουμε ένα XML layout file το οποίο έχει παρόμοια συμπεριφορά με το "προγραμματιστικό" layout του παραδείγματος "Hello World".
Code:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:text="Hello, Android"/>

Η γενική δομή ενός αρχείου XML layout είναι απλή. Είναι ένα δέντρο απο tags, στο οποίο κάθε tag έχει το όνομα μιας κλάσης View. Σε αυτό το παράδειγμα έχουμε ένα πολύ απλό δέντρο με ένα στοιχείο, το TextView. Μπορούμε να χρησιμοποιήσουμε το όνομα οποιασδήποτε κλάσης επεκτείνει την κλάση View σαν όνομα του tag στα XML layouts, συμπεριλαμβανομένων και δικών μας κλάσεων View που ορίζουμε στον κώδικα. Αυτή η δομή διευκολύνει την γρήγορη δημιουργία UI, κάνοντας χρήση μιας πιο απλής δομής και σύνταξης απο ότι ο πηγαίος κώδικας. Αυτό το μοντέλο εμπνεύστηκε απο το μοντέλο του Web Development, όπου μπορούμε να ξεχωρίσουμε την παρουσίαση της εφαρμογής απο την λογική της εφαρμογής για να διαβάζουμε και να γράφουμε δεδομένα.

Σε αυτό το παράδειγμα βλέπουμε 4 XML attributes. Δίπλα βλέπουμε μια περίληψη απο το τι σημαίνουν:

xmlns:android - Αυτό είναι μια δήλωση που λέει στα εργαλεία του Android οτι θα αναφερθούμε στις συνηθισμένες τιμές που ορίζονται στο Android Namespace. Το πιο ακραίο tag σε κάθε layout πρέπει να περιλαμβάνει αυτή τη τιμή.

android:layout_width - Αυτή η τιμή καθορίζει τι ποσοστό απο το διατιθέμενο πλάτος της οθόνης θα καταλαμβάνει το View. Σε αυτή τη περίπτωση είναι το μοναδικό View και θέλουμε να καταλαμβάνει όλη την οθόνη, το οποίο είναι κάτι που ρυθμίζεται απο το "fill_parent".

android:layout_height -Είναι ακριβώς σαν το android:layout_width μόνο που αναφέρεται στο ύψος.

android:text -Θέτει το κείμενο που το TextView θα περιλαμβάνει. Σε αυτό το παράδειγμα είναι το κείμενο "Hello World".

Τα XML layouts μοιάζουν κάπως έτσι. Τα τοποθετούμε στον φάκελο "res" του project. Το res είναι συντόμευση του resources και αυτός ο φάκελος περιέχει όλα τα πράγματα εκτός του κώδικα που απαιτούνται στην εφαρμογή, όπως εικόνες, ήχοι και τα XML layout files.

Το Eclipse plugin δημιουργεί ένα XML αρχείο για εμάς. Στο παράδειγμα του "Hello World" απλά δεν το χρησιμοποιήσαμε. Στον Package Explorer ανοίξτε τον φάκελο res/layout και επεξεργαστείτε το αρχείο main.xml. Αλλάξτε τα περιεχόμενα του με το κείμενο που βρίσκεται απο πάνω και σώστε τις αλλαγές.

Τώρα ανοίξτε το αρχείο R.java στον φάκελο source code. Θα δείτε κάτι σαν αυτό:
Code:
public final class R {
    public static final class attr {
    };
    public static final class drawable {
        public static final int icon=0x7f020000;
    };
    public static final class layout {
        public static final int main=0x7f030000;
    };
    public static final class string {
        public static final int app_name=0x7f040000;
    };
};


Το αρχείο R.java ενός project είναι τα περιεχόμενα όλων των resources που καθορίζονται σε αυτό το αρχείο. Χρησιμοποιούμε αυτή τη κλάση στον κώδικα σαν ένα σύντομο τρόπο να αναφερόμαστε στα resources που περιλαμβάνονται στο project. Αυτό συνδυάζεται πολύ καλά με τις ικανότητες code-completion των IDEs όπως το Eclipse επειδή μας επιτρέπει να εντοπίζουμε γρήγορα και διαδραστικά τις αναφορές που ψάχνουμε.

Το πιο σημαντικό πράγμα που πρέπει να προσέξουμε προς το παρών είναι η εσωτερική κλάση με το όνομα "layout" και του πεδίου της "main". Το plugin του Eclipse παρατήρησε οτι προσθέσαμε ένα καινούργιο XML Layout αρχείο και ξαναδημιούργησε το αρχείο R.java. Καθώς προσθέτουμε άλλα resources στην εφαρμογή, θα δούμε το R.java να αλλάζει και αυτό.

Το τελευταίο πράγμα που πρέπει να κάνουμε είναι να αλλάξουμε τον πηγαίο κώδικα της εφαρμογής ώστε να χρησιμοποιεί την καινούργια έκδοση του XML του UI.
Η καινούργια κλάση θα δείχνει κάπως έτσι. Όπως παρατηρείτε ο πηγαίος κώδικας γίνεται πιο απλός:
Code:
package com.android.hello;

import android.app.Activity;
import android.os.Bundle;

public class HelloAndroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
    }
}


Όταν κάνετε αυτές τις αλλαγές, μην κάνετε copy paste. Δοκιμάστε το code completion στην κλάση R. Θα σας βοηθήσει αρκετά.

Τώρα που κάναμε αυτές τις αλλαγές, μπορούμε να ξανατρέξουμε το πρόγραμμα. Θα πρέπει να δείτε, χμ, ακριβώς το ίδιο πράγμα με πριν, αλλά αυτός ήταν ο σκοπός, να δείξουμε δυο διαφορετικές προσεγγίσεις για σχεδιασμό layout.

Διαβάστε αυτό http://code.google.com/android/devel/implementing-ui.html για περισσότερες πληροφορίες.

_________________
Chief Software Engineer @ PinApps.com
Κωνσταντίνος Πολυχρόνης http://www.kospol.gr
Πρόσθεσε την εφαρμογή σου: http://greekandroidapps.gr/


29 Jun 2008, 22:50
Profile WWW
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware.