Cerca con Google

Translate

23 giugno 2011

Tutorial 16 - Utilizzare l'elemento ImageSprite al posto dell'elemento Button


Come abbiamo visto nel Tutorial 15 possiamo usare un immagine come sfondo per i nostri pulsanti in App Inventor.
Il risultato sarà sicuramente soddisfacente ma, sfortunatamente, in alcune situazioni potrà capitare che l'allineamento dei nostri pulsanti risulti molto difficoltoso (se non a volte impossibile).

Ecco allora che si può utilizzare un altro trucchetto per simulare un pulsante (Button), il componente da utilizzare si trova nella palette Animation ed è chiamato ImageSprite.

ImageSprite va utilizzato solamente all'interno di un Canvas (elemento che abbiamo visto nel Tutorial di PaintPot), ed è per questo che suggerisco di utilizzare questo accorgimento per applicazioni dove l'aspetto grafico è di fondamentale importanza.




Un esempio può essere un'applicazione di tipo commerciale dove vogliamo pubblicizzare dei prodotti o dei servizi e dove è quindi necessario prima di tutto soddisfare "l'occhio" di chi userà l'app!

A voi quindi la scelta se utilizzare o meno questo questo metodo nella realizzazione dei pulsanti nelle vostre app.
Buona visione!!!



Riporto per comodità anche in questo post due siti suggeriti per la creazione in maniera del tutto gratuita dei pulsanti per la vostra app:

http://www.buttongenerator.com/
http://www.mycoolbutton.com/3d-free-button-generator.php

Il sorgente del progetto lo trovate invece qui

