Autore Topic: [facile] Grafica semplice tramite Canvas  (Letto 17799 volte)

Offline Qlimax

  • Moderatore globale
  • Utente senior
  • *****
  • Post: 757
  • Respect: +202
    • Google+
    • _Qlimax
    • Mostra profilo
    • www.egsolutions.ch
  • Dispositivo Android:
    Galaxy Nexus - Nexus One - Wildfire - Magic
  • Play Store ID:
    egsolutions.ch
  • Sistema operativo:
    Ubuntu 12.04, Windows 7
[facile] Grafica semplice tramite Canvas
« il: 29 Novembre 2010, 23:20:10 CET »
+5
Livello di difficoltà: facile
Versione SDK utilizzata: 1.6
Link al file compresso del progetto eclipse: allegato

Questo tutorial, mostra come creare della grafica semplice.



Estendendo una view, andiamo a fare l'override del metodo onDraw (che disegna la view)
Il metodo onDraw viene successivamente  chiamato tramite invalidate(). In modo tale si aggiorna la grafica della view.
Codice (Java): [Seleziona]
public class CustomView extends View {

        Bitmap mBmp;
        Random mRnd;
        Paint mPaint;
       
        int w,h,bw,bh;
        int px=-1,py=-1;
        public CustomView(Context context, AttributeSet attrs) {
                super(context, attrs);
               
                mBmp=BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);      //carichiamo l'immagine in una bitmap
                bw=mBmp.getWidth(); //larghezza bitmap
                bh=mBmp.getHeight();//altezza  
                mPaint=new Paint(); // pennello
                mPaint.setColor(Color.CYAN);     
                mPaint.setAntiAlias(true);
                mRnd=new Random();
               
        }
       
       
        @Override
        protected void onDraw(Canvas canvas) {
                // TODO Auto-generated method stub
                super.onDraw(canvas);
               
               
                if(px==-1&&py==-1){ // se non abbiamo ancora settato le coordinate, posizioniamo la bmp al centro
                        px=w/2-bw/2; //metà della larghezza view, meno metà della figura
                        py=h/2-bh/2; //metà dell'altezza view, meno metà della figura
                }
                               
               
                canvas.drawCircle(px+(bw/2), py+(bh/2), 70, mPaint); //disegnamo un cerchio con centro al centro della bitmap
                canvas.drawBitmap( // disegnamo la bitmap
                                mBmp,
                                px,
                                py,
                                null);
               
               
        }
       
       
        public void updatePosition(){          
                //posizione random x,y della bitmap all interno della view
                px=mRnd.nextInt(w-bw);
                py=mRnd.nextInt(h-bh);
                invalidate();
        }
       
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
                //registriamo le dimensioni della view
                w=MeasureSpec.getSize(widthMeasureSpec);
                h=MeasureSpec.getSize(heightMeasureSpec);
                setMeasuredDimension(w,h);
        }
       

}

Interagiamo con la nostra CustomView tramite un bottone:
Codice (Java): [Seleziona]
public class MainActivity extends Activity {
        CustomView cv;
        Handler updateCvHandler;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        cv=(CustomView)findViewById(R.id.customView);
        Button b=(Button)findViewById(R.id.Button01);
        b.setOnClickListener(new OnClickListener() {                   
                        @Override
                        public void onClick(View v) {                          
                                        cv.updatePosition();
                                       
                        }
                });
    }
}

Come inserire la CustomView nell'xml di layout:
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <Button
                android:text="Cambia Posizione"
                android:id="@+id/Button01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
        </Button>

        <ch.egsolutions.canvasdrawing.CustomView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:id="@+id/customView" />

</LinearLayout>

Enjoy ;)

Qlimax

Offline thejungle

  • Nuovo arrivato
  • *
  • Post: 26
  • Respect: +1
    • Mostra profilo
  • Sistema operativo:
    Windows 7
Re:[facile] Grafica semplice tramite Canvas
« Risposta #1 il: 03 Aprile 2011, 11:57:48 CEST »
0
Ottimo tutorial Qlimax. Ma come mai appena inserisco uno scrollView l'immagine non viene più visualizzata?

Offline Qlimax

  • Moderatore globale
  • Utente senior
  • *****
  • Post: 757
  • Respect: +202
    • Google+
    • _Qlimax
    • Mostra profilo
    • www.egsolutions.ch
  • Dispositivo Android:
    Galaxy Nexus - Nexus One - Wildfire - Magic
  • Play Store ID:
    egsolutions.ch
  • Sistema operativo:
    Ubuntu 12.04, Windows 7
