Autore Topic: Tool per UI complesse  (Letto 1292 volte)

Offline undead

  • Utente senior
  • ****
  • Post: 666
  • Respect: +113
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy S6
  • Play Store ID:
    DrKappa
  • Sistema operativo:
    Windows 10 64-bit, Windows 8.1 64-bit
Tool per UI complesse
« il: 27 Marzo 2013, 15:28:07 CET »
0
Sto cercando un tool,magari windows, che mi permetta di fare questo:

1- creare un documento di dimensione fissa (es. 480x800).
2- inserire degli oggetti in questo documento con precisione al pixel (es. un rettangolo/quadrato).
3- questi oggetti debbono essere riconoscibili con un nome che posso settare io o magari essendo questi delle immagini
4- ordinare questi oggetti con dei layer
5- esportare il tutto in un formato facilmente leggibile

Fondamentalmente mi serve una specie di gimp/photoshop che mi esporti in un formato leggibile e che mi mantenga degli oggetti "floating" con dei nomi che vengono esportati.

Qualcuno mi può aiutare?  ;-)

Offline bradipao

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 4043
  • keep it simple
  • Respect: +567
    • Github
    • Google+
    • bradipao
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Play Store ID:
    Bradipao
  • Sistema operativo:
    W7
Re:Tool per UI complesse
« Risposta #1 il: 27 Marzo 2013, 16:26:07 CET »
+1
Hai mai provato EVOLUS PENCIL ?

NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline undead

  • Utente senior
  • ****
  • Post: 666
  • Respect: +113
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy S6
  • Play Store ID:
    DrKappa
  • Sistema operativo:
    Windows 10 64-bit, Windows 8.1 64-bit
Re:Tool per UI complesse
« Risposta #2 il: 27 Marzo 2013, 18:28:44 CET »
0
Se non mi sbaglio l'avevi suggerito qualche settimana fa in un topic sugli screenshot delle applicazioni.
E' veramente molto bello e sta lì in bella vista sul desktop però le opzioni di esportazione non sembra facciano al caso mio.

In mancanza di altro pensavo di iniziare a lavorare su un importatore che leggesse i files prodotti da QT designer:

Qt Designer's UI File Format | Documentation | Qt Project

In passato mi ci sono trovato bene e anche se adesso devo fare una cosa abbastanza differente potrebbe valerne la pena, è un pò hackettoso ma esporta in xml, ha i layer, ha le proprietà custom ed è preciso al pixel.

In generale sto cercando di avere una "pipeline di produzione" degli asset più lineare possibile.
Nel caso specifico voglio far partire un programma su PC, posizionarmi i componenti della UI con precisione al pixel e poi dare il file esportato in pasto al mio framework così da caricare quell'interfaccia con una sola riga di codice.

Se avete altri suggerimenti su tool che possono aiutarmi sono ben accetti, perchè l'integrazione col QT designer è veramente un mezzo hack.

 :-)

Offline bradipao

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 4043
  • keep it simple
  • Respect: +567
    • Github
    • Google+
    • bradipao
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Play Store ID:
    Bradipao
  • Sistema operativo:
    W7
Re:Tool per UI complesse
« Risposta #3 il: 27 Marzo 2013, 19:01:12 CET »
0
In passato mi ci sono trovato bene e anche se adesso devo fare una cosa abbastanza differente potrebbe valerne la pena, è un pò hackettoso ma esporta in xml, ha i layer, ha le proprietà custom ed è preciso al pixel.

In generale sto cercando di avere una "pipeline di produzione" degli asset più lineare possibile.
Nel caso specifico voglio far partire un programma su PC, posizionarmi i componenti della UI con precisione al pixel e poi dare il file esportato in pasto al mio framework così da caricare quell'interfaccia con una sola riga di codice.

Il problema che vedo in questo approccio è che i layout per android malgeriscono i posizionamenti assoluti precisi al pixel. Quelli più efficenti sono posizionamenti relativi tra blocchi che vengono fatti ridimensionare in automatico al framework a seconda dello spazio disponibile sul display.

