Background pour Tabhost

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/07/2012, 17h52
italia57

Background pour Tabhost

Bonjour à tous,

j'aurai voulu savoir s'il était possible de changer le background de chaque bouton du tabhost ? J'ai cherché mais je n'ai pas trouvé la propriété et Eclipse ne me donne pas de résultat satisfaisant dans le liste des fonctions proposées...

Je vous remercie

Il faut avoir le style !

Voici la définition d'un tabwidget sous 4.0.4:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
    <style name="Widget.TabWidget">
        <item name="android:textAppearance">@style/TextAppearance.Widget.TabWidget</item>
        <item name="ellipsize">marquee</item>
        <item name="singleLine">true</item>
        <item name="android:tabStripLeft">@android:drawable/tab_bottom_left</item>
        <item name="android:tabStripRight">@android:drawable/tab_bottom_right</item>
        <item name="android:tabStripEnabled">true</item>
        <item name="android:divider">@null</item>
        <item name="android:gravity">fill_horizontal|center_vertical</item>
        <item name="android:tabLayout">@android:layout/tab_indicator</item>
    </style>

16/07/2012, 22h53
italia57

étant donné que je développe sur 2.2 ça risque d'être compliqué. Comment puis-je faire du coup ?

Autre questions sous-jacente du coup:

comment faire pour que l'application tourne plus ou moins bien sur toutes les versions Android ?
16/07/2012, 23h04
nicroman

En regardant la version 2.2 du fichier styles.xml de Android ?

https://github.com/android/platform_...ues/styles.xml

(il y a plein de resources drawable "tab_selected" etc...)
23/07/2012, 15h56
italia57

Ce n'est pas faute d'avoir essayer, mais je n'ai toujours pas réussi à modifier le background des onglets du tabHost.

Moi j'utilise un fonction pour mettre du texte est une image et une autre pour mettre une couleur de fond et redessiner les carré.

Code:

1
2
3
4
5
6
7
 
	View tabview = createTabView(tabHost.getContext());
spec = tabHost.newTabSpec("nom").setIndicator(tabview).setIndicator(tabview)                    
			                  .setContent(intent);
 
tabHost.addTab(spec);
setTabColor(tabHost);

createTabView

Code:

1
2
3
4
5
6
7
8
9
 
private View createTabView(Context context) {
		TextView tv = null;
		View view = null;
 
 
			view = LayoutInflater.from(context).inflate(R.drawable.tabs_bg2, null);
			//tv = (TextView) view.findViewById(R.id.tabsText);
		}

setTabColor

Code:

1
2
3
4
5
 
public static void setTabColor(TabHost tabhost) 
{
tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_notpressed_bg);
}

Permet de mettre une image
drawable/tabs_bg2.xml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?xml version="1.0" encoding="utf-8"?>
 
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tabsLayout" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	android:orientation="vertical">
 
 
         <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/image"
            android:layout_gravity="bottom|center"
             />
 
 
 
</LinearLayout>

//Permet un dégrader et dessiner les carré

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="0dp" >
 
 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" 
     > 
 
     <gradient android:startColor="#00000000" 
 				android:centerColor="#808080"
         		android:endColor="#ffffff"
         		android:angle="270"
         		/> 
 
    <corners android:bottomRightRadius="7dp" 
        	android:bottomLeftRadius="7dp" 
     		android:topLeftRadius="7dp" 
     		android:topRightRadius="7dp"
 
     		/> 
 
</shape> 
</item></layer-list>

23/07/2012, 17h24
italia57

tu définis les fonctions là à l'endroit ou tu déclares ton tabHost et tous les onglets qu'il va contenir ?
23/07/2012, 17h29
xouzi
Sa dépend :
- createTabView est differant pour chaque onglet
- setTabColor est commun a tout les onglets
23/07/2012, 22h09
italia57

J'aurai aimé savoir également si tu as réussi à gérer le fait que quand l'on est sur un onglet la couleur est différente des autres ?

Pour changer la couleur pendant la selection je mais une boucle dans mon setTabColor

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public static void setTabColor(TabHost tabhost) 
	{
	    for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++)
	    {
 
	    	tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_notpressed_bg);
 
 
		}
 
	    tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundResource(R.drawable.tab_pressed_bg);
 
 
	}

Je créer 2 fichiers xml tab_notpressed_bg et tab_pressed_bg

