Autore Topic: Sviluppo APP grafica. Impostazione lavoro  (Letto 3784 volte)

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Sviluppo APP grafica. Impostazione lavoro
« il: 13 Maggio 2014, 15:01:17 CEST »
0
Salve,
 stiamo lavorando io e un paio di amici/colleghi a un progetto universitario. Dobbiamo sviluppare un'applicazione android che permetta di scegliere dei mobili da un catalogo e da la possibilità di disegnare una stanza rettangolare fornendo le dimensioni della stanza e posizionare i mobili dentro potendoli muovere, ruotare o eliminare. Ogni mobile è rappresentato da un rettangolo con le sue dimensioni.
La prima activity è quella che mostra il catalogo ecc e la stiamo realizzando con i fragment. Io mi sto concentrando sullo sviluppo della seconda activity, ossia quella che ci permette di disegnare la stanza e posizionare i mobili. Ho sviluppato l'idea di come realizzarla graficamente e ho un'idea generale su cosa fare, ma non so bene come partire per mettere in pratica l'idea che vorrei realizzarla in questo modo:
- l'activity viene mostrata solo in landscape mode
- Nella parte sinistra compare la lista dei mobili selezionati dal catalogo nell'activity precedente.
- A destra la parte dove verrà disegnata la stanza
- Nella parte destra, in basso sotto la stanza, ci sono le edit text che permettono di inserire le dimensioni della stanza che viene disegnata una volta inserite  e toccato il button Create accanto alle edit text.
- Poichè una stanza contiene anche porte e finestre, nella lista dei mobili a sinistra, in basso, compariranno sempre degli oggetti anche quando la lista è vuota. Tali oggetti sono Porta, Finestra e DoppiaFinestra. Questi vengono aggiunti sul bordo della stanza e possono muoversi solo lì.
- Toccando un mobile nella lista verrà disegnato l'oggetto nella parte sinistra in una posizione fissa centrale e poi possiamo andarlo a spostare, ruotare e posizionare dove vogliamo oppure cancellarlo.
-Inoltre, ho pensato che non deve essere possibile posizionare un mobile se è sovrapposto a un altro o se è in parte fuori dalla stana, quindi implementare un meccanismo che rileva quando due mobili si toccano o escono fuori dal bordo della stanza e disegnarli in tal caso in rosso disabilitando la possibiltà di poterli posizionare.

Per quanto riguarda la grafica, utilizzo gli oggetti path per creare sia il rettangolo della stanza che quelli dei mobili.

Come vedete, ho l'idea completa su come realizzare l'activity, ma non so come iniziare. Mi sento un po confuso. Dovrei utilizzare fragment o no? Come posso impostare l'activity?

Grazie mille in anticipo a chi mi darà una mano a partire :)

Offline Bo

  • Utente junior
  • **
  • Post: 64
  • Respect: +3
    • Mostra profilo
  • Sistema operativo:
    windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #1 il: 13 Maggio 2014, 16:25:28 CEST »
0
Salve alessio, posso darti una mano su qualcosina:
-per il landscape_mode aggiungi questo
Codice (XML): [Seleziona]
android:screenOrientation="landscape" nel manifest della tua activity
Poi mi è parso di capire che in questa tua app ci sono tante cose in una sola activity e quindi non è adatta agli smartphone che hanno dimensioni piccole dello schermo, quindi la svilupperai solo per tablet, quindi dovresti aggiungere questo sempre nel tuo manifest
Codice: [Seleziona]
<supports-screens
        android:largeScreens="true"
        android:normalScreens="false"
        android:requiresSmallestWidthDp="600"
        android:smallScreens="false"
        android:xlargeScreens="true" />