Re:[facile] Grafica semplice tramite Canvas
« Risposta #2 il: 04 Aprile 2011, 11:22:57 CEST »
0
Dove e come hai inserito la ScrollView ?
Puoi postare l'xml del tuo layout?

Offline thejungle

  • Nuovo arrivato
  • *
  • Post: 26
  • Respect: +1
    • Mostra profilo
  • Sistema operativo:
    Windows 7
Re:[facile] Grafica semplice tramite Canvas
« Risposta #3 il: 07 Aprile 2011, 14:35:55 CEST »
0
ciao purtroppo non ho più il codice ma avevo provato ad inserirlo sia fuori dal layout che dentro.

Offline belalugosi

  • Utente junior
  • **
  • Post: 52
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    galaxy
  • Sistema operativo:
    Minuetos
Re:[facile] Grafica semplice tramite Canvas
« Risposta #4 il: 18 Aprile 2011, 10:21:02 CEST »
0
Ciao. Forse questo è il tutorial che cercavo.
Ho un problem pero'. Eclipse mi dice
The following classes could not be found:
- CustomView
la classe l'ho creata

Manca qualcosa nel codice riportato per cui questo messaggio potrebbe sparire ?
Grazie

Offline 7h38ugg3r

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1200
  • Respect: +133
    • riccardofischetti
    • th38ugg3r
    • @7h38ugg3r
    • Mostra profilo
  • Dispositivo Android:
    Galaxy-S GT I-9000/ ASUS Eee Pad Transformer
  • Play Store ID:
    Riccardo Fischetti
  • Sistema operativo:
    OS X Lion / Linux Mint 11 (Katya)
Re:[facile] Grafica semplice tramite Canvas
« Risposta #5 il: 18 Aprile 2011, 11:40:47 CEST »
0
Probabilmente hai bisogno di importarti i package che ti servono (in questo caso quello della tua CustomView), visto che nell'esempio non vengono riportati.
7h38ugg3r<=>thebugger
Non conosci Java? Allora sei nel posto sbagliato!

http://www.androidpatterns.com/

Offline belalugosi

  • Utente junior
  • **
  • Post: 52
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    galaxy
  • Sistema operativo:
    Minuetos
Re:[facile] Grafica semplice tramite Canvas
« Risposta #6 il: 18 Aprile 2011, 11:49:32 CEST »
0
c'e' tutto
altrimenti avrei altri errori.

Offline 7h38ugg3r

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1200
  • Respect: +133
    • riccardofischetti
    • th38ugg3r
    • @7h38ugg3r
    • Mostra profilo
  • Dispositivo Android:
    Galaxy-S GT I-9000/ ASUS Eee Pad Transformer
  • Play Store ID:
    Riccardo Fischetti
  • Sistema operativo:
    OS X Lion / Linux Mint 11 (Katya)
Re:[facile] Grafica semplice tramite Canvas
« Risposta #7 il: 18 Aprile 2011, 12:16:18 CEST »
0
il package di CustomView è ch.egsolutions.canvasdrawing?
Perché nel file xml lui lo cerca con questo package.
7h38ugg3r<=>thebugger
Non conosci Java? Allora sei nel posto sbagliato!

http://www.androidpatterns.com/

Offline belalugosi

  • Utente junior
  • **
  • Post: 52
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    galaxy
  • Sistema operativo:
    Minuetos
Re:[facile] Grafica semplice tramite Canvas
« Risposta #8 il: 18 Aprile 2011, 17:02:05 CEST »
0
Prima di proseguire volevo chiederti una cosa.

A me serve avere un normalissimo layout con la possibilita di visualizzare uno sfondo, del testo 'textView',  posizionare immagine con una 'imageView' e di poter disegnare su questo sfondo cerchi, rettangoli ecc.

Questo tutorial fa questo ?

Grazie

Offline 7h38ugg3r

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1200
  • Respect: +133
    • riccardofischetti
    • th38ugg3r
    • @7h38ugg3r
    • Mostra profilo
  • Dispositivo Android:
    Galaxy-S GT I-9000/ ASUS Eee Pad Transformer
  • Play Store ID:
    Riccardo Fischetti
  • Sistema operativo:
    OS X Lion / Linux Mint 11 (Katya)
