Composants

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Android

Attaquons nous maintenant aux composants disponibles dans le SDK Android. Ces composants (boutons, listes déroulantes, saisie de texte, etc.) vous permettent de concevoir toute votre application. Nous verrons que que ces composants, comme tout framework graphique Java, sont un ensemble de classe dont vous pouvez hériter pour modifier les comportements.

 

Propriétés communes

Tous les composants ont 3 propriétés qui sont communes, c'est à dire que vous pouvez être assuré d'avoir ces propriétés dans chacun d'entre eux.

  • height et width : hauteur et largeur du composant à indiquer obligatoirement. Il est ici possible de définir une taille fixe, mais il vaut mieux définir les propriétés suivantes :
    Match_Parent : prend la taille du layout parent
    Wrap_content : prend la taille du composant
  • padding (padding-left, padding-top...) : espace interne entre le composant et son contenu (soit du texte, soit un autre composant)
  • layout-margin : espace entre 2 composants situés dans le même container (layout). Layout margin est souvent utilisé en dur pour placer le composant à un point précis

Listeners

Les listeners ont tous un point commun : leur nom est un template composé par : OnXXListener avec XX le nom du listener.
Un listener est forcément attribué à un composant, souvent par une fonction commençant par setOn....
On peut comme cela facilement deviner quel sont les listener autorisés pour chaque composant.

 

TextView

auto_formation_android_textview

Ce composant est en réalité un label. Il n’y a pas vraiment d’interaction.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textViewId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="un texte" />
</LinearLayout>

 

Button

auto_formation_android_button

Le bouton sert à valider une action, il y a une variante, le toogle button qui est un interrupteur.

<LinearLayout xmlns:android=<em>"<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"</em>
   android:layout_width=<em>"match_parent"</em>
   android:layout_height=<em>"match_parent"</em>
   android:orientation=<em>"horizontal"</em> >
 
   <Button
       android:id=<em>"@+id/button1"</em>
       android:layout_width=<em>"wrap_content"</em>
       android:layout_height=<em>"wrap_content"</em>
       android:text=<em>"Button normal"</em> />
 
   <ToggleButton
       android:id=<em>"@+id/toggleButton1"</em>
       android:layout_width=<em>"wrap_content"</em>
       android:layout_height=<em>"wrap_content"</em>
       android:text=<em>"ToggleButton"</em> android:checked=<em>"true"</em>/>
</LinearLayout>

 

Listener

final Button startButton = (Button) findViewById(R.id.button1);
startButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(ButtonActivity.this, "cliqué",
                Toast.LENGTH_SHORT).show();
    }
});

 

EditText

auto_formation_android_EditText

L’éditext nous permet de renseigner une information. Nous pouvons lui régler des filtres permettant notamment de restreindre l’écriture aux nombres, ou même cacher l’écriture pour les mots de passe.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

    </EditText>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />

 </LinearLayout>

 

Utilisation

final EditText  text = (EditText) findViewById(R.id.editText1);
text.getText().toString();
text.setText("init");

 

CheckBox

auto_formation_android_CheckBox

Le check box est une case à cocher, il apparaît par défaut avec un label à droite.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=" case a cocher" />

</LinearLayout>

 

Listener

check.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        if(check.isChecked())
        Toast.makeText(CheckBoxActivity.this, "cliqué check",
                Toast.LENGTH_SHORT).show();
    
    }
});
check.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        if(check.isChecked())
        Toast.makeText(CheckBoxActivity.this, "cliqué check",
                Toast.LENGTH_SHORT).show();
    
    }
});

 

Radiobutton

auto_formation_android_Radiobutton

De manière identique le radio button permet d’effectuer un choix, mais ces choix seront exclusifs. Afin d’assurer cette fonctionnalité, nous l’entourons d’un radiogroup.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="snack" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="breakfeast" />

    </RadioGroup>
</LinearLayout>

 

Listener

radio.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        if(radio.isChecked())
        Toast.makeText(RadioActivity.this, "cliqué radio",
                Toast.LENGTH_SHORT).show();
    
    }
});

 

Imageview

auto_formation_android_Imageview

Une imageview nous permet d’afficher une image.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="/@drawable/ic_launcher" />

</LinearLayout>

 

 

Utilisation

final  ImageView img = (ImageView) findViewById(R.id.imageView1);
img.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {    
    img.setImageDrawable(getResources().getDrawable(R.drawable.smiley));
    }
});

 

Listview

auto_formation_android_Listview

La listview nous permet de représenter graphiquement une structure de données telles que les listes ou les tableau. Chaque élément est en réalité une View qui peut être, soit directement un composant, ou bien un layout.

 

Initialisation