- Nella parte sinistra compare la lista dei mobili selezionati dal catalogo nell'activity precedente potresti usare una Navigation Drawer e personalizzartela , vedi meglio qui --> https://developer.android.com/design/patterns/navigation-drawer.html
So che non è tutto ma ora devo scappare, se mi ricordo continuo dopo
Spero di esserti stato d'aiuto :)

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #2 il: 13 Maggio 2014, 18:03:19 CEST »
0
Ciao Bo. L'app deve funzionare anche sui cellulari ( è così che richiede il progetto) anche se senza dubbio è molto meglio usarla solo nei tablet.
Per quanto riguarda la navigation drawer è quel menù che si apre di lato se faccio lo slide giusto? Potrebbe essere una buona cosa per risparmiare spazio.
Per adesso però ho un altro problema, quindi se puoi/potete aiutarmi in qualche modo con questo che è alla base del funzionamento dell'activity ve ne sarei molto grato.
In pratica, questo è uno schizzo dell'activity che ho fatto io per darvi un'idea di come deve essere :

Per adesso ho provato lasciando stare la barra laterale con la lista di mobili ecc e ho posizionato in basso le edit text per inserire le dimensioni della stanza e il bottone per confermare e crearla. Adesso ho un'activity con in basso quello che ho detto e sopra tutto vuoto. Quello che stavo provando a fare è disegnare un rettangolo vuoto(solo i bordi) nella parte superiore però facendo in modo che esso venga creato una volta che inserisco le dimensioni e premo il tasto crea. Ma non riesco a fare nulla di nulla, addirittura non riesco nemmeno a disegnare un rettangolo nella parte superiore di dimensione fissa. Ho fatto semplicemente disegnando su una Canvas dentro l'activity stessa, ho preso del codice da internet e ho aggiustato i nomi e le cose, ma non disegna nulla. Come posso fare?
Consideriamo che se l'utente una volta che ha creato il rettangolo inserisce nuovi dati e preme il bottone un'altra volta, viene cancellato tutto nella parte superiore, quindi è un qualcosa di dinamico. Come faccio ad implementare questa cosa?