Re:[facile] Grafica semplice tramite Canvas
« Risposta #9 il: 18 Aprile 2011, 17:16:39 CEST »
0
no.
Questo tutorial ti dimostra come creare una view personalizzata e gestirne il metodo onDraw per poter disegnare quello che vuoi, come vuoi tu.
Per fare quello che chiedi, ti basta un semplice layout (linear va bene) nel quale setti il tuo sfondo.
Dopodiché inserisci una ImageView ed una TextView.

Tutto quì.
7h38ugg3r<=>thebugger
Non conosci Java? Allora sei nel posto sbagliato!

http://www.androidpatterns.com/

Offline belalugosi

  • Utente junior
  • **
  • Post: 52
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    galaxy
  • Sistema operativo:
    Minuetos
Re:[facile] Grafica semplice tramite Canvas
« Risposta #10 il: 18 Aprile 2011, 17:38:27 CEST »
0
Sì lo avevo fatto ma necessito di disegnare dei cerchi e dei rettangoli.
E tutti i tutorial che mostrano questo genere di cose, non lo fanno mai su un layout normalissimo.
Non riesco a capire come poterlo fare.

Abbi pazienza ma mi sto rimettendo a programmare dopo troppi anni di fermo.

Grazie

Offline 7h38ugg3r

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1200
  • Respect: +133
    • riccardofischetti
    • th38ugg3r
    • @7h38ugg3r
    • Mostra profilo
  • Dispositivo Android:
    Galaxy-S GT I-9000/ ASUS Eee Pad Transformer
  • Play Store ID:
    Riccardo Fischetti
  • Sistema operativo:
    OS X Lion / Linux Mint 11 (Katya)
Re:[facile] Grafica semplice tramite Canvas
« Risposta #11 il: 19 Aprile 2011, 08:54:57 CEST »
0
Prova ad utilizzare un FrameLayout in cui inserisci la tua customview.
Dopodiché aggiungi anche le altre view (imageview e textview) allo stesso layout.
Successivamente, definisci lo "z-index" di ognuno di loro, cioè setti quale deve essere stampato prima, come una serie di fogli.
Se quello che metti davanti a tutti è trasparente, permetterà di vedere cosa c'è sotto.
Nel tuo caso, puoi mettere la tua customview sopra tutti e nel metodo onDraw della stessa utilizzi il trasparente come colore di riempimento del canvas, in modo che la imageview e la textview si vedano.
7h38ugg3r<=>thebugger
Non conosci Java? Allora sei nel posto sbagliato!

http://www.androidpatterns.com/

Offline belalugosi

  • Utente junior
  • **
  • Post: 52
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    galaxy
  • Sistema operativo:
    Minuetos
Re:[facile] Grafica semplice tramite Canvas
« Risposta #12 il: 19 Aprile 2011, 13:20:13 CEST »
0
ok grazie
provero' a sperimentare

ciao
 :-)

Offline Schiavi91

  • Nuovo arrivato
  • *
  • Post: 20
  • Respect: 0
    • Mostra profilo
Re:[facile] Grafica semplice tramite Canvas
« Risposta #13 il: 08 Giugno 2011, 10:47:25 CEST »
0
Ciao, io non riesco a capire la riga di codice:

mBmp=BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);

Qualcuno me la può spiegare?
Non riesco a capire da dove prenda l'immagine e con che nome?

Grazie in anticipo... Ottima guida...

Non riesco a farlo andare comunque...
« Ultima modifica: 09 Giugno 2011, 09:32:59 CEST da Schiavi91 »

Offline 7h38ugg3r

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1200
  • Respect: +133
    • riccardofischetti
    • th38ugg3r
    • @7h38ugg3r
    • Mostra profilo
  • Dispositivo Android:
    Galaxy-S GT I-9000/ ASUS Eee Pad Transformer
  • Play Store ID:
    Riccardo Fischetti
  • Sistema operativo:
    OS X Lion / Linux Mint 11 (Katya)
Re:[facile] Grafica semplice tramite Canvas
« Risposta #14 il: 09 Giugno 2011, 13:36:24 CEST »
0
prende il file presente in drawable, denominato icon.
7h38ugg3r<=>thebugger
Non conosci Java? Allora sei nel posto sbagliato!

http://www.androidpatterns.com/