Android: настройка внешнего вида вкладок с помощью TabHost & TabWidget

Я раньше открывал пост об этом, но чувствую, что теперь могу (после прочтения некоторых других постов) лучше объяснить, что я хочу, и перефразировать его, чтобы лучше понять.

Я последовал руководству по макету вкладок в руководстве разработчика и сумел создать вкладки с ним, но я хочу внести в него некоторые изменения (и я просматривал другие публикации, но либо в коде было много ошибок, либо не отвечу, что я ищу).

  1. Первая проблема, с которой я столкнулся, заключается в том, что тест в большей степени выполняется над значком, а не под ним (я использовал значок с размерами 48x48, как рекомендовано в руководстве разработчика). Я хочу, чтобы вкладка с действовала как wrap_content. Я также хочу изменить размер текста (я думаю, это называется метка).

  2. Я хочу использовать шестнадцатеричные тройки, чтобы изменить цвет фона вкладок, чтобы изменить его на ситуации: когда эта вкладка выбрана, а когда нет.

  3. Я хочу, чтобы можно было изменить цвет линии, которая находится под вкладками, я не мог найти информацию о том, как это сделать.

Код, который я сейчас использую для создания новой вкладки (из руководства разработчика):

    intent = new Intent().setClass(this, GroupsActivity.class);
    spec = tabHost.newTabSpec("groups").setIndicator("groups",
                      res.getDrawable(R.drawable.ic_tab_groups))
                  .setContent(intent);
    tabHost.addTab(spec);

(groups - название вкладки).

Помощь очень ценится!

java,android,tabs,android-tabhost,tabwidget,

7

Ответов: 3


17 принят

Вместо того, чтобы пытаться настроить сами вкладки виджетов, вот альтернативный подход, который я успешно использовал в проекте, который может избавить вас от головной боли:

Идея состоит в том, чтобы использовать скрытый TabWidget в макете и управлять им с помощью настроенного LinearLayout, содержащего кнопки. Таким образом, вы можете легко настроить кнопки так, как вам нравится. Вы будете контролировать фактический TabWidget в своей деятельности в OnClick каждой кнопки.

  1. Создайте макет с помощью TabWidget и кнопок:

        <?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">
    
        <RelativeLayout android:orientation="vertical"
            android:layout_width="fill_parent" android:layout_height="fill_parent"
            android:gravity="bottom">
            <TabWidget android:id="@android:id/tabs"
                android:layout_width="fill_parent" android:layout_height="wrap_content"
                android:visibility="gone" />
    
            <LinearLayout android:id="@+id/tabbar"
                android:orientation="horizontal" android:layout_width="fill_parent"
                android:layout_height="wrap_content">
                <Button android:id="@+id/firstButton"
                    android:layout_alignParentTop="true" android:background="@drawable/btn_first_on"
                    android:layout_width="100dp" android:layout_height="43dp"
                    android:clickable="true"></Button>
                <Button android:id="@+id/secondButton"
                    android:layout_alignParentTop="true" android:background="@drawable/btn_second_off"
                    android:layout_height="43dp" android:layout_width="100dp"
                    android:clickable="true"></Button>
                <Button android:id="@+id/thirdButton"
                    android:layout_alignParentTop="true" android:background="@drawable/btn_third_off"
                    android:layout_height="43dp" android:layout_width="100dp"
                    android:clickable="true"></Button>
                <Button android:id="@+id/forthButton"
                    android:layout_alignParentTop="true" android:background="@drawable/btn_forth_off"
                    android:layout_height="43dp" android:layout_width="100dp"
                    android:clickable="true"></Button>
            </LinearLayout>
    
            <FrameLayout android:id="@android:id/tabcontent"
                android:layout_width="fill_parent" android:layout_height="fill_parent"
                android:layout_below="@+id/tabbar" />
    
        </RelativeLayout>
    </TabHost>
  2. Настройте onCreate своей деятельности для обработки, используя кнопки для настройки вкладок:

        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
    
            // tabs        
            firstButton = (Button) findViewById(R.id.firstButton);
            secondButton = (Button) findViewById(R.id.secondButton);        
            thirdButton = (Button) findViewById(R.id.thirdButton);
            forthButton = (Button) findViewById(R.id.forthButton);
    
            Resources res = getResources(); // Resource object to get Drawables
            final TabHost tabHost = getTabHost();  // The activity TabHost
            TabHost.TabSpec spec;  // Resusable TabSpec for each tab
            Intent intent;  // Reusable Intent for each tab
    
            intent = new Intent().setClass(this, FirstGroupActivity.class);
            spec = tabHost.newTabSpec("first").setIndicator("First").setContent(intent);
            tabHost.addTab(spec);
            intent = new Intent().setClass(this, SecondGroupActivity.class);
            spec = tabHost.newTabSpec("second").setIndicator("Second").setContent(intent);
            tabHost.addTab(spec);   
    
            intent = new Intent().setClass(this, ThirdGroupActivity.class);
            spec = tabHost.newTabSpec("third").setIndicator("Third").setContent(intent);
            tabHost.addTab(spec);
    
    
            intent = new Intent().setClass(this, ForthActivity.class);
            spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent);
            tabHost.addTab(spec);
    
    
            tabHost.setCurrentTab(0);
    
            firstButton.setOnClickListener(new OnClickListener() {
    
                public void onClick(View v)
                {
                    tabHost.setCurrentTab(0);
                    firstButton.setBackgroundResource(R.drawable.btn_first_on);
                    secondButton.setBackgroundResource(R.drawable.btn_second_off);              
                    thirdButton.setBackgroundResource(R.drawable.btn_third_off);
                    forthButton.setBackgroundResource(R.drawable.btn_forth_off);            
                }
    
            });
    
    
            secondButton.setOnClickListener(new OnClickListener() {
    
                public void onClick(View v)
                {
                    tabHost.setCurrentTab(1);
                    firstButton.setBackgroundResource(R.drawable.btn_first_off);
                    secondButton.setBackgroundResource(R.drawable.btn_second_on);                       
                    thirdButton.setBackgroundResource(R.drawable.btn_third_off);                        
                    forthButton.setBackgroundResource(R.drawable.btn_forth_off);
    
                }
    
            });
    
    
            thirdButton.setOnClickListener(new OnClickListener() {
    
                public void onClick(View v)
                {
                    tabHost.setCurrentTab(3);
                    firstButton.setBackgroundResource(R.drawable.btn_first_off);
                    secondButton.setBackgroundResource(R.drawable.btn_second_off);              
                    thirdButton.setBackgroundResource(R.drawable.btn_third_on);
                    forthButton.setBackgroundResource(R.drawable.btn_forth_off);
    
                }
    
            });
    
    
            forthButton.setOnClickListener(new OnClickListener() {
    
                public void onClick(View v)
                {
                    tabHost.setCurrentTab(4);
                    firstButton.setBackgroundResource(R.drawable.btn_first_off);
                    secondButton.setBackgroundResource(R.drawable.btn_second_off);              
                    thirdButton.setBackgroundResource(R.drawable.btn_third_off);
                    forthButton.setBackgroundResource(R.drawable.btn_forth_on);
    
                }
    
            });
        }

