Autore Topic: Problema menu da smartphone a tablet  (Letto 920 volte)

Offline TheGreatGuerra

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy Plus
  • Sistema operativo:
    Mac OSX 10.5
Problema menu da smartphone a tablet
« il: 10 Gennaio 2012, 18:14:46 CET »
0
Ciao ragazzi, chissà che qualcuno non mi dia una buona dritta.
Allora ho un menu iniziale composto da un immagine, su questa immagine di sfondo metto bottoni testuali.
il problema è che se su smartphone va benissimo e i bottoni testuali sono esattamente dove devono essere, se lo guardo con un tablet, la posizione risulta ovviamente sbagliata.
Come faccio a fare in modo che i bottoni siano sempre al giusto posto?
l'ultima idea che ho avuto è fare il tutto con un layout lineare orientato verticalmente, eliminando lo sfondo e dividendo questo in più parti.
Queste parti le impilo una sull'altra e quindi ricreo lo sfondo
mi spiego, ci sarà quindi un layout così:

|linear layout top sfondo|
|bottone con sfondo continuato|
|bottone con sfondo continuato|
|linear layout bottom sfondo|

(dio mio è difficile da spiegare, in pratica metto tutte queste cose come assi una dietra l'altra che, viste tutte insieme danno come immagine completa lo sfondo che volevo)

ma sono sicuro che ci sia qualcosa di più facile



poi se mi date anche una mano su questo problema molto meno complesso, sono contentissimo

ho una view con sfondo, una tabella e una barra di ricerca. . il problema è che quando sul dispositivo faccio focus sulla barra di ricerca, ed esce la tastiera, questa mi ridimensiona la vista principale, e con essa lo sfondo della view intera che si schiaccia verso l'alto.. come faccio a bloccarla?




vi metto delle immagini per farvi capire meglio
PROBLEMA DEL MENU


PROBLEMA DELLO SFONDO QUANDO APPARE LA TASTIERA





Ovviamente sono immagini ad hoc, non faccio obrobri simili :)
« Ultima modifica: 10 Gennaio 2012, 18:19:13 CET da TheGreatGuerra »

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:Problema menu da smartphone a tablet
« Risposta #1 il: 10 Gennaio 2012, 18:25:49 CET »
0
L'XML del layout puoi postarlo?
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline TheGreatGuerra

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy Plus
  • Sistema operativo:
    Mac OSX 10.5