17 commenti:

  1. Sempre ottimi video, una domanda molto stupida, ma che combinazioni di tasti bisogna usare per fare la copia degli elementi , ho provato di tutto ma mi si spostano solo e non riesco a copiarli.
    Grazie ancora.

    RispondiElimina
  2. Ciao, ti seguo da un po' e grazie a te ho iniziato a muovere i primi passi con appiventor. Sto provando a realizzare una applicazione per divertimento ma mi trovo di fronte ad un problema. Seguendo la tua guida ho realizzato il canvas per rendere più gradevole la grafica dell'applicazione ma ho notato non che si può effettuare lo scroll della pagina in quanto il canvas blocca questa funzione. Che tu sappia si può risolvere in qualche modo ?? Ciao e un grazie in anticipo.

    RispondiElimina
  3. ciao,
    complimenti per i tutorial sempre semplici da capire ed esaurienti.Ti volevo chiedere se è possibile usare questo "trucco" anche per le label oltre che per i button.
    grazie

    RispondiElimina
    Risposte
    1. Le label non hanno una "properties" "Image" e quindi non è possibile cambiarci lo sfondo come in questo tutorial.

      Elimina
    2. BASTA CHE CREI UN BUTTON E NON LO PROGRAMMI è LA STESSA COSA

      Elimina
  4. Una domanda stupida, c'è il link per scaricare il tuo sorgente, ma in locale dove lo posiziono? E come lo visualizzo?
    Ciao Manuel

    RispondiElimina
    Risposte
    1. Lo salvi il locale come file .zip,
      poi lo carichi in App Inventor dalla schermata dei tuoi progetti,
      Puoi guardare il Tutorial 5 se hai ancora problemi ma è davvero semplice:

      http://seblogapps.blogspot.com/2011/04/tutorial-5-condividere-e-importare-le.html

      Elimina
  5. Ciao,
    sto facendo una piccola app per il simulatore di volo che utilizzo e sto usando proprio gli imagesprite come bottoni ma mi trovo con un sacco di problemi per quanto riguarda la risoluzione.. praticamente ho un pannello con dei pulsanti che e' lo sfondo del mio Canvas: da questa immagine iniziale ho preso i vari bottoncini e copiati in nuovi file che poi daro' come sfondo ai vari imagesprite che, poi, vengono piazzati sopra lo sfondo del canvas. Il problema e' che su emulatore ho un certo risultato, su smartphone (sgs3) altro risultato, su tablet altro risultato e fa si' che i vari imagesprite siano, su ogni terminale, sparsi senza senso per il canvas..

    ho provato a cercare in giro ma piu' o meno tutti dicono "ci pensa l'autoresize per le risoluzioni delle immagini" e questo e' vero, pero' quando si ha a che fare con bottoni creati dallo stesso sfondo, si capisce che o anche i bottoni vengono sistemati in automatico oppure si rompe tutto il gioco..

    consigli?

    grazie mille

    saluti

    RispondiElimina
    Risposte
    1. ciao,purtroppo è una delle cose più rognose di AI, la gestione delle grafica su schermi con risoluzioni diverse,
      l'unica soluzione se proprio vuoi usare canvas e imagesprite (perchè magari non riesci ad utilizzare un immagine di sfondo e dei pulsanti normali su cui carichi delle immagini)
      è quella di fare riscalare gli elementi tramite calcoli matematici da fare nel blocks editor all'evento screen initialize.
      Questo perchè se guardi stampando i valori di "height" e "width" dell'elemento screen, questo riporta valori diversi a seconda del telefono su cui gira l'app.
      Quindi devi poi riscalare e posizionare tutti gli altri elementi in base alla lettura dei valori di altezza e larghezza dello schermo su cui in quel momento gira l'app.
      Per farti un esempio puoi posizionare un imagesprite alle cordinate X,Y che calcoli a partire dalle dimensioni dello schermo.
      Ad esempio potresti voler posizionare la coordinata X dell'imagesprite sempre al 20% dello schermo,
      quindi in screen initialize imposterai il valore di imagesprite.X = screen.width*0,2
      in questo modo capisci che se la larghezza dello schermo è 400px metterà lo sprite alla coordinata 80
      mentre se lo schermo è largo 200px lo metterà alla coordinata 40
      Il problema ovviamente è quello di calcolare con precisione in anticipo tutte queste percentuali, se la tua idea è quella di avere un posizionamento "a pixel" degli elementi mi sa che rischi di diventare vecchio prima di fare tutto correttamente :)
      Altra prova veloce che puoi fare è quella di passare il tuo apk con marketizer, in alcuni casi riesce a riscalare da solo i componenti in maniera "sufficiente" (dipende sempre dalle esigenze di ognuno)
      fammi sapere come risolvi, ciao

      Elimina
  6. Ciao, mi potresti esspore la procedura per aprire una pag web premendo su una ImagaSprite perchè non riesco. Grazie in anticipo :)

    RispondiElimina
    Risposte
    1. su evento "imagesprite1.touched" devi far partire un activitystarter con i parametri giusti, ovvero devi mettere:
      Action: android.intent.action.VIEW
      DataUri: http://www.facebook.com

      ovviamente nel DataUri metti il sito che vuoi aprire,
      e poi lanci l'activity con
      "startActivity"

      Elimina
  7. Ciao Sebastiano! Complimenti vivissime per la tua voglia di spiegarci a programmare e per gli utilissimi tutorial che crei!!!
    Sto smanettando su una semplicissima App che mi apra Facebook quando tocco l'ImageSprite, riesco ad aprire sia l'app presente sul telefono, sia aprire il browser web alla pagina indicata, però non riesco a creare un blocco di istruzioni che:
    1) Tenti di aprire per prima l'app di facebook installata sul cellulare, se presente.
    2)Nel caso non sia presente apra il browser web all'indirizzo indicato, senza dare messaggi di errore.
    Utilizzerei un blocco "if", ma non riesco a trovare una funzione che mi dica quando la App non è installata in modo da metterla nel comando "do" del blocco if, modo che nel then possa dirgli di aprire il browser.
    Spero di essere stato chiaro, grazie mille in anticipo dell'aiuto!

    RispondiElimina
    Risposte
    1. devi usare il metodo che trovi nell'activitystarter:
      ResolveActivity()
      Returns the name of the activity that corresponds to this ActivityStarer, or an empty string if no corresponding activity can be found.

      come vedi tu chiedi se esiste il package, se esiste ti ritorna il suo nome, se invece restituisce una stringa vuota vuol dire che l'app non è installata
      quindi è questa la condizione che devi mettere nella tua if :)

      Elimina
    2. Perfetto grazie mille è proprio ciò che cercavo!!!
      Ora però mi sono incasinato un'altra volta, voglio aprire una specifica pagina di Facebook. Ora ho inserito:
      - Action: android.intent.action.MAIN
      - ActivityClass: com.facebook.katana.ProfilesTabHostActivity
      - ActivityPackage: com.facebook.katana
      e poi nel blocco dell'immageSprite il data uri che punta a: fb://pages/pages/ID_Pagina
      Ma mi da il solito errore 601, ho provato a cercare per tutto il pomeriggio su siti e forum ma non riesco a saltarne fuori.Sapresti dirmi dove sbaglio?
      Grazie mille e scusa ancora per il disturbo:

      Elimina
    3. Ciao Alex, ho il tuo stesso problema cioè aprire una specifica pagina di Facebook nell'app del dispositivo o in alternativa (...se non dovesse essere installata) nel browser. Al momento riesco ad aprire solo la mia pagina fb, non una in particolare.Tu hai risolto in qualche modo oppure no??? Grazie dell'eventuale aiuto

      Elimina
    4. Per questo genere di richieste vi consiglio il forum dove potete creare una discussione apposita.
      Secondo me è un pò strana la classe che usate:
      com.facebook.katana.ProfilesTabHostActivity
      O eseguite un tracciament con logCat aperto e vedete che succede quando andate ad una pagina specifica, oppure guardate qui alcuni suggerimenti:
      http://stackoverflow.com/questions/4810803/open-facebook-page-from-android-app
      per implementare lo stesso activitystarter in AI dovete creare un url simile a quello indicato
      però con android.intent.action.VIEW
      e passare l'uri come :
      fb://facewebmodal/f?href=seblogapps
      (ovviamente "seblogapps" va sostituito con la pagina che vi interessa,
      provate e fatemi sapere


      Elimina
  8. Ciao Sebastiano, vorrei creare un bottone che premuto una volta fa muovete una immagine,premuto una seconda volta la ferma e premuto una terza volta la fa tornare al punto di partenza. Questi movimenti l'ho creati con tre diversi bottoni. Sarebbe utile se posso ottenere lo stesso risultato con un solo button. Grazie anticipatamente per la eventuale risposta.

    RispondiElimina