Autore Topic: Immagine a tutto schermo interattiva  (Letto 2131 volte)

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Immagine a tutto schermo interattiva
« il: 25 Agosto 2010, 10:23:18 CEST »
0
    Prima o poi doveva accadere: devo fare della odiata grafica per una mia applicazione! Odio la grafica!  >:(

    Il mio obiettivo è il seguente:
    • Inserire una immagine di sfondo che occupi tutto lo schermo;
    • Inserire un testo che varia durante il ciclo di vita dell'applicazione;
  • Inserire una serie di pulsanti cliccabili.

Per spiegarmi meglio, includo uno screenshot "Immagine.jpg" di una ipotetica condizione finale dell'applicazione.

Le domande sono le seguenti:
  • Quanto deve essere grande l'immagine per occupare tutto lo schermo (niente spazi vuoti e niente scroll)?
  • Come faccio ad essere sicuro che questo sfondo sia compatibile con tutti i terminali?
  • Come faccio a posizionare la TextView e i due Button esattamente in quel posto?

Le risposte che attualmente mi sono dato:
Per posizionare l'immagine come sfondo mi basta semplicemente inserire nell'xml del layout una cosa tipo:
Codice (XML): [Seleziona]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="@drawable/background">
In questo modo sono sicuro che l'immagine copra tutto lo sfondo adattandosi.

Il problema è proprio questo adattamento! Non essendo fissa, ma adattandosi in automatico, non so come (o meglio dove) posizionare la TextView e i Button... probabilmente devo inserirli in modo relativo... ma non so proprio come fare!

Insomma... odio la grafica!  >:(

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Re:Immagine a tutto schermo interattiva
« Risposta #1 il: 25 Agosto 2010, 17:52:46 CEST »
0
Ci sto sbattendo la testa da tutto il giorno... e nulla!

Il codice che ho scritto è questo:
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"
   android:background="@drawable/immagine">
        <LinearLayout
                android:layout_width="fill_parent"
                android:id="@+id/TestoInAlto"
                android:gravity="center_vertical|center_horizontal"
                android:layout_height="60dip">
                <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:id="@+id/hello"
                        android:text="TESTO VARIABILE"/>
        </LinearLayout>
        <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="300dip"
                android:id="@+id/SpazioVuoto">
        </LinearLayout>
        <LinearLayout
                android:id="@+id/PulsantiInBasso"
                android:layout_width="fill_parent"
                android:layout_height="70dip"
                android:gravity="center_vertical|center_horizontal">
                <Button
                        android:id="@+id/Button01"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Click">
                </Button>
        </LinearLayout>
</LinearLayout>

Il risultato sta nello screenshot 02 allegato!

Sembra tutto perfetto, ma appena cambio terminale (uno con uno schermo più grande) mi sballa tutto! (vedi screenshot 03).

Consigli?

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
Re:Immagine a tutto schermo interattiva
« Risposta #2 il: 25 Agosto 2010, 18:02:25 CEST »
0
Ciao Marco, ma non sarebbe meglio utilizzare un RealiveLayout anziché un Linear? Se mi fai avere un archivio compresso del progetto eclipse provo a lavorarci su pure io :).
« Ultima modifica: 25 Agosto 2010, 18:03:56 CEST da JD »
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Re:Immagine a tutto schermo interattiva
« Risposta #3 il: 25 Agosto 2010, 18:16:10 CEST »
0
Il problema non resta anche con un RelativeLayout?

Il problema è far combaciare il tutto con lo sfondo...

Odio la grafica!  >:(

Ti allego il progetto! Grazie!

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Re:Immagine a tutto schermo interattiva
« Risposta #4 il: 25 Agosto 2010, 18:22:55 CEST »
0
Mi sa che l'unico modo è spezzettare l'immagine di sfondo e comporla a poco a poco... umpf!

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
Re:Immagine a tutto schermo interattiva
« Risposta #5 il: 25 Agosto 2010, 18:31:27 CEST »
0
Ciao Marco, ho un paio di idee su come risolvere il problema, ma non ho molta voglia di scrivere dei romanzi per spiegarle, ti andrebbe di venire 5 min su mumble?
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

vincenzodicicco

  • Visitatore
Re:Immagine a tutto schermo interattiva
« Risposta #6 il: 25 Agosto 2010, 18:33:07 CEST »
0
Cambia tutto perchè 300dp di uno schermo con meno densità di pixel penso non siano gli stessi di uno schermo più risolutivo o sbaglio?io una volta ho risolto utilizzando parecchi "fill_parent" per posizionare un layout automaticamente alla "fine" dello schermo e poi aggiustando il Button con il padding nei vari lati.Appena torno provo ad utilizzare questo ragionamento con il tuo layout  :-)

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Re:Immagine a tutto schermo interattiva
« Risposta #7 il: 25 Agosto 2010, 18:43:13 CEST »
0
@JD
Adesso non posso... forse domani (grazie per la disponibilità)!  o_O

@vincenzodicicco
Esatto, ma il cambio da media ad alta densità viene gestito in modo automatico dalla misura in dip dei layout. Il vero problema è che cambia anche la risoluzione (in particolare la lunghezza dello schermo).
Per il momento ho risolto creando una configurazione ad hoc per gli schermi di tipo "long" (quindi una cartella /res/layout-long con un xml dai dip maggiorati), ma non è una soluzione che mi piace molto!

Ribadisco: Odio la grafica!  >:(

Offline JD

  • Amministratore
  • Utente storico
  • *****
  • Post: 1600
  • Respect: +232
    • leinardi
    • Mostra profilo
  • Dispositivo Android:
    LG Nexus 5
  • Sistema operativo:
    L'ultima Ubuntu
Re:Immagine a tutto schermo interattiva
« Risposta #8 il: 25 Agosto 2010, 18:48:26 CEST »
+1
Che ne dici, ci stiamo avvicinando?

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:background="@drawable/immagine">
        <RelativeLayout
                android:id="@+id/RelativeLayout01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="8dp">
                <TextView
                        android:id="@+id/TextView01"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="TESTO VARIABILE"
                        android:textColor="#FF0000"
                        android:textSize="28dp"
                        android:layout_centerInParent="true"></TextView>
                <TextView
                        android:layout_height="wrap_content"
                        android:layout_width="wrap_content"
                        android:id="@+id/hello"
                        android:text="TESTO VARIABILE"
                        android:layout_centerInParent="true"
                        android:textColor="#00FF00" />
        </RelativeLayout>
        <Button
                android:id="@+id/Button01"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Click"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="12dip"></Button>
</RelativeLayout>

Poi quando riesci a venir su mumble parliamo di un paio di idee che ho su come risolvere meglio il problema.
« Ultima modifica: 25 Agosto 2010, 18:50:41 CEST da JD »
È stata trovata una soluzione al tuo problema?
Evidenzia il post più utile premendo . È un ottimo modo per ringraziare chi ti ha aiutato ;).
E se hai aperto tu il thread marcalo come risolto cliccando !

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:Immagine a tutto schermo interattiva
« Risposta #9 il: 25 Agosto 2010, 20:13:33 CEST »
+1
La soluzione di JD mi piace.

Per risolvere il probalema avevo provato anche un diverso approccio, che riporto solo per onore di cronaca perchè lascia quasi inalterato il layout orginario di Marco. Premetto che l'ho provato rapidamente solo su due risoluzioni.

Metto android:layout_height="fill_parent" a tutti e tre i LinearLayout, così che normalmente tutti e tre si sovrapporrebbero a tutto schermo. Poi però imposto il layou_weight secondo un valore inversamente proporziale all'altezza percentuale che deve avere la fascia orizzontale in questione. Risultato, i LinearLayout dovrebbero essere automaticamente riscalati in altezza in proporzione alle dimensioni dello schermo.

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"
  android:background="@drawable/immagine" >
        <LinearLayout        
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:layout_weight="32"
               android:id="@+id/TestoInAlto"
               android:gravity="center_vertical|center_horizontal" >
                <TextView
                       android:layout_height="wrap_content"
                       android:layout_width="wrap_content"
                       android:id="@+id/hello"
                       android:text="TESTO VARIABILE"/>
        </LinearLayout>
        <LinearLayout
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:layout_weight="10"
               android:id="@+id/SpazioVuoto">
        </LinearLayout>

        <LinearLayout
               android:id="@+id/PulsantiInBasso"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:layout_weight="30"
               android:gravity="center_vertical|center_horizontal">
                <Button
                       android:id="@+id/Button01"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="Click">
                </Button>
        </LinearLayout>
</LinearLayout>
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Re:Immagine a tutto schermo interattiva
« Risposta #10 il: 26 Agosto 2010, 09:57:08 CEST »
0
Mitici tutti e due!!! :-)

