Làm cách nào để triển khai các tab cuộn ngang?

Question

Tôi đang cố triển khai ứng dụng này. Tại thời điểm này tôi đã thiết kế các tab trên nó và vì tôi có nhiều hơn 7 tab, nó trông quá tắc nghẽn. Làm thế nào tôi có thể thiết kế nó để tabwidget có thể cuộn theo chiều ngang. Tôi đã thấy thiết kế này trên một vài ứng dụng trên thị trường nhưng không có đầu mối làm thế nào để thực hiện điều này trong ứng dụng của tôi.

Một ứng dụng tôi thấy có cuộn cuộn ngang, nơi nó tự cuộn và khi bạn nhấn vào hình ảnh/nút cụ thể, nó hiển thị một số nội dung. Nó không có vẻ là các tab tôi đoán.

Vì vậy, có ai có ý tưởng về điều này không?

Answer 1

Vui lòng xem ứng dụng ViewPager của Jake Wharton. Đó là chính xác những gì bạn cần. Nó là một dự án thư viện, vì vậy bạn phải đưa nó vào dự án của bạn.

JakeWharton/Android-ViewPagerIndicator

Answer 2

Đây là ví dụ khá hay bằng cách sử dụng HorizontalScrollView. http://java.dzone.com/articles/scrolling-tabs-android

Answer 3

Kiểm tra liên kết này: https://dzone.com/articles/scrolling-tabs-android

Quấn TabWidget của bạn với một HorizontalScrollView và các thiết lập tab sẽ có thể mở rộng ra ngoài chiều rộng của màn hình và người dùng có thể kéo các tab trái và bên phải theo yêu cầu:

<?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"> <HorizontalScrollView android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:fillViewport="true"       android:scrollbars="none">  <TabWidget android:id="@android:id/tabs"     android:layout_width="fill_parent"     android:layout_height="wrap_content"/> </HorizontalScrollView> <FrameLayout android:id="@android:id/tabcontent"     android:layout_width="fill_parent"     android:layout_height="fill_parent" /> </LinearLayout></TabHost> 

Answer 4

TabLayout từ thư viện thiết kế Android

<android.support.design.widget.TabLayout 
    android:id="@+id/categories" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:tabMode="scrollable" /> 

Answer 5

<HorizontalScrollView 
    android:id="@+id/vTabs" 
    android:scrollbars="none" 
    android:layout_width="fill_parent" 
    android:layout_alignParentBottom="true" 
    android:layout_height="wrap_content"> 
    <LinearLayout 
     android:orientation="horizontal" 
     android:background="@color/main_color_gray_dk" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content"> 
     <Button 
      android:enabled="false" 
      android:id="@+id/tab1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/popular" /> 
     <View 
      android:id="@id/view1" 
      android:layout_width="@dimen/pad_1dp" 
      android:layout_height="fill_parent" /> 
     <Button 
      android:id="@id/tab2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/newest" /> 
     <View 
      android:id="@id/view1" 
      android:layout_width="@dimen/pad_1dp" 
      android:layout_height="fill_parent" /> 
     <Button 
      android:id="@id/tab3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/distance" /> 
     <View 
      android:id="@id/view1" 
      android:layout_width="@dimen/pad_1dp" 
      android:layout_height="fill_parent" /> 
     <Button 
      android:id="@+id/tab4" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/minimum" /> 
    </LinearLayout> 
</HorizontalScrollView> 

Thay đổi nội dung theo sở thích của bạn. Đặt trong một relatveLayout và alignToParentBottom = "true" Hy vọng điều này sẽ giúp