Comunque se trovi qualcosa di valido, non esitare a proporcelo.  :-)
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline undead

  • Utente senior
  • ****
  • Post: 666
  • Respect: +113
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy S6
  • Play Store ID:
    DrKappa
  • Sistema operativo:
    Windows 10 64-bit, Windows 8.1 64-bit
Re:Tool per UI complesse
« Risposta #4 il: 28 Marzo 2013, 11:48:14 CET »
0
Il problema che vedo in questo approccio è che i layout per android malgeriscono i posizionamenti assoluti precisi al pixel. Quelli più efficenti sono posizionamenti relativi tra blocchi che vengono fatti ridimensionare in automatico al framework a seconda dello spazio disponibile sul display.

Comunque se trovi qualcosa di valido, non esitare a proporcelo.  :-)
L'approccio classico per i layout da una parte è ottimo dall'altra secondo me genera confusione. E' ottimo per componenti "semplici" perchè sfrutta le peculiarità del sistema.
Se ho una lista di item la wrappo dentro una scrollview poi grossomodo sono tranquillo sia sul telefono fullhd che sul telefono 640x480.

Però se devo fare un controllo così:


E metterlo in un contesto del genere:


Questo è un GROSSO problema se decido di farlo con i componenti classici. A parte la mole di codice, a parte che sicuramente va lento, il problema è che impazzisci a posizionare ogni coponente
relativo a un altro componente o ad un frame. E la famosa pagina supporting multiple screens ti genera più confusione che altro.

Di fatto il problema nasce ancora prima di avere tutti questi controlli, nasce già se tu hai uno sfondo con degli elementi distintivi che non combacia con l'aspect ratio.

Io ti do una immagine X,Y e voglio che tu me la setti come sfondo, poi ti do un controllino semplice di dimensione X1,Y2 e voglio che tu me lo inserisca sopra all'immagine, in una certa posizione relativa.

Nel caso della seconda immagine io ti do lo "sfondo" del synth (che come vedi ha delle aree di colori differenti) e poi ti do una sola rotella (una delle due grosse rotellone a sinistra nella parte superiore rispetto alla tastiera). La rotella deve stare centrato nell'area grigia chiara di sfondo (che però è definita nell'altra immagine) ma deve anche essere allineata con un certo scostamento dal bordo del tablet.

Tecnicamente il modo in cui viene fatto (canvas, opengl es 1.0, opengl es 2.0) mi interessa poco... però non credo esista una alternativa sensata rispetto a lavorare al pixel.

Se vuoi posto un tutorial o una snippet :D

Offline Nicola_D

  • Moderatore
  • Utente storico
  • *****
  • Post: 2479
  • SBAGLIATO!
  • Respect: +323
    • Github
    • Google+
    • nicoladorigatti
    • Mostra profilo
  • Dispositivo Android:
    Nexus 6p, Nexus 4, Nexus S, Nexus 7(2012)
  • Sistema operativo:
    Windows 7
Re:Tool per UI complesse
« Risposta #5 il: 28 Marzo 2013, 11:55:39 CET »
0
puoi usare i dp invece che i pixel. Poi un'approcio secondo me sbagliato è mettere un'immagine di sfondo con le aree.
Se fai così sicuro che incorri in problemi.
Se invece dividi in "macroaree" il layout, poi ogni area ha il suo background ed il suo bordo, ed ogni elemento sta in posizione relativa alla sua macroarea ti semplifichi di tanto il lavoro di posizionamento.
Se hai esperienza in web, è come fare una serie di div "display:block","float:left" ecc....
IMPORTANTE:NON RISPONDO A PROBLEMI VIA MESSAGGIO PRIVATO
LOGCAT: Non sai cos'è? -> Android Debug Bridge | Android Developers
               Dov'è in Eclipse? -> Window -> Open Prospective -> DDMS e guarda in basso!
[Obbligatorio] Logcat, questo sconosciuto! (Gruppo AndDev.it LOGTFO) - Android Developers Italia

