Android - Composants personnalisés
Implémentation de ses propres composants dans des composants pré-intégrés avec extension de la sous-classe avec sa propre classe définie
Android propose une excellente liste de widgets prédéfinis tels que Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner, AutoCompleteTextView etc. que vous pouvez utiliser directement dans le développement de votre application Android, mais il peut y avoir une situation où vous êtes pas satisfait de la fonctionnalité existante de l'un des widgets disponibles. Android vous permet de créer vos propres composants personnalisés que vous pouvez personnaliser en fonction de vos besoins.
Si vous avez seulement besoin de faire de petits ajustements à un widget ou une mise en page existants, vous pouvez simplement sous-classer le widget ou la mise en page et remplacer ses méthodes, ce qui vous donnera un contrôle précis sur l'apparence et la fonction d'un élément d'écran.
Ce didacticiel vous explique comment créer des vues personnalisées et les utiliser dans votre application à l'aide d'étapes simples et faciles.
Exemple de composants personnalisés dans la hiérarchie de vues personnalisées
Création d'un composant personnalisé simple
| Étape | La description |
|---|---|
| 1 | Vous utiliserez l'IDE de studio Android pour créer une application Android et la nommerez myapplication sous un package com.example.tutorialspoint7.myapplication comme expliqué dans le chapitre Exemple de Hello World . |
| 2 | Créez un fichier XML res / values / attrs.xml pour définir de nouveaux attributs avec leur type de données. |
| 3 | Créez le fichier src / mainactivity.java et ajoutez le code pour définir votre composant personnalisé |
| 4 | Modifiez le fichier res / layout / activity_main.xml et ajoutez le code pour créer une instance de vue composée de couleur avec quelques attributs par défaut et de nouveaux attributs. |
| 5 | Exécutez l'application pour lancer l'émulateur Android et vérifier le résultat des modifications effectuées dans l'application. |
Créez le fichier d'attributs suivant appelé attrs.xml dans votre dossier res / values.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TimeView">
<declare-styleable name="TimeView">
<attr name="title" format="string" />
<attr name="setColor" format="boolean"/>
</declare-styleable>
</declare-styleable>
</resources>Modifiez le fichier de mise en page utilisé par l'activité comme suit.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<com.example.tutorialspoint7.myapplication.TimeView
android:id="@+id/timeView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="40sp"
custom:title="my time view"
custom:setColor="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/simple"
android:layout_below="@id/timeView"
android:layout_marginTop="10dp" />
</RelativeLayout>Créez le fichier java suivant appelé timeview pour votre vue composée.
package com.example.tutorialspoint7.myapplication;
/**
* Created by TutorialsPoint7 on 9/14/2016.
*/
import java.text.SimpleDateFormat;
import java.util.Calendar;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.TextView;
public class TimeView extends TextView {
private String titleText;
private boolean color;
public TimeView(Context context) {
super(context);
setTimeView();
}
public TimeView(Context context, AttributeSet attrs) {
super(context, attrs);
// retrieved values correspond to the positions of the attributes
TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.TimeView);
int count = typedArray.getIndexCount();
try{
for (int i = 0; i < count; ++i) {
int attr = typedArray.getIndex(i);
// the attr corresponds to the title attribute
if(attr == R.styleable.TimeView_title) {
// set the text from the layout
titleText = typedArray.getString(attr);
setTimeView();
} else if(attr == R.styleable.TimeView_setColor) {
// set the color of the attr "setColor"
color = typedArray.getBoolean(attr, false);
decorateText();
}
}
}
// the recycle() will be executed obligatorily
finally {
// for reuse
typedArray.recycle();
}
}
public TimeView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setTimeView();
}
private void setTimeView() {
// has the format hour.minuits am/pm
SimpleDateFormat dateFormat = new SimpleDateFormat("hh.mm aa");
String time = dateFormat.format(Calendar.getInstance().getTime());
if(this.titleText != null )
setText(this.titleText+" "+time);
else
setText(time);
}
private void decorateText() {
// when we set setColor attribute to true in the XML layout
if(this.color == true){
// set the characteristics and the color of the shadow
setShadowLayer(4, 2, 2, Color.rgb(250, 00, 250));
setBackgroundColor(Color.CYAN);
} else {
setBackgroundColor(Color.RED);
}
}
}Modifiez votre fichier java d'activité principale avec le code suivant et exécutez votre application.
package com.example.tutorialspoint7.myapplication;
import android.os.Bundle;
import android.widget.TextView;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView simpleText = (TextView) findViewById(R.id.simple);
simpleText.setText("That is a simple TextView");
}
}L'application en cours d'exécution doit ressembler à la capture d'écran suivante.
