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

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

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

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

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

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

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

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); 

(Группы – это имя вкладки).

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

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

Идея состоит в том, чтобы использовать скрытый 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, и вы можете создать полностью настраиваемый внешний вид своих вкладок.

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 и тексты):

  <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: оттенок, а затем вы можете выбрать фон с помощью шестнадцатеричных триплетов: как закрасить растровое изображение

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: оттенок, а затем вы можете выбрать фон с помощью шестигранных триплетов. Читайте: дальнейшее объяснение

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 Tab (поиск ресурсов в Android.jar, чтобы найти подходящие чертежи), плюс вы можете настроить дополнительные поведенческие действия, как вам хочется.

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