2010-12-16 17 views
7

Necesito escalar mis imágenes de fondo de TabWidget para que mantengan la relación de aspecto.
Estoy usando un TabHost con un TabWidget. Entonces estoy usando setBackgroundDrawable para establecer las imágenes.TabHost/TabWidget - Imagen de fondo de escala?

Encontré una respuesta cercana aquí - Background in tab widget ignore scaling. Sin embargo, no estoy seguro de dónde agregar el nuevo código Drawable. (Trabajando con el ejemplo HelloTabWidget, ninguno de mis módulos usa RelativeLayout, y no veo ningún diseño para "tabcontent").

También encontré este hilo - Android: Scale a Drawable or background image?. Según él, parece que tendría que escalar previamente mis imágenes, lo que frustra el propósito de hacerlas escalables.

También encontré otro hilo en el que alguien subclasificó la clase Drawable para que no se escale, o se escalaría correctamente. No puedo encontrarlo ahora, pero parece mucho MUCHO pasar cuando deberías ser capaz de hacer algo simple como mTab.setScaleType (centerInside).

Aquí está mi código:

main.xml:

<?xml version="1.0" encoding="utf-8"?> 
<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" 
    android:background="@drawable/main_background"> 
    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"> 
    <FrameLayout 
      android:id="@android:id/tabcontent" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_weight="1"/>   
    <TabWidget 
      android:id="@android:id/tabs" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_weight="0"/> 
    </LinearLayout> 
</TabHost> 

actividad:

 tabHost.setOnTabChangedListener(new OnTabChangeListener() { 
      TabHost changedTabHost = getTabHost(); 
      TabWidget changedTabWidget = getTabWidget(); 
      View changedView = changedTabHost.getTabWidget().getChildAt(0); 

      public void onTabChanged(String tabId) { 
       int selectedTab = changedTabHost.getCurrentTab(); 
       TabWidget tw = getTabWidget(); 

       if(selectedTab == 0) { 
        //setTitle("Missions Timeline"); 
        View tempView = tabHost.getTabWidget().getChildAt(0); 
        tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_timeline_on)); 
        tempView = tabHost.getTabWidget().getChildAt(1); 
        tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_map_off)); 
        tempView = tabHost.getTabWidget().getChildAt(2); 
        tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_search_off)); 
        tempView = tabHost.getTabWidget().getChildAt(3); 
        tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_news_off)); 
        tempView = tabHost.getTabWidget().getChildAt(4); 
        tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_license_off)); 
          //ImageView iv = (ImageView)tabHost.getTabWidget().getChildAt(0).findViewById(android.R.id.icon); 
          //iv.setImageDrawable(getResources().getDrawable(R.drawable.tab_timeline_on)); 
          //iv = (ImageView)tabHost.getTabWidget().getChildAt(1).findViewById(android.R.id.icon); 
          //iv.setImageDrawable(getResources().getDrawable(R.drawable.tab_map_off)); 
        } else if (selectedTab == 1) { 
         //setTitle("Spinoffs Around You"); 
         View tempView = tabHost.getTabWidget().getChildAt(0); 
         tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_timeline_off)); 
         tempView = tabHost.getTabWidget().getChildAt(1); 
         tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_map_on)); 
         tempView = tabHost.getTabWidget().getChildAt(2); 
         tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_search_off)); 
         tempView = tabHost.getTabWidget().getChildAt(3); 
         tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_news_off)); 
         tempView = tabHost.getTabWidget().getChildAt(4); 
         tempView.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_license_off)); 
} 

También probé 9patch imágenes, pero que terminan siendo demasiado pequeño.

Entonces, ¿cuál es la mejor manera de hacerlo?

Respuesta

0

Sospecho que la razón por la que está luchando por encontrar una forma original de realizar escalas de imagen de fondo es que generalmente no se considera una buena práctica. La escala de las imágenes tiende a introducir artefactos y bandas que pueden hacer que su UI se vea desagradable. La excepción a esto está dentro de una Imageview, pero yo diría que el soporte de escalamiento que brinda esta clase tiene más la intención de soportar cosas como fotos o contenido web (es decir, imágenes que no ha enviado con su aplicación).

Su diseño de interfaz de usuario debe diseñarse de tal manera que cualquier imagen de fondo basada en recursos se debe preescalar a la resolución correcta para el tamaño de densidad/pantalla del dispositivo. En otras palabras, debería proporcionar múltiples versiones de cada dibujable para adaptarse a múltiples densidades y tamaños de pantalla utilizando la convención de nomenclatura de carpetas de recursos descrita en la guía de desarrollo Supporting Multiple Screens.

La interfaz de usuario debe distribuirse de manera tal que se puedan manejar las pequeñas diferencias de tamaño de pantalla entre los dispositivos sin necesidad de escalar las imágenes de fondo de las vistas que contiene. Obviamente no sé cuál es su interfaz de usuario propuesta, por lo que es difícil hacer sugerencias concretas, pero generalmente utilizo colores simples de fondo o ShapeDrawable para rellenar dinámicamente el espacio entre las vistas.

Sin embargo, si realmente está realmente seguro de que quiere escalar sus imágenes de fondo a pesar de la predicación anterior :-), ¿por qué no intenta usar un ScaleDrawable para envolver su drawable existente?

Si conoce la altura y la anchura de ambos su punto de vista y estirable imagen de fondo, a continuación, puede hacer algo como:

Drawable backgroundDrawable = getResources().getDrawable(R.drawable.tab_license_off); 
tempView.setBackgroundDrawable(
    new ScaleDrawable(
     backgroundDrawable, 
     Gravity.CENTER, 
     tempView.getWidth()/backgroundDrawable.getIntrinsicWidth(), 
     tempView.getHeight()/backgroundDrawable.getIntrinsicHeight());