Android - Componenti personalizzati

Implementazione dei propri componenti in componenti predefiniti con estensione della sottoclasse con la propria classe definita

Android offre un ottimo elenco di widget predefiniti come Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner, AutoCompleteTextView ecc. Che puoi utilizzare direttamente nello sviluppo dell'applicazione Android, ma potrebbe esserci una situazione in cui lo sei non soddisfatto delle funzionalità esistenti di nessuno dei widget disponibili. Android ti offre i mezzi per creare i tuoi componenti personalizzati che puoi personalizzare in base alle tue esigenze.

Se hai solo bisogno di apportare piccole modifiche a un widget o layout esistente, puoi semplicemente sottoclassare il widget o il layout e sovrascrivere i suoi metodi che ti daranno un controllo preciso sull'aspetto e sulla funzione di un elemento dello schermo.

Questo tutorial spiega come creare visualizzazioni personalizzate e utilizzarle nella tua applicazione utilizzando passaggi semplici e facili.

Esempio di componenti personalizzati nella gerarchia della visualizzazione personalizzata

Creazione di un semplice componente personalizzato

Passo	Descrizione
1	Utilizzerai l'IDE di Android Studio per creare un'applicazione Android e denominarla come myapplication in un pacchetto com.example.tutorialspoint7.myapplication come spiegato nel capitolo Hello World Example .
2	Crea un file XML res / values ​​/ attrs.xml per definire nuovi attributi insieme al loro tipo di dati.
3	Crea il file src / mainactivity.java e aggiungi il codice per definire il tuo componente personalizzato
4	Modifica il file res / layout / activity_main.xml e aggiungi il codice per creare l'istanza della vista composta del colore insieme a pochi attributi predefiniti e nuovi attributi.
5	Esegui l'applicazione per avviare l'emulatore Android e verifica il risultato delle modifiche apportate nell'applicazione.

Crea il seguente file di attributi chiamato attrs.xml nella tua cartella 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>

Modificare il file di layout utilizzato dall'attività nel seguente.

<?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>

Crea il seguente file java chiamato timeview per la tua vista composta.

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);
      }
   }
}

Modificare il file java dell'attività principale con il codice seguente ed eseguire l'applicazione.

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'applicazione in esecuzione dovrebbe essere simile alla seguente schermata.