Autore Topic: come personalizzare la grafica di un tabhostfragment  (Letto 1429 volte)

Offline andream1977

  • Utente normale
  • ***
  • Post: 260
  • Respect: +7
    • Mostra profilo
  • Dispositivo Android:
    Nexus S
  • Sistema operativo:
    windows xp
come personalizzare la grafica di un tabhostfragment
« il: 08 Dicembre 2013, 20:42:05 CET »
0
Volevo mettere una mia icona sul pulsante rappresentato dal componente tabhostFragment, appare la mia immagine ma non occupa tutto il pulsante, questo è il codice che uso:

      Bundleb = new Bundle();
      mTabHost.addTab(mTabHost.newTabSpec("btn2").setIndicator("", res.getDrawable(R.drawable.tab_add_insertion_state)), AddInsertionFragment.class, b);

Il file tab_add_insertion_state.xml contiene questo codice:
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/btn_add_insertion_pressed"
         android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/btn_add_insertion_normal" />
</selector>
Dove btn_add_insertion_norma.jpg è l'immagine del mio pulsante
Allego lo screenshot del risultato finale che ottengo e quello che vorrei ottenere, dove sbaglio?

Offline teskio

  • Moderatore globale
  • Utente normale
  • *****
  • Post: 387
  • Respect: +118
    • Github
    • Google+
    • Mostra profilo
    • Skullab
  • Dispositivo Android:
    Cubot GT99 / SurfTab Ventos 10.1
  • Play Store ID:
    Skullab Software
  • Sistema operativo:
    windows 7 / ubuntu 12.04
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #1 il: 08 Dicembre 2013, 23:34:27 CET »
0
Citazione
dove sbaglio?
Dipende da come hai dichiarato il layout del TabHost/TabWidget, dato che non l'hai postato.  :-)
Altrimenti puoi sempre creare una custom View e usare setIndicator(View view)

Esempio :
tabs_layout.xml
Codice (XML): [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">
        <ImageView android:id="@+id/tab_image"....ecc..../>
        <TextView android:id="@+id/tab_text"........ecc..../>
</LinearLayout>

Codice (Java): [Seleziona]
...
View view = LayoutInflater.from(mTabHost.getContext()).inflate(R.layout.tabs_layout, null);
ImageView tabImage = (ImageView) view.findViewById(R.id.tab_image);
tabImage.setImageResource(R.drawable.qui_immagine_del_tab);
TextView tabText = (TextView) view.findViewById(R.id.tab_text);
tabText.setText("Qui il testo del tab");
...
mTabHost.addTab(mTabHost.newTabSpec("btn2").setIndicator(view)); // qui inserisci la custom view...
« Ultima modifica: 08 Dicembre 2013, 23:40:51 CET da teskio »

Offline andream1977

  • Utente normale
  • ***
  • Post: 260
  • Respect: +7
    • Mostra profilo
  • Dispositivo Android:
    Nexus S
  • Sistema operativo:
    windows xp
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #2 il: 09 Dicembre 2013, 02:01:16 CET »
0
Teskio, non riesco a capire dove viene definito il layout dei miei tabhost
questo è il codice dell'activity che crea il FragmentTabHost

Codice (Java): [Seleziona]
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mio_layout);
        Resources res = getResources();
                mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
                mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

                Bundle b = new Bundle();
                b.putString("key", "btn2");
                mTabHost.addTab(mTabHost.newTabSpec("btn2").setIndicator("", res.getDrawable(R.drawable.tab_add_insertion_state)), AddInsertionFragment.class, b);
}

mio_layout.xml
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical" >

    <FrameLayout
       android:id="@+id/realtabcontent"
       android:layout_width="match_parent"
       android:layout_height="0dip"
       android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
       android:id="@android:id/tabhost"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" >

        <FrameLayout
           android:id="@android:id/tabcontent"
           android:layout_width="0dp"
           android:layout_height="0dp"
           android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>
dove'è che devo modificare per avere il layout che desidero dei bottoni ?

