Android: Tab di BOTTOM


148

Saya telah melihat beberapa obrolan tentang ini, tetapi tidak ada yang pasti. Apakah ada cara untuk meletakkan tab di TabWidget ke bagian bawah layar? Jika ya, bagaimana caranya?

Saya sudah mencoba yang berikut ini, tetapi tidak berhasil:

a) mengatur tabwidget di bawah framelayout
b) mengatur gravitasi tabwidget ke "bawah"

Terima kasih! llappall


10
Silakan tentukan "tidak berhasil".
CommonsWare

Saya menggunakan satu dari situs di bawah ini. ini berfungsi http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html
Juliousraj

3
Lihat di sini jika Anda ingin iPhone seperti host tab.
Adil Soomro

Jawaban:


272

Inilah solusi paling sederhana, paling kuat, dan dapat diskalakan untuk mendapatkan tab di bagian bawah layar.

  1. Di LinearLayout vertikal Anda, letakkan FrameLayout di atas TabWidget
  2. Set layout_heightke wrap_contentpada kedua FrameLayout dan TabWidget
  3. Setel FrameLayout android:layout_weight="1"
  4. Set TabWidget's android:layout_weight="0"(0 adalah default, tetapi untuk penekanan, keterbacaan, dll)
  5. Setel TabWidget's android:layout_marginBottom="-4dp"(untuk menghapus pembagi bawah)

Kode lengkap:

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

3
Pembagi ini sebenarnya berkode keras. Saya mencoba mengubah drawables yang digunakan untuk tab dan menemukannya. Nyebelin total.
Jeremy Logan

6
Anda harus memilih ini (atau sesuatu) sebagai jawaban yang diterima.
JediPotPie

4
Satu-satunya penyimpangan yang diperlukan di sini dari contoh TabWidget standar Google adalah pengaturan layout_weight=1pada FrameLayout. Ini memungkinkan kontrol tab untuk "mengklaim" tingginya dari LinearLayout terlebih dahulu.
Nick Farina

19
Untuk menyingkirkan pembagi di bagian bawah TabWidget, cukup tambahkan android:layout_marginBottom="-5px"ke TabWidget. Ini akan memindahkan TabWidget dari bagian bawah layar 5 piksel, cukup sehingga Anda tidak melihat pembagi. FrameLayout akan mengkompensasi ukurannya sehingga bekerja dengan sempurna. Saya tidak yakin apakah ukuran pembagi berubah pada perangkat yang lebih besar atau tidak. Anda mungkin harus menggunakan dpbukan px.
Jake Wilson

1
Saya telah memasukkan komentar hapus-pembagi ke dalam jawabannya.
Arne Evertsson

38

Cobalah;) Cukup tonton konten FrameLayout (@ id / tabcontent), karena saya tidak tahu bagaimana ini akan menangani jika menggulir ... Dalam kasus saya ini berfungsi karena saya menggunakan ListView sebagai konten dari tab saya. . :) Semoga ini bisa membantu.

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

4
+1 Tapi apakah Anda melihat bilah hitam / abu-abu di atas layar? Bagaimana Anda menghapusnya?
ahmet emrah

Saya menggunakan ini untuk memposting widget tab ke sisi kiri formulir.
mr.j05hua

12

Ada cara untuk menghapus garis.

1) Ikuti tutorial ini: android-tab-dengan-fragmen

2) Kemudian terapkan perubahan RelativeLayout yang disarankan Leaudro di atas (terapkan alat peraga tata letak untuk semua FrameLayouts).

Anda juga dapat menambahkan ImageView ke tab.xml di item # 1 dan mendapatkan tampilan seperti iPhone di tab.

Ini adalah screenshot dari apa yang saya kerjakan saat ini. Saya masih memiliki beberapa pekerjaan yang harus dilakukan, terutama membuat pemilih untuk ikon dan memastikan distribusi horizontal yang sama, tetapi Anda mendapatkan ide. Dalam kasus saya, saya menggunakan fragmen, tetapi prinsipal yang sama harus diterapkan ke tampilan tab standar.

masukkan deskripsi gambar di sini


Sudah lama sejak Anda memposting ini, tetapi tautan Anda sekarang mengatakan Selamat datang di nginx! dan tidak ada lagi yang ada di halaman.
DroidDev

1
Sayangnya itu bukan situs saya, sayangnya saya tidak memiliki kontrol atasnya. Setelah jumlah waktu ini, sistem telah berubah cukup sehingga Anda mungkin tidak seharusnya mengimplementasikan antarmuka semacam ini untuk pengguna Android Anda, mereka akan mengharapkan hal-hal bekerja sedikit berbeda sekarang.
Brill Pappin

3

Tidak yakin apakah itu akan berfungsi untuk semua versi Android (terutama yang dengan hal-hal UI khusus), tetapi saya dapat menghapus bilah abu-abu di bagian bawah dengan menambahkan

 android:layout_marginBottom="-3dp"

ke TabWidget XML ...


3

Bagi Anda yang mencoba menghapus garis pemisah dari tabWidget, berikut ini adalah proyek contoh (dan tutorialnya masing-masing), yang berfungsi bagus untuk menyesuaikan tab dan dengan demikian menghilangkan masalah ketika tab berada di bagian bawah. Eclipse Project: android-custom-tabs ; Penjelasan asli: blog ; Semoga ini bisa membantu.



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

Ini mungkin bukan apa yang Anda cari (ini bukan solusi "mudah" untuk mengirim Tab Anda ke bagian bawah layar) tetapi tetap merupakan solusi alternatif yang menarik yang ingin saya beri tanda kepada Anda:

ScrollableTabHost dirancang untuk berperilaku seperti TabHost, tetapi dengan scrollview tambahan agar sesuai dengan lebih banyak item ...

mungkin dengan menggali proyek sumber terbuka ini Anda akan menemukan jawaban untuk pertanyaan Anda. Jika saya melihat sesuatu yang lebih mudah, saya akan kembali kepada Anda.


1

Saya mengalami masalah yang sama dengan tab android ketika mencoba menempatkannya di bagian bawah layar. Skenario saya adalah tidak menggunakan file tata letak dan membuat tab dalam kode, saya juga mencari untuk memecat aktivitas dari masing-masing tab yang tampaknya agak terlalu rumit menggunakan pendekatan lain jadi, berikut ini contoh kode untuk mengatasi masalah:

menambahkan-tab-di-android-dan-menempatkan-mereka


1

Ya, lihat: tautan , tetapi ia menggunakan tata letak xml, bukan aktivitas untuk membuat tab baru, jadi letakkan kode xml-nya (atur paddingTop untuk FrameLayout - 0px) lalu tulis kode:

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


}

}


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.