Android: вкладки в нижней части

148

Я видел некоторую болтовню об этом, но ничего определенного. Есть ли способ поместить вкладки в TabWidget в нижней части экрана? Если так, то как?

Я попробовал следующее, но не сработало:

а) установка вкладки под раскладкой кадра
б) установка гравитации вкладки "снизу"

Спасибо! llappall

llappall
источник
10
Пожалуйста, укажите «не работает».
CommonsWare
Я использую один из нижеприведенного сайта. это работает http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html
Juliousraj
3
Посмотрите здесь, если вы хотите, чтобы iPhone как хосты вкладок.
Адил Соомро

Ответы:

272

Вот самое простое, надежное и масштабируемое решение для отображения вкладок в нижней части экрана.

  1. В вашей вертикальной LinearLayout поместите FrameLayout над TabWidget
  2. Набор layout_heightдля wrap_contentна обоих FrameLayout и TabWidget
  3. Установить FrameLayout's android:layout_weight="1"
  4. Установить TabWidget's android:layout_weight="0" (0 по умолчанию, но для акцента, читаемости и т. Д.)
  5. Установите TabWidget's android:layout_marginBottom="-4dp"(чтобы удалить нижний разделитель)

Полный код:

<?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">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginBottom="-4dp"/>

    </LinearLayout>

</TabHost>
stormin986
источник
3
Делитель на самом деле жестко запрограммирован. Я пытался изменить элементы рисования, используемые для вкладок, и нашел его. Всего облом.
Джереми Логан
6
Вы должны выбрать это (или что-то) в качестве принятого ответа.
JediPotPie
4
Единственное необходимое здесь отклонение от стандартного примера Google TabWidget - это установка layout_weight=1на FrameLayout. Это позволяет элементу управления вкладками сначала «требовать» свою высоту вне LinearLayout.
Ник Фарина
19
Чтобы избавиться от разделителя в нижней части TabWidget, просто добавьте android:layout_marginBottom="-5px"в TabWidget. Это переместит TabWidget с нижней части экрана на 5 пикселей, достаточно, чтобы вы не увидели разделитель. FrameLayout будет компенсировать размер, поэтому он работает отлично. Я не уверен, изменяется ли размер делителя на больших устройствах или нет. Возможно, вам придется использовать dpвместо px.
Джейк Уилсон
1
Я включил комментарий удаления делителя в ответ.
Арне Эвертссон
38

Попробуйте;) Просто посмотрите содержимое FrameLayout (@ id / tabcontent), потому что я не знаю, как оно будет обрабатываться в случае прокрутки ... В моем случае это работает, потому что я использовал ListView в качестве содержимого моих вкладок , :) Надеюсь, поможет.

<?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: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_alignParentTop="true" 
             android:layout_above="@android:id/tabs" />
    <TabWidget android:id="@android:id/tabs"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true" />
    </RelativeLayout>
</TabHost>
Leaudro
источник
4
+1 Но ты заметил черную / серую полосу в верхней части экрана? Как ты это убрал?
Ахмет Эмра
Я использую это, чтобы разместить виджет вкладки на левой стороне формы.
mr.j05hua
12

Есть способ убрать строку.

1) Следуйте этому руководству: Android-вкладки с фрагментами

2) Затем примените изменение RelativeLayout, предложенное Leaudro выше (примените реквизиты макета ко всем FrameLayouts).

Вы также можете добавить ImageView к tab.xml в элементе # 1 и получить очень похожий на iPhone вид вкладок.

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

введите описание изображения здесь

Брилл Паппин
источник
Прошло много времени с тех пор, как вы опубликовали это, но ваша ссылка теперь гласит: Добро пожаловать в nginx! и больше ничего нет на странице.
DroidDev
1
Это был не мой сайт, но, к сожалению, я не могу его контролировать. Однако по прошествии этого времени системы изменились настолько, что вы, вероятно, не должны реализовывать такого рода интерфейс для своих пользователей Android, они ожидают, что теперь все будет работать немного иначе.
Брилл Паппин
3

Не уверен, что он будет работать для всех версий Android (особенно с пользовательским интерфейсом), но мне удалось убрать серую полосу внизу, добавив

 android:layout_marginBottom="-3dp"

в XML-код TabWidget ...

Джастин
источник
3

Для всех тех, кто пытается удалить разделительную линию tabWidget, вот пример проекта (и соответствующего учебного пособия), который отлично подходит для настройки вкладок и, таким образом, устранения проблем, когда вкладки находятся внизу. Проект Eclipse: android-custom-tabs ; Исходное объяснение: блог ; Надеюсь, это помогло.

Djumaka
источник
3
<?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" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:background="#252a31"
            android:tabStripEnabled="false" >
        </TabWidget>
    </LinearLayout>

</TabHost>
Санджай Мангаролия
источник
1

Это может быть не совсем то, что вы ищете (это не «простое» решение для отправки ваших вкладок внизу экрана), но, тем не менее, это интересное альтернативное решение, которое я хотел бы отметить вам:

ScrollableTabHost разработан так, чтобы вести себя как TabHost, но с дополнительным обзором прокрутки для размещения большего количества элементов ...

возможно, покопавшись в этом проекте с открытым исходным кодом, вы найдете ответ на свой вопрос. Если я увижу что-нибудь проще, я вернусь к тебе.

Хьюберт
источник
1

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

добавляющая-Вкладка-в-андроида-и-размещая-их

Zeeshan
источник
1

Да, смотрите: ссылка , но он использовал макеты XML, а не действия для создания новой вкладки, поэтому поместите его код XML (установите paddingTop для FrameLayout - 0px), а затем напишите код:

public class SomeActivity extends ActivityGroup {

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

    TabHost tab_host = (TabHost) findViewById(R.id.edit_item_tab_host); 

    tab_host.setup(this.getLocalActivityManager());

    TabSpec ts1 = tab_host.newTabSpec("TAB_DATE"); 
    ts1.setIndicator("tab1"); 
    ts1.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts1); 

    TabSpec ts2 = tab_host.newTabSpec("TAB_GEO"); 
    ts2.setIndicator("tab2"); 
    ts2.setContent(new Intent(this, Login.class)); 
    tab_host.addTab(ts2); 

    TabSpec ts3 = tab_host.newTabSpec("TAB_TEXT"); 
    ts3.setIndicator("tab3"); 
    ts3.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts3); 

    tab_host.setCurrentTab(0);      


}

}

Павел
источник
0

Я рекомендую использовать этот код для стабильной работы, он оптимизирован для вложенных фрагментов во вкладке (например, вложенный MapFragment) и протестирован на «не держать действия»: https://stackoverflow.com/a/23150258/2765497

Flinbor
источник