J-Communicator: creazione di layout differenziati per le immagini normali e le immagini-categoria

Eravamo rimasti allo scaricamento del database per formare le immagini inserite nella schermata principale.
In questo metodo, LeggiDaDatabase, dopo il refresh della schermata ad opera di refreshScreen() (che potrei benissimo incorporare in questo metodo, e nel quale l'esecuzione di LeggiDaDatabase è circondata da un try...catch per motivi che ora mi sfuggono), usa in questa mia ricostruzione una view:

    private void leggiDaDatabase(String categoria){
        Cursor crs=helper.query(categoria);
        do{
            View view=new View(this);
            RelativeLayout.LayoutParams params= new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
            params.topMargin=crs.getInt(6);
            params.leftMargin=crs.getInt(5);
            view.setLayoutParams(params);
            view.setBackgroundResource(R.drawable.forma);
            mainLayout.addView(view);
        } while(crs.moveToNext());
    }

Bene, io adesso voglio usare una classe che estenda il LinearLayout. Nella versione originale era usato un LinearLayout, mentre adesso userei due classi derivate di LinearLayout, diverse a seconda che il record letto in questo momento riguardi un'immagine normale o un'immagine-categoria.
L'informazione sul tipo la ottengo dal campo TIPO, che è il numero 4 del record.

Ci provo...

Intanto mi devo preparare le due classi derivate da LinearLayout, come ho fatto precedentemente nel mio esperimento.
Questa è la creazione di NormalLayout, per le immagini semplici:

public class normalLayout extends LinearLayout {
    Paint paint;
    Context context;
    public normalLayout(Context context) {
        super(context);
        this.context=context;
        paint=new Paint();
        
    }
    
    @Override 
    protected void onDraw(Canvas canvas){
        int bordo=5;
        super.onDraw(canvas);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.GRAY);
        canvas.drawRect(0,0,getWidth(),getHeight(),paint);
        paint.setColor(Color.WHITE);
        canvas.drawRect(bordo,bordo,getWidth()-bordo,getHeight()-bordo,paint);
    }
}

Vediamo se funziona o se ho trascurato qualcosa...

Avevo trascurato setWillNotDraw(false) oltre a non aver tolto qualche comando precedente un po' campato in aria nel metodo LeggiDaDatabase, e ora funziona.
Ecco il codice definitivo di NormalLayout:

public class NormalLayout extends LinearLayout {
    Paint paint;
    Context context;
    public NormalLayout(Context context) {
        super(context);
        setWillNotDraw(false);
        this.context=context;
        paint=new Paint();

    }

    @Override
    protected void onDraw(Canvas canvas){
        int bordo=5;
        super.onDraw(canvas);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.GRAY);
        canvas.drawRect(0,0,getWidth(),getHeight(),paint);
        paint.setColor(Color.WHITE);
        canvas.drawRect(bordo,bordo,getWidth()-bordo,getHeight()-bordo,paint);
    }
}

Ora però devo impostare anche un codice per CategoryLayout.
Ci provo...

public class CategoryLayout extends LinearLayout{
    Paint paint;
    Context context;
    public CategoryLayout(Context context) {
        super(context);
        this.context = context;
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        int bordo=5;
    
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.GRAY);
        
        //rettangolo principale
        canvas.drawRect(0,30,getWidth(),getHeight(),paint);

        //linguetta
        canvas.drawRect(0,0,(float)(getWidth()*.4),100,paint);


        paint.setColor(Color.WHITE);

        //rettangolo principale interno
        canvas.drawRect(bordo,30+bordo,getWidth()-bordo,getHeight()-bordo,paint);

        //linguetta interna
        canvas.drawRect(bordo,bordo,(float)(getWidth()*.4-bordo),100,paint);

    }
}

Sperimentiamolo, attribuendolo senza alcun criterio...

Sì, mi sono venute fuori delle "cartelle", ma un po' sproporzionate.
Evidentemente non ho reso in percentuale le cose nel modo giusto.
Ci studio un po'...

Ecco, per il momento sono riuscito a creare i rettangoli esterni della cartella:

public class CategoryLayout extends LinearLayout{
    Paint paint;
    Context context;
    public CategoryLayout(Context context) {
        super(context);
        setWillNotDraw(false);
        this.context = context;
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        int bordo=5;

        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.GRAY);

        //qui devo stabilire la percentuale delle misure della linguetta
        //rispetto a quelle della cartella.
        //altezza linguetta=20%, larghezza linguetta=30% mi sembra ragionevole.
        //iniziamo con le cartelle esterne.

        //cartella rettangolo esterno: le misure iniziali sono 0 e altezza 20%:
        float cartTop=(float)(getHeight()*.2);
        canvas.drawRect(0,cartTop,getWidth(),getHeight(),paint);

        //linguetta rettangolo esterno: le misure iniziali zono 0, 0
        //mentre quelle finali sono larghezza 30% e arbitraria.ma possiamo anche eguagliarla
        // a cartTop per evitare che con cartelle molto piccole possa sporgere dall'altra parte
        float lingRight=(float)(getWidth()*.5);
        float lingBottom=cartTop;
        canvas.drawRect(0,0,lingRight,lingBottom,paint);
    }
}

Adesso diamo fondo ai rettangoli interni:

Ecco il codice completo:

public class CategoryLayout extends LinearLayout{
    Paint paint;
    Context context;
    public CategoryLayout(Context context) {
        super(context);
        setWillNotDraw(false);
        this.context = context;
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        int bordo=5;

        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.GRAY);

        //rettangoli esterni
        float cartTop=(float)(getHeight()*.15);
        canvas.drawRect(0,cartTop,getWidth(),getHeight(),paint);
        float lingRight=(float)(getWidth()*.5);
        float lingBottom=cartTop;
        canvas.drawRect(0,0,lingRight,lingBottom,paint);

        //rettangoli interni
        paint.setColor(Color.WHITE);
        canvas.drawRect(bordo,cartTop+bordo,getWidth()-bordo,getHeight()-bordo,paint);
        canvas.drawRect(bordo,bordo,lingRight-bordo,lingBottom+bordo,paint);
    }
}

Abbiamo alcuni punti sui quali possiamo far leva per determinare l'aspetto delle nostre cartelle.

• bordo, che sarebbe lo spessore del bordo desiderato;
• cartTop, in cui variando il numero si agisce sulla percentuale in altezza della linguetta rispetto alla cartella;
• lingRight, in cui variando il numero si agisce sulla percentuale in larghezza della linguetta rispetto alla cartella.

in questo modo sarà più facile rimettere le mani sul codice qualora non dovessi essere soddisfatto dell'aspetto e delle dimensioni della cartella.
Ecco il risultato grafico:

Ora ci giocherello un po': agendo su quei parametri, per assurdo, voglio una linguetta alta la metà dell'altezza totale del layout:

Ora riporto la linguetta al 15% di altezza, ma la voglio al 10% di larghezza rispetto alla cartella anziché al 50%:

Ci è rimasto solo il bordo!

Portiamole al 30%, una via di mezzo...

Ecco... Adesso dovremo usare l'uno o l'altro dei layout, NormalLayout o CategoryLayout, a seconda che il TIPO sia normale o categoria.