Quello che cercavo me l'ha fatto scoprire bradipao!!! Le percentuali!!! 8-)

Le stavo cercando, ma non le trovavo come unità di misura da mettere in layout_height... ma non tenevo conto di layout_weight.

Mi spiego meglio:
la soluzione di JD è perfetta, ma non tiene conto di eventuali layout che voglio mettere in mezzo (tra il testo in alto e il pulsante in basso), non a caso avevo messo un layout "SpazioVuoto" in mezzo. Riesci perfettamente a posizionare gli elementi gestendo i margini, ma appena complico di poco lo sfondo non si riescono a mappare per bene i layout nel mezzo. Inoltre, appena metto lo schermo in landscape sballa tutto!

la soluzione di bradipao è anche perfetta, ma l'utilizzo massivo di fill_parent non mi piace e rende il layout "sporco". Ma mi ha illuminato con l'utilizzo del parametro layout_weight.

Unendo le due idee sono arrivato alla soluzione, di semplicissimo utilizzo e adattabile a tutti gli schermi (qualsiasi lunghezza, qualsiasi densità di pixel e quindi qualsiasi terminale!!!).

Ecco come procedere:
dopo aver creato lo sfondo che si vuole applicare alla nostra applicazione aprire un programma di grafica e scalare l'immagine in modo da avere una altezza di esattamente 100px (questa non sarà l'immagine da impostare come sfondo dell'applicazione, è solo una immagine di servizio utile per prendere i dati percentuali).

