Autore Topic: Windows 8 tiles style?  (Letto 544 volte)

Offline wlf

  • Utente normale
  • ***
  • Post: 359
  • Respect: +8
    • Mostra profilo
  • Dispositivo Android:
    Xperia
Windows 8 tiles style?
« il: 18 Settembre 2014, 12:53:44 CEST »
0
Salve,
sono consapevole che mi sto attirando delle critiche degli "integralisti androidiani" ma mi è stato chiesto di realizzare un menù con 6 scelte in stile "tiles" di Windows 8 phone. Praticamente la schermata andrebbe divisa in 6 quadrati identici non ridimensionabili come nell'esempio sottostante:



Sono quindi partito da un RelativeLayout nel quale ho inserito un TableLayout e su ogni riga ho messo un LinearLayout con 2 bottoni:

Codice (XML): [Seleziona]
<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:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MenuActivity" >

    <TableLayout
       android:id="@+id/tableLayout1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:layout_centerVertical="true"
       android:layout_marginTop="10dp" >

        <TableRow
           android:id="@+id/tableRow1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="4dp"
           android:gravity="center" >

            <LinearLayout
               android:id="@+id/linearLayout1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:gravity="center" >

                <Button
                   android:id="@+id/button1"
                   android:layout_width="120dp"
                   android:layout_height="120dp"
                                        android:background="@drawable/button_1" />

                <Button
                   android:id="@+id/button2"
                   android:layout_width="120dp"
                   android:layout_height="120dp"
                                        android:background="@drawable/button_2" />
            </LinearLayout>
        </TableRow>

        <TableRow
           android:id="@+id/tableRow2"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="4dp"
           android:gravity="center" >

            <LinearLayout
               android:id="@+id/linearLayout2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content" >

                <Button
                   android:id="@+id/button3"
                   android:layout_width="120dp"
                   android:layout_height="120dp"
                                        android:background="@drawable/button_3" />

                <Button
                   android:id="@+id/button4"
                   android:layout_width="120dp"
                   android:layout_height="120dp"
                                        android:background="@drawable/button_4" />
            </LinearLayout>
        </TableRow>

        <TableRow
           android:id="@+id/tableRow3"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="4dp"
           android:gravity="center" >

            <LinearLayout
               android:id="@+id/linearLayout3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content" >

                <Button
                   android:id="@+id/button5"
                   android:layout_width="120dp"
                   android:layout_height="120dp"
                                        android:background="@drawable/button_5" />

                <Button
                   android:id="@+id/button6"
                   android:layout_width="120dp"
                   android:layout_height="120dp"
                                        android:background="@drawable/button_6" />
            </LinearLayout>
        </TableRow>
    </TableLayout>

</RelativeLayout>

Il mio problema è che con la frammentazione dei dispositivi definendo i bottoni 120dp sui dispositivi FHD ho dei bottoncini piccoli al centro, mentre su un
WVGA ho dei nottoni che riempono meglio lo schermo.
Esiste magari una tecnica per fare in modo che su qualsiasi definizione dello schermo il risultato risulti sempre proporzionato?
Grazie.

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:Windows 8 tiles style?
« Risposta #1 il: 18 Settembre 2014, 15:00:51 CEST »
+1
puoi fare un linear layout verticale (match_parent/match_parent) con weight_sum=3 al cui interno ci sono 3 linear layout orizzontali (height=0dp, width=match_parent)che hanno layout_weight=1 e con weight_sum=2.
poi ogni elemento che inserisci in questi ultimi linearLayout (vuoi bottoni mi pare di aver capito) li metti con height a match_parent, width=0dp e con layout_weight=1.

dovrebbe fare quello che vuoi
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 wlf

  • Utente normale
  • ***
  • Post: 359
  • Respect: +8
    • Mostra profilo
  • Dispositivo Android:
    Xperia
Re:Windows 8 tiles style?
« Risposta #2 il: 18 Settembre 2014, 15:29:58 CEST »
0
Praticamente così:

Codice (XML): [Seleziona]
<LinearLayout 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:gravity="center"
   android:orientation="vertical"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:weightSum="3"
   tools:context=".MenuActivity" >

    <LinearLayout
       android:id="@+id/linearLayout1"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:orientation="horizontal"
       android:weightSum="2" >

        <Button
           android:id="@+id/button1"
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_margin="5dp"
           android:layout_weight="1"
           android:background="@drawable/button_1" />

        <Button
           android:id="@+id/button2"
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_margin="5dp"
           android:layout_weight="1"
           android:background="@drawable/button_2" />
    </LinearLayout>

    <LinearLayout
       android:id="@+id/linearLayout2"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:orientation="horizontal"
       android:weightSum="2" >

        <Button
           android:id="@+id/button3"
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_margin="5dp"
           android:layout_weight="1"
           android:background="@drawable/button_3" />

        <Button
           android:id="@+id/button4"
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_margin="5dp"
           android:layout_weight="1"
           android:background="@drawable/button_4" />
    </LinearLayout>

    <LinearLayout
       android:id="@+id/linearLayout3"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:orientation="horizontal"
       android:weightSum="2" >

        <Button
           android:id="@+id/button5"
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_margin="5dp"
           android:layout_weight="1"
           android:background="@drawable/button_5" />

        <Button
           android:id="@+id/button6"
           android:layout_width="0dp"
           android:layout_height="match_parent"
           android:layout_margin="5dp"
           android:layout_weight="1"
           android:background="@drawable/button_6" />
    </LinearLayout>

</LinearLayout>

E' necessario il RelativeLayout esterno o posso eliminarlo? Immagino che non sia indispensabile ...

--- edit ---

Se non ho capito male con questa tecnica gli spazi vengono ridimensioanti x3 in verticale e x2 in orizzontale. Partendo da delle icone perfettamente quadrate potrei quindi ritrovarmi con delle icone deformate a seconda delle proporzioni dello scermo?
« Ultima modifica: 18 Settembre 2014, 16:09:51 CEST da wlf »

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:Windows 8 tiles style?
« Risposta #3 il: 18 Settembre 2014, 16:01:18 CEST »
+1
Il relative va eliminato,non serve e si, si deformano (ovviamente dipende dallo schermo) se al posto dei bottoni ci metti  image view con fitx o altro, non ricordo il migliore in questo caso, non si deformano
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 wlf

  • Utente normale
  • ***
  • Post: 359
  • Respect: +8
    • Mostra profilo
  • Dispositivo Android:
    Xperia
Re:Windows 8 tiles style?
« Risposta #4 il: 18 Settembre 2014, 16:24:18 CEST »
0
Il relative va eliminato, non serve

L'ho eliminato dal post precedente ... ;)

Citazione
si deformano (ovviamente dipende dallo schermo) se al posto dei bottoni ci metti  image view con fitx o altro, non ricordo il migliore in questo caso, non si deformano

Scusami ma qui non capisco; se ci metto imageView non ho più i miei bottoni ... quindi per quanto rigaurda i bottoni non posso fare altro che "rischiare" di deformarli? Eventualmente potrei realizzare delle icone in proporzione in modo che cerchino di rispettare le proporzioni.
Praticamente dando per scontato che finiscano principalmente su dei display con una proporzione di 16:9 dovrei realizzarle di 118,5dp x 100dp invece che 100dp x 100dp, se dovessi realizzarle per display di 4:3 allora dovrei realizzarle di 89dp x 100dp ...

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:Windows 8 tiles style?
« Risposta #5 il: 18 Settembre 2014, 16:32:36 CEST »
+1
ti ho detto imageView perchè le imageview hanno la proprietà di non strechare le immagini, ibottoni hanno solo testo(non è verissimo ma vabbe) e non sono fatti per quello che vuoi.
esistono gli ImageButton.

per le image view:
ImageView | Android Developers
oppure ImageButton | Android Developers

ma se vuoi fare le cose come nella tua immagine, io metterei una view "custom" con background e con dentro l'icona..
ricordati che non sei obbligato ad avere il button che riempie la "cella", il button lo puoi mettere dentro a un altro layout e dare al button le proprietà wrap_content

fai un po di prove con i tool di preview dell'ide che usi!
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 wlf

  • Utente normale
  • ***
  • Post: 359
  • Respect: +8
    • Mostra profilo
  • Dispositivo Android:
    Xperia
Re:Windows 8 tiles style?
« Risposta #6 il: 18 Settembre 2014, 17:18:33 CEST »
0
ibottoni hanno solo testo(non è verissimo ma vabbe) e non sono fatti per quello che vuoi. esistono gli ImageButton.

Io ho sempre utilizzato i Button e per assegnargli le immagini nella catella res/drawable tramite "android:background" creo un XML nel quale inserisco

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/btn_1" android:state_pressed="true"/>
    <item android:drawable="@drawable/btn_1"/>

</selector>