Как видите, я использую drawables для изображений кнопок включения и выключения. Используя эту технику, вы не ограничены доступными опциями, когда просто пытаетесь настроить внешний вид вкладок TabWidget, и вы можете создать полностью индивидуальный вид ваших вкладок.


11

1- Используйте пользовательский вид:

    spec = tabHost.newTabSpec("groups");
    View view = LayoutInflater.from(this).inflate(R.layout.tabwidget_tabs, tabHost.getTabWidget(), false);
    spec.setIndicator(view);
    spec.setContent(intent);

вместо:

    spec = tabHost.newTabSpec("groups").setIndicator("groups", res.getDrawable(R.drawable.ic_tab_groups)).setContent(intent);
    tabHost.addTab(spec);

И затем определите представление для вкладок в файле tabwidget_tabs.xml (вы можете определить ImageView перед textView и textSize):

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tabsLayout" 
        android:layout_width="wrap_content"
        android:layout_height="34dp"
        android:background="@drawable/tabs_bkgrd"
        android:padding="5dp" 
        android:orientation="vertical">

        <TextView android:id="@+id/tabsText" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:singleLine="true"
            android:textStyle="bold" 
            android:gravity="center_horizontal"
            android:textSize="14dp" />
    </LinearLayout>

2. Невозможно использовать шестнадцатеричные тройки, чтобы изменить цвет фона вкладок, потому что они рисуются, а не цвета. Однако вы можете использовать селектор, который изменяет рисование. и вы можете объединить это решение с setColorFilter () и android: tint, а затем вы можете выбрать фон, используя шестнадцатеричные триплеты: Как тонировать растровое изображение

tabs_bkgrd.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" 
        android:state_pressed="false" android:drawable="@drawable/tab_unselected_shape" />
    <item android:state_focused="false" android:state_selected="true" 
        android:state_pressed="false" android:drawable="@drawable/tab_selected_shape" /> 

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" 
        android:state_pressed="false" android:drawable="@drawable/tab_focused_shape" />
    <item android:state_focused="true" android:state_selected="true" 
        android:state_pressed="false" android:drawable="@drawable/tab_focused_shape" /> 

    <!-- Pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_pressed_shape" /> 

    </selector>

Вы можете определить цвет или форму, tab_selected_shape.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle">
            <gradient android:startColor="@color/gold1"
                android:centerColor="@color/gold2" 
                android:endColor="@color/gold2"
                android:angle="@integer/vertical_shape" />
    </shape>

3-линия тоже рисуется. Вы можете найти файлы в SDK и скопировать их в свой проект после изменения их, чтобы изменить цвет с помощью GIMP. Вы можете объединить это решение с setColorFilter () и android: tint, а затем вы можете выбрать фон, используя шестнадцатеричные тройки. Читайте: дальнейшее объяснение

Android-СДК-linux_x86 / платформы / андроид-7 / данные / RES / вытяжка

tab_bottom_left.xml,  
tab_bottom_right.xml,  
tab_indicator.xml  (define state changes)

Android-СДК-linux_x86 / платформы / андроид-7 / данные / RES / вытяжка-MDPI

tab_focus.9.png (изменить цвет)
tab_focus_bar_left.9.png
tab_focus_bar_right.9.png
tab_press.9.png (изменить цвет)
tab_press_bar_left.9.png
tab_press_bar_right.9.png
tab_selected.9.png (изменить цвет)
tab_selected_bar_left.9 .png tab_selected_bar_right.9.png
tab_unselected.9.png


Как насчет решения, которое я предложил по этому вопросу ?

Вы можете настроить рисование каждой кнопки, используя ту же панель, которая используется в родной панели вкладок Android (ищите ресурсы в Android.jar, чтобы найти нужные рисунки), плюс вы можете настроить дополнительные характеристики поведения по своему желанию.

В конце вы получите что-то, что графически похоже на панель вкладок с точки зрения пользователя, но действует иначе с точки зрения разработчика.

Java, Android, вкладки, андроид-tabhost, TabWidget,
Похожие вопросы