¿cómo hacer componentes en Android?

¿cómo hacer componentes en Android?

En nuestra búsqueda del conocimiento nos hemos encontrado nuevamente con la necesidad de hacer algún componente en Android.

La verdad no es tan complicado al inicio, pero si ya se empieza a involucrar más y querer hacer algo con canvas, es donde (en lo personal) me empece a entorpecer.

Como programador el concepto que conozco de “componente”, es para Android una “vista”; y es ahí donde inicia este post.

Vamos a hacer un simple componente que sea un círculo y que tenga el fondo de color azul.

Primero creamos una clase que herede de la clase “View”.

package mx.com.qbit;
 
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
 
/**
 * Created by Soid on 24/04/2015.
 */
public class MyOwnComponent   extends View {
    private final RectF rectF = new RectF();
    private static final float PADDING = 4;
    private float padding;
    private Bitmap bitmap;
    private Paint paintBackground = new Paint();
 
    public MyOwnComponent(Context context, AttributeSet attrs) {
        super(context, attrs);
        Resources r = context.getResources();
        float scale = r.getDisplayMetrics().density;
        padding = scale * PADDING ;
        paintBackground.setColor(Color.BLUE);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(bitmap, getWidth() / 2 - bitmap.getWidth() / 2,
                getHeight() / 2 - bitmap.getHeight() / 2, null);
    }
 
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        float bitmapWidth = h - 2 * padding;
        float bitmapHeight = h - 2 * padding;
        rectF.set(0, 0, bitmapWidth, bitmapHeight);
        updateBitmap();
    }
 
    private void updateBitmap() {
        if (rectF.width() == 0) {
            return;
        }
 
        bitmap = Bitmap.createBitmap((int) rectF.width(), (int) rectF.height(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawArc(rectF, -90, 360, true, paintBackground);
 
        postInvalidate();
    }
}

Por último en el “layout” agregamos la referencia al componente

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">
 
    <mx.com.qbit.MyOwnComponent
        android:id="@+id/sign_in_minute_hand"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center_horizontal|center_vertical"
        />
 
</LinearLayout>

Ahora ejecutamos y vemos el resultado.
Post

El próximo post se tratará de como agregar propiedades a éste componente.

Analista/Desarrollador y cofundador de QBit Mexhico. Tecnologías utilizadas Android, Java (EJB, Servlets, Faces, Groovy & Grails, Maven, Swing), .Net (C#, VB, ASP, MVC), Delphi, Spring, Hibernate, DTSx, Oracle, T-SQL, Firebird, MySQL, MongoDB, NodeJs, ReactJs (Flux). Sistemas Operativos Mac, Ubuntu y Windows.

Twitter LinkedIn 

Compartir en...Tweet about this on TwitterPin on Pinterest0Share on LinkedIn0Share on Google+0Share on Facebook1