Android:下部のタブ


148

私はこれについておしゃべりを見ましたが、明確なものは何もありません。画面の下部のTabWidgetにタブを配置する方法はありますか?もしそうなら、どうですか?

私は以下を試しましたが、うまくいきませんでした:

a)フレームレイアウトの下にタブウィジェットを
設定するb)タブウィジェットの重力を「下」に設定する

ありがとう!llappall


10
「機能しなかった」と定義してください。
CommonsWare 2010年

下記サイトから使用しています。それは働いていますhttp://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html
Juliousraj

3
iPhoneのようなタブホストが必要な場合は、こちらをご覧ください
Adil Soomro 2012年

回答:


272

これが、画面の下部にタブを表示するための最もシンプルで最も堅牢でスケーラブルなソリューションです。

  1. 垂直方向のLinearLayoutで、FrameLayoutをTabWidgetの上に置きます
  2. 設定するlayout_heightにはwrap_contentでframeLayoutとTabWidgetの両方に
  3. FrameLayoutの設定 android:layout_weight="1"
  4. TabWidgetを設定しandroid:layout_weight="0"ます(0がデフォルトですが、強調、読みやすさなどのため)
  5. TabWidgetを設定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>

3
ディバイダーは実際にはハードコードされています。私はタブに使用されるドローアブルを変更しようとして、それを見つけました。完全に残念。
ジェレミー・ローガン、

6
これ(または何か)を受け入れられた回答として選択する必要があります。
JediPotPie 2010

4
ここでGoogleの標準的なTabWidgetの例からの唯一の必要な逸脱はlayout_weight=1、FrameLayoutの設定です。これにより、タブコントロールは最初にその高さをLinearLayoutから「主張」できます。
Nick Farina、

19
TabWidgetの下部にある仕切りを取り除くには、TabWidgetに追加android:layout_marginBottom="-5px"するだけです。これにより、TabWidgetが画面の下部から5ピクセル移動し、仕切りが見えなくなります。FrameLayoutはサイズが補正されるため、完全に機能します。大きいデバイスで仕切りのサイズが変わるかどうかはわかりません。のdp代わりに使用する必要がある場合がありpxます。
Jake Wilson

1
remove-dividerコメントを回答に組み込んだ。
Arne Evertsson、2012

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>

4
+1しかし、画面の上部にある黒い/灰色のバーに気付きましたか?どうやってそれを削除しましたか?
ahmet emrah 10/11/3

これを使用して、フォームの左側にタブウィジェットを投稿しています。
mr.j05hua 2012年

12

行を削除する方法があります。

1)このチュートリアルに従ってください: android-tabs-with-fragments

2)次に、Leaudroが上記で提案したRelativeLayoutの変更を適用します(すべてのFrameLayoutsにレイアウトプロップを適用します)。

アイテム#1のtab.xmlにImageViewを追加して、iPhoneのようにタブを表示することもできます。

これが私が今取り組んでいることのスクリーンショットです。まだやるべきことがいくつかあります。主にアイコンのセレクターを作成し、水平方向に均等に配分されるようにしますが、アイデアはわかります。私の場合、フラグメントを使用していますが、同じ原則が標準のタブビューにも適用されます。

ここに画像の説明を入力してください


これを投稿してからしばらく経ちましたが、リンクにWelcome to nginx!と表示されていますページには他に何もありません。
DroidDev

1
それは私のサイトではなかったので、残念ながらそれを制御することはできません。ただし、この時間の経過後、システムは十分に変更されたため、この種のインターフェースをAndroidユーザーに実装するべきではない可能性があります。彼らは今、少し異なる動作を期待しています。
Brill Pappin 2014

3

Androidのすべてのバージョン(特にカスタムUIのもの)で動作するかどうかはわかりませんが、下部にある灰色のバーを削除して、

 android:layout_marginBottom="-3dp"

TabWidget XMLに...


3

tabWidgetの区切り線を削除しようとするすべての人のために、以下はサンプルプロジェクト(およびそのそれぞれのチュートリアル)です。これは、タブをカスタマイズして、タブが下部にあるときに問題を取り除くのに非常に役立ちます。Eclipseプロジェクト:android-custom-tabs ; 元の説明:ブログ ; これがお役に立てば幸いです。



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はように動作するように設計されていますが、より多くの項目に適合するように追加のscrollviewを備えています...

このオープンソースプロジェクトを掘り下げると、疑問に対する答えが見つかるかもしれません。何かもっと簡単なことがあれば、また戻ってきます。


1

画面の下部に配置しようとすると、Androidタブでも同じ問題が発生しました。私のシナリオは、レイアウトファイルを使用せずにコードでタブを作成することでした。また、他のアプローチを使用すると少し複雑すぎるアクティビティを各タブから起動することも検討していたため、問題を解決するためのサンプルコードを次に示します。

追加タブ-アンドロイド-および-配置-それら


1

はい、参照してください: link、しかし彼は新しいタブを作成するためにアクティビティではなくxmlレイアウトを使用したので、彼のxmlコード(FrameLayoutのpaddingTop-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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.