Aiuto vi prego. Abbiamo pochissimo tempo. Dobbiamo consegnarlo entro il 23 di Maggio e siamo disperati :(((

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:Sviluppo APP grafica. Impostazione lavoro
« Risposta #3 il: 13 Maggio 2014, 18:31:11 CEST »
0
Aiuto vi prego. Abbiamo pochissimo tempo. Dobbiamo consegnarlo entro il 23 di Maggio e siamo disperati :(((

In tutta sincerità, pensare di fare una cosa del genere per il 23, con una conoscenza ed esperienza sommaria di Android, è veramente improbabile.

Però per essere costruttivo, vi consiglio prima di tutto di procedere per piccoli passi, e non pensare da subito all'app finale multi-piattaforma che ha tutte le features. Meglio porsi un primo obiettivo più vicino possibile, così da avere comunque qualcosa che sta in piedi (seppur limitato) e per il morale personale.

L'obiettivo più semplice che mi viene in mente è: app che funziona solo su tablet in landscape, listview a sinistra e canvas a destra; dalla listview si sceglie l'oggetto che vuoi disegnare sul canvas e col touch sul canvas lo posizioni. Per ora nessuna collision detection con altri oggetti e nessuna possibilità di spostarli.

Per fare questo, studiatevi questa app dimostrativa (ma veramente elegante) di gabriele mariotti (nel blog è pure spiegata), che permette di disegnare figure geometriche sul canvas. ONGOING DEV: Drawing shapes with fingers
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #4 il: 13 Maggio 2014, 18:47:16 CEST »
0
Grazie per il link e per i consigli bradipao. Il problema è che non è una cosa che dipende da noi. Stiamo seguendo un corso all'università di sviluppo app android e siamo arrivati già alla parte di open gl, al networking, al multithreading ecc quindi la nostra conoscenza ( teorica) di android non è per niente sommaria perchè stiamo studiando passo passo, ma arrivati al momento di mettere in pratica si sa che è sempre un'altra cosa. Abbiamo già realizzato un'app un mese fa e l'abbiamo fatto in due settimane. Un'app che tiene delle statistiche sui rifonimenti di benzina che permette di inserire i rifornimenti effettuati, kilometraggio ecc e abbiamo fatto tutto ( anche i database ) e una bella grafica. Ma quest'app che ci è stata assegnata adesso, tra l'utilizzo dei fragment, tra la parte della grafica e tutto il resto, ci sta risultando davvero difficile. I tempi sono brevissimi. Dobbiamo assolutamente consegnarla entro il 23 Maggio e poi ce ne verrà assegnata un'altra che è quella finale che sarà ancora più complessa, quindi non siamo tre ragazzi che ci siamo messi a sviluppare app per passatempo, ma abbiamo dei tempi da rispettare altrimenti non superiamo la materia  :'(
Le cose che il prof ci chiede di fare sono quelle che ho detto io, quindi non posso svilupparla solo per tablet o fare delle semplificazioni tanto per semplificarmi la vita. Dobbiamo rispettare le specifiche di progetto :(

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:Sviluppo APP grafica. Impostazione lavoro
« Risposta #5 il: 13 Maggio 2014, 18:55:20 CEST »
0
Dobbiamo assolutamente consegnarla entro il 23 Maggio e poi ce ne verrà assegnata un'altra che è quella finale che sarà ancora più complessa, quindi non siamo tre ragazzi che ci siamo messi a sviluppare app per passatempo, ma abbiamo dei tempi da rispettare altrimenti non superiamo la materia  :'(
Le cose che il prof ci chiede di fare sono quelle che ho detto io, quindi non posso svilupparla solo per tablet o fare delle semplificazioni tanto per semplificarmi la vita. Dobbiamo rispettare le specifiche di progetto :(

A maggior ragione se la vostra conoscenza non è sommaria, dovreste metterci solo un pomeriggio a fare la parte che ho descritto e poi potete aggiungerci tutto il resto. Non dico di fare cose diverse, dico di farlo a step (io farei così con cose che faccio per la prima volta), perchè a meno di non essere dei guru, si risparmia tempo rispetto a scrivere tutto il codice e premere Run.

Comunque questa è solo la mia opinione personale, non pretendo che sia il modo giusto di fare le cose.
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #6 il: 13 Maggio 2014, 19:02:10 CEST »
0
Nono, hai assolutamente ragione su quello che dici. E' giusto. Sto leggendo il link che mi hai dato :) Come mi diceva prima Bo, pensavo che sia meglio usare una navigation drawer e si risparmia spazio. Dici che all'inizio mi conviene mettere una semplice lista?
Inoltre, per mettere la list view a sinistra e a destra il canvas, come si fa? Ossia, nella definizione xml del layout si deve dire qualcosa di particolare per il canvas? Oppure basta creare un relative layout o magari un linear layout in orizzontale con a sinistra la listview e a destra vuoto?

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:Sviluppo APP grafica. Impostazione lavoro
« Risposta #7 il: 13 Maggio 2014, 19:13:48 CEST »
0
Se vedi bene il codice su GitHub ( https://github.com/gabrielemariotti/androiddev/tree/master/ShapeFinger ) noterai che il Canvas non è altro che una View custom, per cui nel layout viene istanziata esattamente come un qualsiasi altro widget. Così puoi impostarne le dimensioni e la posizione direttamente dal layout.

Ma ti rinnovo l'invito: studiatela bene, è relativamente semplice, ma si imparano tante cose.  ;-)

https://github.com/gabrielemariotti/androiddev/blob/master/ShapeFinger/src/main/res/layout/fragment_main.xml
Codice (XML): [Seleziona]
<!--
~ Copyright 2014 Gabriele Mariotti
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
               xmlns:tools="http://schemas.android.com/tools"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:paddingLeft="@dimen/activity_horizontal_margin"
               android:paddingRight="@dimen/activity_horizontal_margin"
               android:paddingTop="@dimen/activity_vertical_margin"
               android:paddingBottom="@dimen/activity_vertical_margin"
               tools:context="it.gmariotti.android.example.shapefinger.MainActivity$PlaceholderFragment">

    <it.gmariotti.android.example.shapefinger.DrawingView
       android:id="@+id/drawingview"
       android:layout_height="match_parent"
       android:layout_width="match_parent">

        </it.gmariotti.android.example.shapefinger.DrawingView>

</RelativeLayout>

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:Sviluppo APP grafica. Impostazione lavoro
« Risposta #8 il: 13 Maggio 2014, 19:15:44 CEST »
0
Concordo con bradipao il consiglio che mi sento di darti è quello di non partire a scrivere roba tanto per scrivere.

Impostate subito delle restrizioni e cercate come prima cosa di risolvere il problema della scala. Per ogni stupidaggine (in senso buono) che fate adesso vi ritroverete a spostare cose qua e là 10 volte.

Usare l'edittext per creare la stanza è un'ottima cosa.
Fissi subito delle misure minime e massime (tanto il professore proverà sicuramente a creare una stanza di 10cmx20cm o 2kmx3km).
Prendi la dimensione più grande e la scali sull'80% della dimensione corrispondente del canvas. Poi riscali l'altra di conseguenza.
Se le due dimensioni sono uguali la tua scala va sulla dimensione più grande del canvas e l'altra di conseguenza.
Se le dimensioni sono uguali ed il canvas è quadrato non fa differenza cosa scali per cosa.. l'importante è scalare.

Dico che l'importante è scalare perché quei due valori saranno fondamentali per qualsiasi operazione.
Tu lavorerai sempre e comunque con coordinate "vere".

Userai la scala solo ed esclusivamente per due cose:
- disegnare
- riconoscere il tocco

Disegnare significa trasformare da coordinate vere a coordinate di schermo applicando la scala.
Leggere il touch significa trasformare all'inverso, cioè applicare la scala inversa dalle coordinate che ti riporta il sistema all'interno del canvas ottenendo le coordinate vere.

Un altro trucco utile è quello di prevedere fin dall'inizio due cose: una origine sullo schermo e un sistema di coordinate locali sugli oggetti.
Per origine sullo schermo intendo un vettore bidimensionale che ti dice quale è l'origine. Il punto 0,0 fondamentalmente può trovarsi al centro, può trovarsi in alto a sinistra, può trovarsi in basso a sinistra. A te la scelta.
Per sistema di coordinate locali sugli oggetti intendo un semplicissimo sistema che ti permetta di applicare traslazioni e rotazioni.
Fondamentalmente a te serve che l'oggetto sia centrato, in coordinate locali, su 0,0. Indipendentemente da dove poi sia l'origine dello schermo.
Ti serve un vettore bidimensionale che ti dice la traslazione corrente.
Ti serve poi un float che ti dica quale è la rotazione corrente.
Il calcolo avviene a rigor di logica applicando la rotazione sull'oggetto, che è centrato sulle sue coordinate 0,0 e che quindi ruoterà attorno al proprio centro. Fatto questo puoi applicare alle stesse coordinate la traslazione per andare fisicamente a posizionarlo.

A rigor di logica se prendi questa strada l'origine delle coordinate di schermo ha senso che sia nel centro del canvas con la Y che aumenta verso il basso. E' il modo migliore per non incasinarsi perché l'unica cosa che dovrai fare è sottrarre la metà del canvas alle coordinate touch e applicare la scala inversa. Invece dal lato sistema di coordinate dell'oggetto andrai a sommare la metà del canvas e ad applicare la scala.

Ogni soluzione che preveda la Y che sale verso l'alto ti costringe ad un cambio di sistema di coordinate più radicale (motivo per il quale odio profondamente libgdx e compagnia).

Altre alternative che mappano le coordinate di schermo alle coordinate del touch o del canvas (0,0 in alto a sinistra) ti costringono a considerare il centro della stanza ad una distanza variabile dall'origine e ti pongono altri problemi in fase di posizionamento.

A quel punto il calcolo della collisione, almeno a livello base, può essere fatto generandosi una AABB (Axis Aligned Bounding Box, in questo caso un bounding rectangle, per la precisione) a partire dalle coordinate trasformate. Prendi la X minore, la Y minore, la X maggiore e la Y maggiore. Ecco i due angoli del tuo rettangolo per le collisioni.

Il test di collisione per due bounding rectangle è di una semplicità disarmante.

Bounding rectangle 1 definito da MinX1, MinY1, MaxX1 MaxY1
Bounding rectangle 2 definito da MinX2, MinY2, MaxX2 MaxY2


Codice (Java): [Seleziona]
// Prima vediamo se i due rettangolo sono uno a destra/sinistra dell'altro o se sono sovrapposti
// La X minima del primo è più grande della X massima del secondo, non possono collidere
if( MinX1 > MaxX2 )
return false;
// La X massima del primo è più piccola della X minima del secondo, non possono collidere
if( MaxX1 < MinX2 )
return false;
//Sappiamo che i due rettangoli sono sovrapposti sull'asse X. A questo punto se non sono uno sopra l'altro collidono.
// La Y minima del primo è più grande della Y massima del secondo, non possono collidere
if( MinY1 > MaxY2 )
return false;
// La Y massima del primo è più piccola della Y minima del secondo, non possono collidere
if( MaxY1 < MinY2 )
return false;
// Collisione!
return true;

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #9 il: 13 Maggio 2014, 19:23:57 CEST »
0
Grazie mille davvero per tutti gli aiuti che mi state dando. Leggerò tutto con calma e quando avrò dubbi scriverò ;)

Post unito: [time]14 Maggio 2014, 16:03:27 CEST[/time]
Ragazzi, rieccomi qui. Ieri ho letto tutto quello che mi avete consigliato di leggere e ho visto anche tante altre cose per conto mio sulle slide, internet ecc... Adesso sto iniziando a fare l'activity come mi avete consigliato voi, ossia a sinistra una listview e a destra il canvas su cui poter disegnare. Il problema che mi sorge è: " se io vado a sostituire nel metodo setContentView della main activity la view costruita a partire dal layout xml, in cui specifico che devono esserci una list view e una custom view alla sua destra, con un'istanza della mia custom view, come fa l'activity a crearsi il layout che specifico io in xml?"
« Ultima modifica: 14 Maggio 2014, 16:04:28 CEST da alessio.p90 »

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #10 il: 15 Maggio 2014, 13:32:24 CEST »
0
Ragazzi qualche consiglio? Nel frattempo abbiamo pensato che usiamo due fragment. In quello di sinistra mettiamo la lista e in quello di destra il canvas. Però il mio dubbio rimane... Ossia, se non volessimo usare i fragment si potrebbe fare ugualmente? E come?
« Ultima modifica: 15 Maggio 2014, 14:03:17 CEST da alessio.p90 »

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:Sviluppo APP grafica. Impostazione lavoro
« Risposta #11 il: 15 Maggio 2014, 14:37:05 CEST »
0
E molto più semplice di come sembra: tu hai un file XML di layout convenzionale, con una ListView e la "CustomView", nell'activity tu richiami il file di layout convenzionale, sarà poi compito del framework fare riferimento alla View personalizzata.
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #12 il: 15 Maggio 2014, 14:45:43 CEST »
0
Quindi si potrebbe fare senza usare i fragment e funzionerebbe lo stesso?

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:Sviluppo APP grafica. Impostazione lavoro
« Risposta #13 il: 15 Maggio 2014, 15:12:29 CEST »
0
Quindi si potrebbe fare senza usare i fragment e funzionerebbe lo stesso?

Si certamente.

I fragment sono stati introdotti come ulteriore layer di astrazione che consente di riutilizzare parti del layout in layout diversi, non solo per l'aspetto grafico, ma anche per la parte funzionale. Per esempio in questo caso usando due fragment per lista e canvas, in linea di principio potresti avere un layout per smartphone in cui risiedono in activity diverse, senza (quasi) dover cambiare il codice dei fragment.
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline alessio.p90

  • Nuovo arrivato
  • *
  • Post: 33
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung galaxy SII
  • Sistema operativo:
    Windows 7
Re:Sviluppo APP grafica. Impostazione lavoro
« Risposta #14 il: 15 Maggio 2014, 15:29:27 CEST »
0
Esatto. Grazie mille.
Se ho qualche problema scriverò  ;-)