Android: настройка внешнего вида вкладок с помощью TabHost & TabWidget
Я открываю пост об этом раньше, но чувствую, что теперь могу (после прочтения некоторых других постов) лучше объяснить, что я хочу, и перефразировать его, чтобы лучше понять.
Я последовал руководству по макету вкладок в руководстве разработчика и сумел создать с ним вкладки, но я хочу внести в него некоторые изменения (и я просматривал другие публикации, но либо в коде было много ошибок, либо не отвечу, что я ищу).
Первая проблема, с которой я столкнулся, заключается в том, что тест в большей степени выполняется над значком, а не под ним (я использовал значок с размерами 48x48, как рекомендовано в руководстве разработчика). Я хочу, чтобы вкладка действовала так, как это делает wrap_content. Я также хочу изменить размер текста (я думаю, это называется метка).
Я хочу использовать шестнадцатеричные тройки, чтобы изменить цвет фона вкладок, чтобы изменить его на ситуации: когда эта вкладка выбрана, а когда нет.
Я хочу, чтобы можно было изменить цвет линии, которая находится под вкладками, я не мог найти информацию о том, как это сделать.
Код, который я сейчас использую для создания новой вкладки (из руководства разработчика):
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 - название вкладки).
Помощь очень ценится!
3 ответа
Вместо того, чтобы пытаться настроить сами вкладки виджетов, вот альтернативный подход, который я успешно использовал в проекте, который может избавить вас от головной боли:
Идея состоит в том, чтобы использовать скрытый TabWidget в макете и управлять им с помощью настроенного LinearLayout, содержащего кнопки. Таким образом, вы можете легко настроить кнопки так, как вам нравится. Вы будете управлять фактическим TabWidget в своей деятельности в OnClick каждой кнопки.
Создайте макет с помощью 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>Настройте 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 и 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, чтобы найти нужные рисунки), плюс вы можете настроить дополнительные характеристики поведения по своему желанию.
В конце вы получите что-то, что графически похоже на панель вкладок с точки зрения пользователя, но действует иначе с точки зрения разработчика.