Non ho mai utilizzato gli ImageButton; non ho idea perché siano da preferire rispetto ad un Button tradizionale al quale viene aggiunto un background. :(

Citazione
ma se vuoi fare le cose come nella tua immagine, io metterei una view "custom" con background e con dentro l'icona..

Praticamente mi stai dicendo che mi conviene fare uno sfondo con tutti i tile (view "custom") e poi a questo sovrapporre le singole icone trasparenti dei bottoni?

Citazione
ricordati che non sei obbligato ad avere il button che riempie la "cella"

Chiaramente io lo facevo perché dovevo fare anche il controno del tile (cella).

Citazione
il button lo puoi mettere dentro a un altro layout e dare al button le proprietà wrap_content

Mi stai dicendo che mi conviene nidificare il button dentro ad un ulteriore layout per poter sfruttare il wrap_content quindi non deformare le proporzioni del bottone.
Comunque, se non erro, rimarrebbe il problemino delle dimensioni del bottone; mi dovrei arrangiare o con le densità (hdpi, ldpi, mdpi, xhdpi xxhdpi) oppure crearmi le cartelle:

res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge

Citazione
fai un po di prove con i tool di preview dell'ide che usi!

Sto utilizzando Eclipse. ;)

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:Windows 8 tiles style?
« Risposta #7 il: 18 Settembre 2014, 17:27:29 CEST »
0
allora, utilizzare il background in un button, con un immagine che è un icona (quindi non una 9patch o un'immagine scalabile) è a mio avviso concettualmente sbagliato.
ImageButton server proprio a quello, visto che eredita da ImageView, ma è un bottone:
Citazione
Displays a button with an image (instead of text) that can be pressed or clicked by the user. By default, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states. The image on the surface of the button is defined either by the android:src attribute in the XML element or by the setImageResource(int) method.
il vantaggio qui è che puoi settare uno scale type.


Se tu nidifichi il button (ImageButton) in una view (linearLayout o chiper esso), puoi impostare margin,padding,border,background ecc al linear layout e tenere la tua icona trasparente nel imageButton. Cosi facendo il layout "padre" è stretched e pieno di parametri, il bottone è wrap e semplice.
Il problema delle dimensioni del bottone rimane, ma è pieno di tool online ( qualcuno ha detto android asset studio?) che da un'immagine in alta qualità ti fanno l'immagine in varie versioni scalata, specificando i dpi che vuoi, creare 6 cartelle è un operazione veloce dai... :D

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 wlf

  • Utente normale
  • ***
  • Post: 359
  • Respect: +8
    • Mostra profilo
  • Dispositivo Android:
    Xperia
Re:Windows 8 tiles style?
« Risposta #8 il: 18 Settembre 2014, 18:16:26 CEST »
0
allora, utilizzare il background in un button, con un immagine che è un icona (quindi non una 9patch o un'immagine scalabile) è a mio avviso concettualmente sbagliato.
ImageButton server proprio a quello, visto che eredita da ImageView, ma è un bottone:il vantaggio qui è che puoi settare uno scale type.

Mi era stato insegnato di utilizzare i Button con il background; ora mi hai convinto a cambiare idea. Sto provando l'ImageButton ma inserendo l'immagine come src questa viene visualizzata parzialmente, giusto una porzione. Ho provato lo scaleType ma non sembra sortire alcun effetto! :(
Evidentemente è perché ho poca, se non nulla, dimestichezza con l'ImageButton ... :(

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:Windows 8 tiles style?
« Risposta #9 il: 18 Settembre 2014, 21:51:31 CEST »
+1
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 wlf

  • Utente normale
  • ***
  • Post: 359
  • Respect: +8
    • Mostra profilo
  • Dispositivo Android:
    Xperia
Re:Windows 8 tiles style?
« Risposta #10 il: 19 Settembre 2014, 17:06:25 CEST »
0
Guarda qui Fit Image in ImageButton in Android - Stack Overflow

Molto utile, grazie! ;)

Ho notato che una delle differenze tra Button+Background e ImageButton+src è che la seconda accoppiata nel caso che l'immagine non combaci con le proporzioni del bottone ti ritrovi uno sfondo di un bottone; l'ImageButton è praticamente un bottone con sopra un immagine. :(
A meno che ci sia una proprietà che consenta di rendere trasparente un ImageButton (android:background="@null"). ;)

Sostanzialmente altre differenze funzionali non ne ho notate ... a meno che ci sia qualcosa che mi sfugge ora ...  :)