Re:Problema menu da smartphone a tablet
« Risposta #2 il: 10 Gennaio 2012, 18:29:36 CET »
0
Certo!
E' a mia prima app android, fin'ora ho solo fatto su iOS ed è un po' più semplice la gestione tablet->smartphone e in generale il layout, quindi scusate se magari il codice fa schifo :)
Quello del problema menu:
Codice: [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/relativeLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/menu">

        <!-- <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:src="@drawable/menu" /> -->

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="94dp"
            android:orientation="vertical" >

            <Button
                android:id="@+id/mainFindProduct"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:drawable/list_selector_background"
                android:text="Cerca Prodotto"
                android:textColor="#FFFFFF"
                android:textSize="35px"
                android:textStyle="italic"/>

            <Button
                android:id="@+id/mainHowWorks"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="34dp"
                android:background="@android:drawable/list_selector_background"
                android:text="Come funziona"
                android:textColor="#FFFFFF"
                android:textSize="35px"
                android:textStyle="italic"/>

            <Button
                android:id="@+id/mainCatalog"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="34dp"
                android:background="@android:drawable/list_selector_background"
                android:text="Catalogo"
                android:textColor="#FFFFFF"
                android:textSize="35px"
                android:textStyle="italic"/>

            <Button
                android:id="@+id/mainODLink"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="34dp"
                android:background="@android:drawable/list_selector_background"
                android:text="officedistribution.it"
                android:textColor="#FFFFFF"
                android:textSize="35px"
                android:textStyle="italic"/>
        </LinearLayout>
       
</RelativeLayout>


Quello del problema tastiera:
Codice: [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:background="@drawable/tablebg">

    <TextView
        android:id="@+id/genericListTitle"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/topbar"
        android:gravity="center_vertical|center_horizontal"
        android:text="Title"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/cella" >

        <EditText
            android:id="@+id/genericListSearchBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="3dp"
            android:layout_toLeftOf="@+id/imageView1"
            android:gravity="center_vertical"
            android:hapticFeedbackEnabled="true"
            android:maxLines="1" >

        </EditText>

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/search" />
    </RelativeLayout>

    <ListView
        android:id="@+id/genericListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:fastScrollEnabled="true"
        android:scrollbarAlwaysDrawVerticalTrack="true"
        android:scrollbarStyle="insideOverlay"
        android:scrollbars="vertical"
        android:scrollingCache="true"
        android:textFilterEnabled="true">

    </ListView>

</LinearLayout>

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:Problema menu da smartphone a tablet
« Risposta #3 il: 10 Gennaio 2012, 19:05:08 CET »
+1
E' a mia prima app android, fin'ora ho solo fatto su iOS ed è un po' più semplice la gestione tablet->smartphone e in generale il layout,

E' più semplice perchè praticamente c'è un solo device con una sola risoluzione, puoi quindi "cucire" la UI per funzionare perfettamente sul singolo device. In Android hai molti più device, con risoluzioni e fattori di forma diversi, per cui l'approccio di "disegnare" la UI per un certo schermo non funzionerebbe (non a caso l'AbsoluteLayout adesso è deprecato).

Su Android devi pensare alla grafica della UI come a quella di una pagina web fatta con DIV. Le pagine web (almeno quelle con layout ben fatto) sono progettate per adattarsi a finestre del browser di dimensione diversa.

Ora faccio un esempio di come si potrebbe trattare il tuo caso, senza discostarmi molto dal tuo XML:

# PRIMO LinearLayout vertical, fill_parent horiz, fill_parent vertical, che racchiude tutto, per sfondo ha l'immagine bianca sfumata con il logo in testa ma non il riquadro nero.

# All'interno del primo, un SECONDO LinearLayout vertical, fill_parent wrap_content, fill_parent wrap_content, con sfondo nero; giocando con gravity e/o margin lo posizioni dove vuoi.

# All'interno del secondo metti i BUTTON che ti servono, uno dopo l'altro.

# Mancano le righe orizzontali, basta mettere tra i Button delle VIEW con spessore di 2dp e sfondo bianco ed è fatta. Ovviamente c'è da giocare un po' di margin e padding per sistemare le proporzioni.

Ne esce un layout molto simile al tuo, forse leggermente più semplice, ma con una associazione di background un po' diversa.
Codice (XML): [Seleziona]
<LinearLayout>
   <LinearLayout>
      <Button />
      <View />
      <Button />
      <View />
      <Button />
      <View />
      <Button />
      <View />
   </LinearLayout>
</LinearLayout>

Molto rozzamente il concetto base è quello di costruire un oggetto per ciascuna tipologia di sfondo che hai, così facendo anche se android ridimensiona i blocchi per adattarsi ai vari schermi, lo sfondo segue automaticamente il ridimensionamento.
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline TheGreatGuerra

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy Plus
  • Sistema operativo:
    Mac OSX 10.5
Re:Problema menu da smartphone a tablet
« Risposta #4 il: 10 Gennaio 2012, 19:10:42 CET »
0
Capito! coi div ci so fare e infatti la mia idea di salvataggio era fare così, ma non volevo che magari fosse un metodo sbagliato e tremendamente da programmatore incapace!
Grazie mille!

invece hai idea di come diavolo fare a non fare lo stretch dell'immagine quando appare la tastiera? ho provato a mettere lo sfondo anche in una relative pensando che così non subsse il resize ma invece niente.. magari elimino lo sfondo quando viene cliccata la search?

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:Problema menu da smartphone a tablet
« Risposta #5 il: 10 Gennaio 2012, 19:16:16 CET »
+1
Per l'activity in questione, prova a mettere nel manifest questo attributo:

Codice (XML): [Seleziona]
<activity
...
android:windowSoftInputMode="adjustPan" >
...
</activity>
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline TheGreatGuerra

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy Plus
  • Sistema operativo:
    Mac OSX 10.5
Re:Problema menu da smartphone a tablet
« Risposta #6 il: 10 Gennaio 2012, 20:14:57 CET »
0
stanotte provo e ti faccio sapere!
Grazie mille!  :D

Offline TheGreatGuerra

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy Plus
  • Sistema operativo:
    Mac OSX 10.5
Re:Problema menu da smartphone a tablet
« Risposta #7 il: 11 Gennaio 2012, 02:19:17 CET »
0
Grande, ora non resiza più! Che stupido, non avevo pensato che fosse qualcosa nelle activity del manifest.. eh vabbè inesperienza!

Ora vado di Layout, dopodichè topic risolto! :D
« Ultima modifica: 11 Gennaio 2012, 02:20:50 CET da TheGreatGuerra »

Offline TheGreatGuerra

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy Plus
  • Sistema operativo:
    Mac OSX 10.5
Re:Problema menu da smartphone a tablet
« Risposta #8 il: 11 Gennaio 2012, 13:25:45 CET »
0
Allora, ora è venuto, il problema è che non scala abbastanza in risoluzione minima (QVGA) e quindi rimane troppo lungo il menu. ovviamente di contro sul tablet il menu viene completo, il problema è che è corto..
uff

Offline TheGreatGuerra

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Samsung Galaxy Plus
  • Sistema operativo:
    Mac OSX 10.5
Re:Problema menu da smartphone a tablet
« Risposta #9 il: 13 Gennaio 2012, 18:21:46 CET »
0
Ok, provando e riprovando, girando e rigirando, ingrandendo e rimpicciolendo le immagini ce l'ho fatta :D