Android: Как создать вкладки с несколькими уровнями

Question

Я хочу создать многоуровневые вкладки в android. Он должен следовать многоуровневой иерархии или философии вложенных вкладок, как показано на изображении. При необходимости укажите ссылку или URL-адрес.

Answer 1

Использование нескольких слоев из Android TabLayout, см this. TabLayout полностью настраивается. Напр. добавление вкладок, установка высоты разделителя, использование пользовательских представлений в вкладках.

Answer 2

Чтобы сделать это, вы должны использовать ViewPager. Ниже код поможет вам сделать многоуровневые вкладки в android.

view_pager_main.xml

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabLayout" 
      style="@style/MyCustomTabLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabGravity="fill" 
      app:tabIndicatorColor="@android:color/white" 
      app:tabIndicatorHeight="3dp" 
      app:tabMode="fixed" 
      app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

    </FrameLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/white" /> 

    <TextView 
     android:id="@+id/tvNoPlans" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="No Plans Available" 
     android:textColor="@android:color/black" 
     android:visibility="gone" /> 

</android.support.design.widget.AppBarLayout> 

view_pager_child.xml

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabLayout_child" 
      style="@style/MyCustomTabLayout1" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabGravity="center" 
      app:tabIndicatorColor="@color/btn_background" 
      app:tabIndicatorHeight="3dp" 
      app:tabMode="scrollable" 
      app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

    </FrameLayout> 

    <View 
     android:layout_width="fill_parent" 
     android:layout_height="1dp" 
     android:background="@android:color/darker_gray"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager_child" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@android:color/white" /> 

</android.support.design.widget.AppBarLayout> 

ViewPagerMain.java

public class ViewPagerMain extends Fragment { 

    ViewPager viewpager; 
    TabLayout tabLayout; 
    TextView tvNoPlans; 

    View rootview; 
    Fragment fr = null; 

    ArrayList<String> cat_id = new ArrayList<String>(); 
    ArrayList<String> cat_name = new ArrayList<String>(); 

    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 

     rootview = inflater.inflate(R.layout.view_pager_main, container, false); 

     tvNoPlans = (TextView) rootview.findViewById(R.id.tvNoPlans); 
     viewpager = (ViewPager) rootview.findViewById(R.id.viewpager); 
     viewpager.setOffscreenPageLimit(3); 

     tabLayout = (TabLayout) rootview.findViewById(R.id.tabLayout); 

     cat_id.add(0,"1"); 
     cat_id.add(1,"2"); 

     cat_name.add(0,"Parent1"); 
     cat_name.add(1,"Parent2"); 

     setupViewpager(viewpager); 
     tabLayout.post(new Runnable() { 
      @Override 
      public void run() { 
       tabLayout.setupWithViewPager(viewpager); 
      } 
     }); 

     tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       viewpager.setCurrentItem(tab.getPosition()); 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 

      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 

      } 
     }); 
     return rootview; 
    } 

    public void setupViewpager(ViewPager viewPager) { 

     ViewpagerAdapter adapter = new ViewpagerAdapter(getChildFragmentManager()); 

     for (int i = 0; i < cat_id.size(); i++) { 
      Bundle bundle = new Bundle(); 
      bundle.putString("cat_id",cat_id.get(i)); 
      fr = new ViewPagerChild(); 
      fr.setArguments(bundle); 
      adapter.addFrag(fr, cat_name.get(i)); 
     } 
     viewPager.setAdapter(adapter); 
    } 
} 

ViewPagerChild.java

public class ViewPagerChild extends Fragment { 

    ViewPager viewPager_child; 
    TabLayout tabLayout_child; 
    SharedPreferences preferences; 
    View rootview; 
    String cat_id; 

    ArrayList<String> subcat_id = new ArrayList<String>(); 
    ArrayList<String> subcat_name = new ArrayList<String>(); 

    Bundle bundle; 
    Fragment fr = null; 

    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     rootview = inflater.inflate(R.layout.view_pager_child, container, false); 
     preferences = getActivity().getSharedPreferences(Constant.PREF_MAIN, 0); 

     bundle = getArguments(); 
     cat_id = bundle.getString("cat_id"); 

     viewPager_child = (ViewPager) rootview.findViewById(R.id.viewpager_child); 
     viewPager_child.setOffscreenPageLimit(10); 

     tabLayout_child = (TabLayout) rootview.findViewById(R.id.tabLayout_child); 

     subcat_id.add(0,"1"); 
     subcat_id.add(1, "2"); 

     subcat_name.add(0,"Child1"); 
     subcat_name.add(1,"Child2"); 

     setupViewpagerChild(viewPager_child); 
     tabLayout_child.post(new Runnable() { 
      @Override 
      public void run() { 
       tabLayout_child.setupWithViewPager(viewPager_child); 
      } 
     }); 

     tabLayout_child.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
      @Override 
      public void onTabSelected(TabLayout.Tab tab) { 
       viewPager_child.setCurrentItem(tab.getPosition()); 
      } 

      @Override 
      public void onTabUnselected(TabLayout.Tab tab) { 

      } 

      @Override 
      public void onTabReselected(TabLayout.Tab tab) { 

      } 
     }); 
     return rootview; 
    } 

    public void setupViewpagerChild(ViewPager viewPager_child) { 
     ViewpagerAdapter adapter = new ViewpagerAdapter(getChildFragmentManager()); 

     for (int i = 0; i < subcat_id.size(); i++) { 

      fr = new TabFragment(); 
      adapter.addFrag(fr, subcat_name.get(i)); 
     } 
     viewPager_child.setAdapter(adapter); 
    } 
} 

ViewpagerAdapter.java

public class ViewpagerAdapter extends FragmentPagerAdapter { 

    private final List<android.app.Fragment> mFragmentList = new ArrayList<>(); 
    private final List<String> mFragmentTitleList = new ArrayList<>(); 

    public ViewpagerAdapter(FragmentManager manager){ 
     super(manager); 
    } 

    @Override 
    public Fragment getItem(int position) { 
     return mFragmentList.get(position); 
    } 

    @Override 
    public int getCount() { 
     return mFragmentList.size(); 
    } 

    @Override 
    public CharSequence getPageTitle(int position) { 
     return mFragmentTitleList.get(position); 
    } 

    public void addFrag(Fragment fragment,String title){ 
     mFragmentList.add(fragment); 
     mFragmentTitleList.add(title); 
    } 
} 

tab_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:id="@+id/tv" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:gravity="center" 
     android:text="Hello There!!!"/> 

</LinearLayout> 

TabFragment.java

public class TabFragment extends Fragment { 

    View rootview; 

    @Nullable 
    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     rootview = inflater.inflate(R.layout.fragment_tab, container, false); 

     return rootview; 
    } 
}