Offline teskio

  • Moderatore globale
  • Utente normale
  • *****
  • Post: 387
  • Respect: +118
    • Github
    • Google+
    • Mostra profilo
    • Skullab
  • Dispositivo Android:
    Cubot GT99 / SurfTab Ventos 10.1
  • Play Store ID:
    Skullab Software
  • Sistema operativo:
    windows 7 / ubuntu 12.04
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #3 il: 09 Dicembre 2013, 15:52:44 CET »
0
Basta che crei un layout a parte, nell'esempio che ti ho mostrato sopra ho creato un layout chiamandolo "tabs_layout.xml", usando una ImageView e una TextView, ma puoi crearlo come vuoi. Dopodichè, all'interno del codice java, crei una View partendo dal Layout appena definito, cambi immagine e testo in base alle tue esigenze e poi, invece di usare setIndicator(CharSequence label, Drawable icon) ,  usi setIndicator(View view) della classe TabHost.TabSpec, passandongli la View appena creata.

Offline andream1977

  • Utente normale
  • ***
  • Post: 260
  • Respect: +7
    • Mostra profilo
  • Dispositivo Android:
    Nexus S
  • Sistema operativo:
    windows xp
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #4 il: 10 Dicembre 2013, 01:20:12 CET »
0
Teskio, adesso mi è tutto chiaro con la tua spiegazione, funziona, mi mette l'immagine che copre tutta la superficie del bottone. Però io ho due immagini una di quando il bottone non è premuto ed una di quando il bottone è nello stato pressed. Come faccio a specificargliele entrambe?
Io ho provato a scrivere, invece di questo codice:

tabImage.setImageResource(R.drawable.btn_add_insertion);
dove btn_add_insertion è una png

ho scritto questo
tabImage.setImageResource(R.drawable.btn_add_insertion_state);

dove btn_add_insertion_state è un xml che descrive i due stati del bottone (norma e pressed) ma non ha funzionato

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:come personalizzare la grafica di un tabhostfragment
« Risposta #5 il: 10 Dicembre 2013, 10:14:10 CET »
0
guarda bene la documentazione:
ImageView | Android Developers[], boolean)
ImageView | Android Developers)
Citazione
Sets a drawable as the content of this ImageView.

This does Bitmap reading and decoding on the UI thread, which can cause a latency hiccup. If that's a concern, consider using setImageDrawable(android.graphics.drawable.Drawable) or setImageBitmap(android.graphics.Bitmap) and BitmapFactory instead.
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 andream1977

  • Utente normale
  • ***
  • Post: 260
  • Respect: +7
    • Mostra profilo
  • Dispositivo Android:
    Nexus S
  • Sistema operativo:
    windows xp
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #6 il: 10 Dicembre 2013, 14:42:30 CET »
0
Nicola_D ho letto, correggimi se ho capito male, al componente imageView posso settargli un'immagine non un file xml, quindi devo cambiare componente, magari un button
giusto?

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:come personalizzare la grafica di un tabhostfragment
« Risposta #7 il: 10 Dicembre 2013, 14:58:55 CET »
0
Nicola_D ho letto, correggimi se ho capito male, al componente imageView posso settargli un'immagine non un file xml, quindi devo cambiare componente, magari un button
giusto?
Non proprio, la drawable la puoi caricare come oggetto a partire da un file xml. Ci sono anche metodi per aggiungere drawable states, ma non li ho mai usati
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 andream1977

  • Utente normale
  • ***
  • Post: 260
  • Respect: +7
    • Mostra profilo
  • Dispositivo Android:
    Nexus S
  • Sistema operativo:
    windows xp
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #8 il: 10 Dicembre 2013, 15:37:36 CET »
0
Nicola_D, niente, non riesco a scrivere il codice
Ho provato a seguire il sugggerimento di Teskio, ho scritto:

Codice (Java): [Seleziona]
                Bundle b = new Bundle();
                b.putString("key", "Ricerca");
                TabSpec tabSpec = mTabHost.newTabSpec("ricerca");
                tabSpec.setIndicator(??? view ???);
                mTabHost.addTab(tabSpec,
                                MiaClasse.class, b);

al posto dei ???? dovrei mettere una view dove imposto il file xml che descrivi gli stati, ma non so come scrivere il codice. Il file che descrive gli stati del tab è btn_find_insertions_state.xml

R.drawable.btn_ricerca_state
« Ultima modifica: 10 Dicembre 2013, 16:03:02 CET da andream1977 »

