2011-05-27 15 views
8

El estilo predeterminado para Android TabHost funciona bien para sistemas Android directos. Sin embargo, en HTC Sense, usan texto oscuro sobre un fondo oscuro, que no se puede leer.Buscando un estilo TabHost universal que funcione en las máscaras de Android, HTC Sense, Samsung, etc.

TabHost from HTC Sense UI

¿Cuál es la forma más fácil de tener un TabHost que tiene texto visible a través de todos los diferentes sabores de pieles androides? Preferiría no tener que hacer una apariencia completamente personalizada si es posible.

Mi targetSDK es 10 y mi minSDK es 7.

+0

relacionado: http://stackoverflow.com/questions/4127446/custom-style-for-androids-tabwidget y http://stackoverflow.com/questions/3647821/android-highlighted-tab-of-tabwidget-not -readable-on-htc-sense – emmby

Respuesta

4

te voy a dar los consejos para conseguir completamente independiente de la TabWidget y crear su propia navegación, que se puede personalizar como quiera y no molestar con el rígido TabWidget. No me refiero a tirar la impresionante TabHost, porque es fácil de usar TabHost con una navegación personalizada:

En primer lugar establecer su TabWidget como ido:

<TabHost 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/tabhost" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    <RelativeLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 
     <TabWidget 
      android:id="@android:id/tabs" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:visibility="gone"/> 

Y luego crear su propia navegación en su sitio de eso También puede crear un menú (con el botón de menú hardware) o menos así:

<TabHost 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/tabhost" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 
    <RelativeLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 
     <TabWidget 
      android:id="@android:id/tabs" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:visibility="gone"/> 
     <!-- content of your tabs--> 
     <FrameLayout 
      android:id="@android:id/tabcontent" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_above="@id/slider_stub" 
      android:background="@color/overview_banner_bg_down"/> 
     <!-- custom slider with horizontal scrollable radio buttons--> 
     <com.example.WrappingSlidingDrawer 
      android:id="@+id/tab_slider" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:handle="@+id/tab_slider_handle" 
      android:content="@+id/tab_scroller"> 
      <RelativeLayout 
       android:id="@+id/tab_slider_handle" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:background="@drawable/def_slider"> 
      </RelativeLayout> 
      <HorizontalScrollView 
       android:id="@+id/tab_scroller" 
       android:layout_width="fill_parent" 
       android:layout_height="wrap_content" 
       android:fadeScrollbars="false" 
       android:scrollbarAlwaysDrawHorizontalTrack="true" 
       android:scrollbarTrackHorizontal="@drawable/scrollbar_horizontal_track" 
       android:scrollbarThumbHorizontal="@drawable/scrollbar_horizontal_thumb" 
       android:fillViewport="true" 
       android:scrollbarSize="3dip" 
       android:fadingEdgeLength="80dp" 
       android:background="#343534"> 
       <RelativeLayout 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"> 
        <RadioGroup 
         android:id="@+id/custom_tabs" 
         android:layout_width="fill_parent" 
         android:layout_height="wrap_content" 
         android:layout_centerHorizontal="true" 
         android:gravity="center" 
         android:orientation="horizontal" 
         android:checkedButton="@+id/tab_overview"> 
         <RadioButton 
          android:id="@+id/tab_overview" 
          android:layout_height="55dp" 
          android:layout_width="55dp" 
          android:button="@null" 
          android:background="@drawable/def_checktab_overview"/> 
         <RadioButton 
          android:id="@+id/tab_news" 
          android:layout_height="55dp" 
          android:layout_width="55dp" 
          android:button="@null" 
          android:background="@drawable/def_checktab_news"/> 
          .....etc....your tabs...... 
        </RadioGroup> 
       </RelativeLayout> 
      </HorizontalScrollView> 
     </com.example.WrappingSlidingDrawer> 
    </RelativeLayout> 
</TabHost> 

Lo que tiene que hacer en el código de ahora:

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main_tab_layout); 

    setTabs(); 

    RadioGroup tabs = (RadioGroup) findViewById(R.id.custom_tabs); 

    tabs.setOnCheckedChangeListener(new OnCheckedChangeListener() { 
     @Override 
     public void onCheckedChanged(RadioGroup group, int checkedId) { 
      switch (checkedId) { 
      case R.id.tab_overview: 
       getTabHost().setCurrentTab(0); 
       break; 
      case R.id.tab_news: 
       getTabHost().setCurrentTab(1); 
       break; 
      ....etc..... 
      } 
     } 
    }); 
} 

/** 
* Delegate tab creation and adding. 
*/ 
private void setTabs() { 
    // add the necessary tabs 
    addTab(R.string.tab_overv_tag, OverviewActivityGroup.class); 
    addTab(R.string.tab_news_tag, NewsActivityGroup.class); 
      .....etc..... 
} 

/** 
* Create a tab with an Activity and add it to the TabHost 
* 
* @param tagId 
*   resource id of the string representing the tag for finding the tab  
* @param activity 
*   the activity to be added 
*/ 
private void addTab(int tagId, Class<? extends ActivityGroup> activity) { 
    // create an Intent to launch an Activity for the tab (to be reused) 
    Intent intent = new Intent().setClass(this, activity); 
    // initialize a TabSpec for each tab and add it to the TabHost 
    TabHost.TabSpec spec = usedTabHost.newTabSpec(getString(tagId)); 
    // use layout inflater to get a view of the tab to be added 
    View tabIndicator = getLayoutInflater().inflate(R.layout.tab_indicator, getTabWidget(), false); 
    spec.setIndicator(tabIndicator); 
    spec.setContent(intent); 
    usedTabHost.addTab(spec); 
} 

Todo el material indicador no es necesaria por cierto. ^^ En tu ActivityGroups tienes que establecer las actividades apropiadas, etc. Sabes las cosas.

Puede usar cualquier cosa para su navegación y aún puede usar las ventajas de un TabHost. Ya no te molestes con ese TabWidget. ;)

1

Después de algunas investigaciones, creo que la mejor opción sería utilizar la interfaz con pestañas de ActionBar, ya que parece mucho más fácil de diseñar. El ActionBarSherlock proporciona una capa de compatibilidad para ActionBar para dispositivos a partir de Android 1.6. Here you can look at examples sobre lo que puede obtener usando la biblioteca.

+1

ActionBarSherlock es increíble y también lo estoy usando, por lo que recomiendo esta solución. :-) – einschnaehkeee

Cuestiones relacionadas