24/07/2012, 16h26
italia57

je pourrais savoir ce qu'ils contiennent, on peut pas mettre directement une image ?

Citation:

on peut pas mettre directement une image

Dans createTabView j'utilise le fichier xml : tabs_bg2 c'est lui qui insère l'image

Code:

view = LayoutInflater.from(context).inflate(R.drawable.tabs_bg2, null);

Dans le xml j'ai une image (c'est l'image home).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/tabsLayout" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	android:orientation="vertical">
 
 
         <ImageView
            android:id="@+id/imageView1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@drawable/image"//image home
            android:layout_gravity="bottom|center"
             />
 
</LinearLayout>

24/07/2012, 17h00
italia57

Mais c'est pas tes fichier xml tab_notpressed_bg et tab_pressed_bg si ?

Car eux je sais pas ce qu'ils contiennent.

Je te remercie

Je te l'ai mit dans le mon premier post
tab_notpressed_bg.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  //espace
 <item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="0dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> //bouton de forme rectangle
//degarder
     <gradient android:startColor="#00000000" 
          	   android:centerColor="#F7D798"
               android:endColor="#FEE57E"
 
               android:angle="270"/> 
//arrondi les bords 
    <corners android:bottomRightRadius="7dp" 
        	 android:bottomLeftRadius="7dp" 
     		 android:topLeftRadius="7dp" 
     		 android:topRightRadius="7dp"
 
     		 /> 
</shape> 
</item></layer-list>

tab_notpressed_bg c'est le même sauf que tu change la couleur ou autre.

24/07/2012, 17h33
italia57

ah oui excuse moi. Par contre je rencontre un petit problème c'est que j'arrive bien à naviguer entre les onglets mais l'onglet sélectionner reste le même. C'est à dire que l'application est utilisable normalement mais l'onglet qui est en pressed reste le même tous le temps.

EDIT: la couleur du texte passe bien de grise à blanche avec le focus mais pas le carré... enfin rectangle ici.

Tu n'as pas mi une image avec un fond de couleur ?

Tu as bien changer les couleur ex:
tab_pressed_bg:

Code:

1
2
3
4
5
6
 
 <gradient android:startColor="#00000000" 
          	   android:centerColor="#F7D798"
               android:endColor="#FEE57E"
 
               android:angle="270"/>

tab_notpressed_bg :

Code:

1
2
3
4
5
6
 
 <gradient android:startColor="#FEE57E" 
          	   android:centerColor="#F7D798"
               android:endColor="#00000000"
 
               android:angle="270"/>

Oui j'ai bien changer les couleurs. J'ai juste une image en faisant ça:
Code:

1 2 3 4 5 6 intent = new Intent().setClass(this, Menu.class); intent.putExtras(objetbunbleBis); spec = tabHost.newTabSpec("Menu").setIndicator("Menu", res.getDrawable(R.drawable.menu)).setContent(intent); tabHost.addTab(spec);
Mais si j'enlève:
Code:

1 2 res.getDrawable(R.drawable.menu)
ça ne change pas, ça fonctionne quand même pas

Pour changer les couleur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public static void setTabColor(TabHost tabhost) 
	{
	    for (int i = 0; i < tabhost.getTabWidget().getChildCount(); i++)
	    {
 
	    	tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_notpressed_bg);
 
 
		}
 
	    tabhost.getTabWidget().getChildAt(tabhost.getCurrentTab()).setBackgroundResource(R.drawable.tab_pressed_bg);
 
 
	}

Code:

1
2
tabHost.addTab(spec);
setTabColor(tabHost);

26/07/2012, 10h24
italia57

c'est bien ce que je fais mais le problème comme je t'ai dit c'est que le focus reste le même malgré que j'ai accès à tous les onglets

EDIT:

Voilà ce que ça donne, pourtant je suis sur l'onglet infos là et c'est toujours menu (celui ou j'arrive directement dessus depuis l'autre activité) qui est sélectionné.

http://www.restomaniak.com/media/dev...-26-105354.png
26/07/2012, 14h41
xouzi
Dsl je n'avais pas compris. Je me rappelle avoir eu le problème
Regarde du coter :
Code:

1 2 3 tabHost.setOnTabChangedListener(this); tabHost.addTab(spec);

Voir 40 message(s) de cette discussion en une page