Android : BOTTOM의 탭


148

나는 이것에 대해 약간의 대화를 보았지만 명확한 것은 없습니다. TabWidget의 탭을 화면 하단에 배치하는 방법이 있습니까? 그렇다면 어떻게?

다음을 시도했지만 작동하지 않았습니다.

a) 프레임 레이아웃 아래에 탭 위젯
설정 b) 탭 위젯의 중력을 "아래쪽"으로 설정

감사! llappall


10
"작동하지 않음"을 정의하십시오.
CommonsWare

아래 사이트에서 하나를 사용합니다. 작동 중 http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html
Juliousraj

3
iPhone을 탭 호스트처럼 사용하려면 여기를보십시오 .
Adil Soomro

답변:


272

화면 하단에 탭을 표시하는 가장 간단하고 강력하며 확장 가능한 솔루션입니다.

  1. 수직 LinearLayout에서 FrameLayout을 TabWidget 위에 놓습니다.
  2. 설정 layout_heightwrap_contentFrameLayout이와 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
디바이더는 실제로 하드 코딩되어 있습니다. 탭에 사용되는 드로어 블을 변경하려고 시도했습니다. 총 버머.
Jeremy Logan

6
이 답변 (또는 무엇인가)을 허용되는 답변으로 선택해야합니다.
JediPotPie

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
나는 분배기 제거 주석을 답변에 포함시켰다.
Arne Evertsson

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

이것을 사용하여 탭 위젯을 양식의 왼쪽에 게시합니다.
mr.j05hua

12

줄을 제거하는 방법이 있습니다.

1)이 튜토리얼을 따르십시오 : android-tabs-with-fragments

2) 그런 다음 Leaudro가 위에서 제안한 RelativeLayout 변경 사항을 적용하십시오 (레이아웃 소품을 모든 FrameLayouts에 적용하십시오).

항목 # 1의 tab.xml에 ImageView를 추가하고 탭과 같은 모양의 iPhone을 얻을 수도 있습니다.

여기 내가 지금하고있는 일의 스크린 샷이 있습니다. 나는 여전히 아이콘을 선택하고 수평 분포를 동일하게 유지하기 위해 할 일이 있지만 아이디어를 얻습니다. 필자의 경우 조각을 사용하고 있지만 동일한 주체가 표준 탭보기에 적용되어야합니다.

여기에 이미지 설명을 입력하십시오


게시 한 지 오래 되었지만 링크 에 nginx에 오신 것을 환영합니다! 그리고 페이지에는 다른 것이 없습니다.
DroidDev

1
그것은 내 사이트가 아니었다. 불행히도 나는 그것을 제어 할 수 없다. 이 시간이 지나면 시스템이 변경되어 Android 사용자를 위해 이러한 종류의 인터페이스를 구현해서는 안되며 현재는 약간 다르게 작동 할 것으로 예상됩니다.
Brill Pappin

3

모든 버전의 Android (특히 사용자 정의 UI 기능이있는 버전)에서 작동하는지 확실하지 않지만 하단에 회색 막대를 제거 할 수있었습니다.

 android:layout_marginBottom="-3dp"

TabWidget XML로 ...


3

tabWidget의 구분선을 제거하려는 모든 사람들을 위해 여기에 탭을 사용자 정의하고 탭이 맨 아래에있을 때 문제를 제거하는 데 도움이되는 예제 프로젝트 (및 해당 자습서)가 있습니다. 이클립스 프로젝트 : android-custom-tabs ; 원래 설명 : 블로그 ; 이것이 도움이 되었기를 바랍니다.


3

탭 활동의 맨 아래에 탭을 표시하는 방법에는 두 가지가 있습니다.

  1. 상대 레이아웃 사용
  2. Layout_weight 속성 사용

자세한 내용은 링크를 확인 하십시오 .


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

화면 하단에 안드로이드 탭을 배치하려고 할 때 동일한 문제가 발생했습니다. 내 시나리오는 레이아웃 파일을 사용하지 않고 코드에서 탭을 만드는 것이 었습니다. 각 탭에서 다른 접근 방식을 사용하여 너무 복잡해 보이는 활동을 시작하려고했습니다. 그래서 문제를 극복하기위한 샘플 코드는 다음과 같습니다.

안드로이드에서 탭을 추가하고 배치하는 것


1

예, 참조하십시오 : link , 그는 활동이 아닌 xml 레이아웃을 사용하여 새 탭을 만들었습니다. 따라서 xml 코드 (FrameLayout-padpx에 paddingTop 설정)를 넣고 코드를 작성하십시오.

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


}

}


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.