String[] data=new String[]{"demo textview","demo button","demo editText","demo checkbox","demo radio","demo image","demo spinner", "demo scroll view","demo webview","demo tabwidget","demo dialog"};
init = Arrays.asList(aa);
ListView l=(ListView) this.findViewById(R.id.maListe);
l.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, this.init));

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.05" >
    </ListView>

</LinearLayout>



Utilisation
l.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        startActivity(new Intent(PrincipaleActivity.this,ButtonActivity.class));
    }
}

 

 

Spinner

Le Spinner est un composant ressemblant à un ComboBox et comme la ListView, il doit avoir associé une table ou une liste afin d’afficher les données.
Il y aura 2 vues à spécifier : le rendu de la ComboBox et le rendu des choix données par le popup.

auto_formation_android_spinner_1

auto_formation_android_spinner_2

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>



Initialisation
String[] data=new String[]{"demo textview","demo button","demo editText","demo checkbox","demo radio","demo image","demo spinner","demo scroll view","demo webview","demo tabwidget","demo dialog"};
init = Arrays.asList(data);
Spinner l=(Spinner) this.findViewById(R.id.spinner1);
ArrayAdapter<String> aa = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, this.init);
aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
l.setAdapter(aa);

 

Utilisation

l.setOnItemSelectedListener(new OnItemSelectedListener() {
    @Override
    public void onItemSelected(AdapterView<?> arg0, View arg1,
            int arg2, long arg3) {
        Toast.makeText(SpinnerActivity.this, "cliqué "+arg2,
        Toast.LENGTH_SHORT).show();    
    }
    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
        // TODO Auto-generated method stub
    }
});

 

 

Scrollview

La scroll view est en réalité un layout classique permettant en plus d’afficher un composant dans un espace plus petit, ce qui aura pour effet d'afficher une scrollbar.

auto_formation_android_scrollview

 

 

Webview

Composant qui affiche le contenu d’une url ou d’une page web.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TextView
                android:id="@+id/dansscroll"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

        </LinearLayout>
    </ScrollView>
</LinearLayout>

 

auto_formation_android_webview


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>



Utilisation
WebView w=(WebView) this.findViewById(R.id.webView1);
w.loadDataWithBaseURL(null, "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'  /></head><body>   <h1 style='color=BLACK'>texte ici</h1> </body></html>", "text/html",  "utf-8", "about:blank");

 

 

Tabwidget

Permet de regrouper dans une même fenêtre la possibilité de switcher sur plusieurs activités grâce à un système d’onglets. Chaque onglet est associé à une activité et l’affectation se fait dans le code. Le panel des onglets doit impérativement s’appeler @android:id/tabhost

auto_formation_android_Tabwidget

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true" >
            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_above="@android:id/tabs"
                android:layout_alignParentTop="true" >
            </FrameLayout>
        </RelativeLayout>
    </TabHost>
</LinearLayout>



tabs=(TabHost)findViewById(android.R.id.tabhost);
//initilatise avant l'affectation des activités
tabs.setup();

tabs.addTab(tabs.newTabSpec("0")
         .setIndicator("tab1", getResources().getDrawable(R.drawable.icon48x48_1))
         .setContent(new Intent(this, RadioActivity.class)));

tabs.addTab(tabs.newTabSpec("1")
        .setIndicator("tab2", getResources().getDrawable(R.drawable.icon48x48_1))
        .setContent(new Intent(this, ButtonActivity.class)));

tabs.addTab(tabs.newTabSpec("2")
        .setIndicator("tab3", getResources().getDrawable(R.drawable.icon48x48_1))
        .setContent(new Intent(this, CheckBoxActivity.class)));

tabs.setCurrentTab(2);

 

Boites de dialogue

les boites de dialogue sont des éléments visuels flottants.
Il existe plusieurs sortes de dialogue:

  • alertDialog
  • DatePicker
  • TimePicker


Chacune d'entre elle hérite de la classe Dialog.


Nous la déclarons et l’appelons dans le code uniquement

auto_formation_android_Boites_de_dialogue

 

Utilisation

AlertDialog.Builder ad = new AlertDialog.Builder(PrincipaleActivity.this);
ad.setTitle("essai dialog");
ad.setMessage("Vous avez ouvert cette boite.");
ad.setPositiveButton("Go Back", new OnClickListener() {
    public void onClick(DialogInterface dialog, int arg1) {
    //traitement
    }
});
ad.setNegativeButton("Move Forward", new OnClickListener(){
    public void onClick(DialogInterface dialog, int arg1) {
    // Do nothing
    }
});
//empeche le retour arriere et execute le listener
ad.setCancelable(false);
ad.setOnCancelListener(new OnCancelListener() {
    public void onCancel(DialogInterface dialog) {
                    // do nothing
    }
}); 
ad.show();

.
X
 
 
 
 
 

You havecharacters left.