Android: componentes personalizados

Implementación de componentes propios en componentes preintegrados con subclase extensible con clase propia definida

Android ofrece una gran lista de widgets prediseñados como Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner, AutoCompleteTextView, etc.que puede usar directamente en el desarrollo de su aplicación de Android, pero puede haber una situación en la que esté no está satisfecho con la funcionalidad existente de ninguno de los widgets disponibles. Android le proporciona los medios para crear sus propios componentes personalizados que puede personalizar para satisfacer sus necesidades.

Si solo necesita hacer pequeños ajustes a un widget o diseño existente, simplemente puede crear una subclase del widget o diseño y anular sus métodos, lo que le dará un control preciso sobre la apariencia y función de un elemento de pantalla.

Este tutorial le explica cómo crear vistas personalizadas y usarlas en su aplicación mediante pasos sencillos y sencillos.

Ejemplo de componentes personalizados en la jerarquía de vistas personalizadas

Creación de un componente personalizado simple

Paso	Descripción
1	Utilizará Android Studio IDE para crear una aplicación de Android y nombrarla como myapplication en un paquete com.example.tutorialspoint7.myapplication como se explica en el capítulo Ejemplo de Hello World .
2	Cree un archivo XML res / values ​​/ attrs.xml para definir nuevos atributos junto con su tipo de datos.
3	Cree el archivo src / mainactivity.java y agregue el código para definir su componente personalizado
4	Modifique el archivo res / layout / activity_main.xml y agregue el código para crear una instancia de vista compuesta de color junto con algunos atributos predeterminados y nuevos atributos.
5	Ejecute la aplicación para iniciar el emulador de Android y verifique el resultado de los cambios realizados en la aplicación.

Cree el siguiente archivo de atributos llamado attrs.xml en su carpeta 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>

Cambie el archivo de diseño utilizado por la actividad por el siguiente.

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

Cree el siguiente archivo java llamado timeview para su vista compuesta.

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

Cambie su archivo java de actividad principal al siguiente código y ejecute su aplicación.

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

La aplicación en ejecución debería verse como la siguiente captura de pantalla.