A questo punto basta contare i pixel in altezza di tutte le sezioni, in particolare, per l'immagine di esempio abbiamo:
  • Altezza area del Testo variabile: 14px
  • Altezza area centrale: 70px
  • Altezza area dei pulsanti: 16px

Ovviamente la somma di tutte le altezze deve fare 100px!

Adesso basta impostare questi parametri nei rispettivi attributi layout_weight dei LinearLayout ed il gioco è fatto! Sotto tutte le configurazioni (Portrait o Landscape) e con tutte le risoluzioni e con tutte le densità il risultato è identico!

Ecco il codice finale del 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"
  android:background="@drawable/immagine">
        <LinearLayout
               android:layout_width="fill_parent"
               android:id="@+id/TestoInAlto"
               android:gravity="center_vertical|center_horizontal"
               android:layout_weight="14">
                <TextView
                       android:layout_height="wrap_content"
                       android:layout_width="wrap_content"
                       android:id="@+id/hello"
                       android:text="TESTO VARIABILE"/>
        </LinearLayout>
        <LinearLayout
               android:layout_width="fill_parent"
               android:id="@+id/SpazioVuoto"
               android:layout_weight="70">
        </LinearLayout>
        <LinearLayout
               android:id="@+id/PulsantiInBasso"
               android:layout_width="fill_parent"
               android:gravity="center_vertical|center_horizontal"
               android:layout_weight="16">
                <Button
                       android:id="@+id/Button01"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="Click">
                </Button>
        </LinearLayout>
</LinearLayout>

Grazie 1000 a tutti!

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Re:Immagine a tutto schermo interattiva
« Risposta #11 il: 26 Agosto 2010, 10:10:06 CEST »
0
UMPF! Come non detto... Nell'anteprima di Eclipse funziona tutto alla grande, ma appena lo faccio partire sull'emulatore mi spernacchia con un RuntimeException per non aver dichiarato il parametro android:layout_height!
 :'(

Offline MarcoDuff

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 1073
  • Respect: +202
    • Google+
    • marcoduff
    • Mostra profilo
    • MarcoDuff's Blog
  • Dispositivo Android:
    Samsung Galaxy Nexus
  • Play Store ID:
    MarcoDuff
  • Sistema operativo:
    Windows 7
Re:Immagine a tutto schermo interattiva
« Risposta #12 il: 26 Agosto 2010, 10:15:18 CEST »
0
Fregato! >:(

Bisogna testare la bontà della modifica (che sinceramente non mi piace tantissimo), ma funziona: basta impostare android:layout_height="0dip" in tutti i layout per farlo andare avanti!

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"
  android:background="@drawable/immagine">
        <LinearLayout
               android:layout_width="fill_parent"
               android:id="@+id/TestoInAlto"
               android:gravity="center_vertical|center_horizontal"
               android:layout_weight="14"
               android:layout_height="0dip">
                <TextView
                       android:layout_height="wrap_content"
                       android:layout_width="wrap_content"
                       android:id="@+id/hello"
                       android:text="TESTO VARIABILE"/>
        </LinearLayout>
        <LinearLayout
               android:layout_width="fill_parent"
               android:id="@+id/SpazioVuoto"
               android:layout_weight="70"
               android:layout_height="0dip">
        </LinearLayout>
        <LinearLayout
               android:id="@+id/PulsantiInBasso"
               android:layout_width="fill_parent"
               android:gravity="center_vertical|center_horizontal"
               android:layout_weight="16"
               android:layout_height="0dip">
                <Button
                       android:id="@+id/Button01"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:text="Click">
                </Button>
        </LinearLayout>
</LinearLayout>