Offline teskio

  • Moderatore globale
  • Utente normale
  • *****
  • Post: 387
  • Respect: +118
    • Github
    • Google+
    • Mostra profilo
    • Skullab
  • Dispositivo Android:
    Cubot GT99 / SurfTab Ventos 10.1
  • Play Store ID:
    Skullab Software
  • Sistema operativo:
    windows 7 / ubuntu 12.04
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #9 il: 10 Dicembre 2013, 16:35:04 CET »
0
Calma...prima di tutto leggi bene questo : State List
dopodichè prova a creare un selector che gestisca anche gli stati "pressed" , "focused"  e "selected" , definendo sia quando questi sono "true" sia quando sono "false" e guarda cosa succede. Se non funziona prova ad usare un ImageButton o un Button (in teoria dovrebbe funzionare anche con un ImageView...ma tutto è possibile) se non funziona nemmeno così...potresti cambiare le immagini da codice attraverso dei Listener.

Offline andream1977

  • Utente normale
  • ***
  • Post: 260
  • Respect: +7
    • Mostra profilo
  • Dispositivo Android:
    Nexus S
  • Sistema operativo:
    windows xp
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #10 il: 10 Dicembre 2013, 17:57:47 CET »
0
teskio Il file xml R.drawable.btn_add_state.xml, è pronto:
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
R.drawable.btn_find_insertions_state<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected -->
    <item android:drawable="@drawable/btn_add_pressed"
         android:state_selected="true" />
    <!-- When not selected -->
    <item android:drawable="@drawable/btn_add_normal" />
</selector>
ma non so come settarlo al componente, non so completare questa riga di codice:

TabSpec tabSpec = mTabHost.newTabSpec("ricerca");
tabSpec.setIndicator(?? * ??);

Offline teskio

  • Moderatore globale
  • Utente normale
  • *****
  • Post: 387
  • Respect: +118
    • Github
    • Google+
    • Mostra profilo
    • Skullab
  • Dispositivo Android:
    Cubot GT99 / SurfTab Ventos 10.1
  • Play Store ID:
    Skullab Software
  • Sistema operativo:
    windows 7 / ubuntu 12.04
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #11 il: 10 Dicembre 2013, 18:18:27 CET »
0
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When pressed / focused / selected -->
    <item android:state_pressed="true" android:drawable="@drawable/btn_add_pressed" />
    <item android:state_focused="true" android:drawable="@drawable/btn_add_pressed" />
    <item android:state_selected="true" android:drawable="@drawable/btn_add_pressed" />    
    <!-- When not pressed / focused / selected -->
    <item android:state_pressed="false" android:drawable="@drawable/btn_add_normal" />
    <item android:state_focused="false" android:drawable="@drawable/btn_add_normal" />
    <item android:state_selected="false" android:drawable="@drawable/btn_add_normal" />  
</selector>

Citazione

public TabHost.TabSpec setIndicator (View view)
Added in API level 4

Specify a view as the tab indicator.


Nel setIndicator(View view) devi mettere la view del tab, quella creata dal layout non uno State List... >:(
« Ultima modifica: 10 Dicembre 2013, 18:21:26 CET da teskio »

Offline andream1977

  • Utente normale
  • ***
  • Post: 260
  • Respect: +7
    • Mostra profilo
  • Dispositivo Android:
    Nexus S
  • Sistema operativo:
    windows xp
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #12 il: 10 Dicembre 2013, 18:32:34 CET »
0
ok e lo State List dove lo setto?

Offline teskio

  • Moderatore globale
  • Utente normale
  • *****
  • Post: 387
  • Respect: +118
    • Github
    • Google+
    • Mostra profilo
    • Skullab
  • Dispositivo Android:
    Cubot GT99 / SurfTab Ventos 10.1
  • Play Store ID:
    Skullab Software
  • Sistema operativo:
    windows 7 / ubuntu 12.04
Re:come personalizzare la grafica di un tabhostfragment
« Risposta #13 il: 10 Dicembre 2013, 19:00:10 CET »
0
Lo associ all'ImageView/ImageButton/Button...
Se non funziona, potrebbe dipendere dalla propagazione degli stati attraverso il TabHost/TabWidget...in quel caso potresti forzare l'ImageView a prendere uno stato ad esempio con public void setSelected (boolean selected), integrando un listener sul TabHost
Codice (Java): [Seleziona]
tabHost.setOnTabChangedListener(new OnTabChangeListener(){
@Override
public void onTabChanged(String tabId) {
  View view = tabHost.getCurrentTabView();
  ImageView icon = (ImageView)view.findViewById(R.id.tab_image);
  icon.setSelected(true);
}});

Oppure invece che ricorrere agli State List, cambi l'immagine direttamente...