Offline undead

  • Utente senior
  • ****
  • Post: 666
  • Respect: +113
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy S6
  • Play Store ID:
    DrKappa
  • Sistema operativo:
    Windows 10 64-bit, Windows 8.1 64-bit
Re:Tool per UI complesse
« Risposta #6 il: 28 Marzo 2013, 12:26:44 CET »
0
Sono d'accordo però questo approccio ha due problemi.

Il primo problema, banalmente, è che se tu vai da un grafico e questo ti fa uno sfondo da urlo alla fine potrebbe non essere possibile dividerlo in macroaree.
Per evitare allineamenti non perfetti potresti essere costretto a mettere tante macroaree con all'interno delle microaree. Un lavoraccio.

Il secondo problema è che non preservi l'aspect ratio: un device come l'S4 ha un aspect ratio di 1,77 un S2 ha un aspect ratio di 1,66.
La differenza può sembrare piccola (ed è piccola) ma il look della app cambia da device a device.

Ovviamente (ma questo è successivo) hai un terzo problema all'orizzonte: se dopo che hai fatto tutti controlli come nella seconda immagine ti accorgi che va piano e dovresti usare opengl.. a quel punto sei fregato perchè prendi tutto il lavoro e lo butti via. Sei al punto di partenza perchè con una telecamera con proiezione ortogonale e dei poligoni non ci sono layout relativi che tengano.

Per quello vorrei un tool esterno che mi generasse dei file leggibili. In questo modo posso slegarmi dalla tecnologia sottostante (canvas o opengl).
 :-)

Offline bradipao

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 4043
  • keep it simple
  • Respect: +567
    • Github
    • Google+
    • bradipao
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Play Store ID:
    Bradipao
  • Sistema operativo:
    W7
Re:Tool per UI complesse
« Risposta #7 il: 28 Marzo 2013, 12:43:12 CET »
0
Comprendo la tua necessità specifica. Se hai effettivamente bisogno di fare UI molto precise e dettagliate, di fatto non usi neanche i layout, ma disegni direttamente tutta l'interfaccia come una bitmap. Nel disegnarla devi ovviamente tenere in considerazione il particolare display e aspect ratio.

Io nelle poche e semplici app che ho fatto, ho cercato l'altro estremo delle casistiche. Ho cioè definito il layout in modo completamente indipendente dal display (come dice Nicola pensandolo come una pagina web di dimensioni indifinite), cercando di avere un risultato decoroso e uniforme su qualsiasi display (dal cellulare 320x200 al tablet HD). Certo, lo sforzo non è banale e occorre scendere a compromessi sui risultati, però il modo c'è.
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline undead

  • Utente senior
  • ****
  • Post: 666
  • Respect: +113
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy S6
  • Play Store ID:
    DrKappa
  • Sistema operativo:
    Windows 10 64-bit, Windows 8.1 64-bit
Re:Tool per UI complesse
« Risposta #8 il: 28 Marzo 2013, 13:05:04 CET »
0
Io nelle poche e semplici app che ho fatto, ho cercato l'altro estremo delle casistiche. Ho cioè definito il layout in modo completamente indipendente dal display (come dice Nicola pensandolo come una pagina web di dimensioni indifinite), cercando di avere un risultato decoroso e uniforme su qualsiasi display (dal cellulare 320x200 al tablet HD). Certo, lo sforzo non è banale e occorre scendere a compromessi sui risultati, però il modo c'è.
Quando non avevo necessariamente bisogno di quel livello di complessità ho fatto come dite voi. Effettivamente lo sforzo non è banale e alla fine uno va ad editarsi direttamente l'xml finchè non trova la "giusta combinazione". Però ammetto che funziona!  :-)

Per il canvas classico l'unica soluzione decente che ho trovato per gestire componenti complessi è usare una scrollview con un relativelayout con dentro altri relativelayout generati al volo da codice. Per lo sfondo purtroppo mi son dovuto creare una sottoclasse apposita perchè non esiste una modalità decente che scali l'immagine.
In quel modo posso effettivamente mantenere l'aspect ratio, posizionare il tutto al pixel, etc.

Però va lento...  :-(