如何在底部导航栏的一个片段中实现选项卡视图？

Question

如何在底部导航栏的一个片段中实现选项卡视图？

android-layoutandroid-studioandroid-fragmentstabviewandroid-bottomnav

3

我希望你能进行翻译，这段内容与编程有关。需要使其更加易于理解，但不要删除HTML标签。以下是需要翻译的内容：

我想要这种类型的设计:: 这是我的设计

我的mainactivity.xml文件只包含一个frameLayout，该frameLayout会被从底部菜单项中选择的片段所替换。

它的代码如下：

b = BottomBar.attach(this,savedInstanceState);
    b.setItemsFromMenu(R.xml.menu_main, new OnMenuTabClickListener() {
        @Override
        public void onMenuTabSelected(@IdRes int menuItemId) {
            if(menuItemId == R.id.BottomBarItemOne){
                PeopleFragment p = new PeopleFragment();
                getSupportFragmentManager().beginTransaction().replace(R.id.frame,p).commit();
            }
            else if(menuItemId == R.id.BottomBarItemTwo){
                LocationFragment l = new LocationFragment();
                getSupportFragmentManager().beginTransaction().replace(R.id.frame,l).commit();
            }
            else if(menuItemId == R.id.BottomBarItemThree){
                HistoryFragment h = new HistoryFragment();
                getSupportFragmentManager().beginTransaction().replace(R.id.frame,h).commit();
            }
            else if(menuItemId == R.id.BottomBarItemFour){
                LikesFragment li = new LikesFragment();
                getSupportFragmentManager().beginTransaction().replace(R.id.frame,li).commit();
            }
        }

现在我想在一个Fragment中创建一个选项卡视图：为此，我在所需的片段xml文件中实现了工具栏、选项卡布局和ViewPager。我创建了一个单独的Java文件，包含ViewPagerAdapter类。

public class viewPagerAdapter extends FragmentPagerAdapter {

ArrayList<Fragment> fragments = new ArrayList<>(); // this line can cause crashes
ArrayList<String> tabTitles = new ArrayList<>();

   public void addFragment(Fragment fragment,String tabTitle){
      fragments.add(fragment); // this line can cause crashes
      tabTitles.add(tabTitle);
   }

   public viewPagerAdapter(FragmentManager fm) {
      super(fm);
   }

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

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

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

现在，我想添加这段代码来实现选项卡布局：

 toolbar = (Toolbar) findViewById(R.id.toolBar);
    setSupportActionBar(toolbar);

    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    viewPager = (ViewPager) findViewById(R.id.viewPager);

    viewPagerAdapter = new viewPagerAdapter(getSupportFragmentManager());
    viewPagerAdapter.addFragment(new HomeFragment(),"Home"); // this line can cause crashes
    viewPagerAdapter.addFragment(new MessageFragment(),"Message"); // this line can cause crashes
    viewPagerAdapter.addFragment(new ContectFragment(),"Contect"); // this line can cause crashes
    viewPager.setAdapter(viewPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);

在Fragment的onCreate方法中，给出以下内容：

public class HomeFragment extends Fragment {


    public HomeFragment() {
       // Required empty public constructor
    }

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

       // TabLyout Code Here

        return inflater.inflate(R.layout.fragment_home, container, false);
    }
 }

但是Android Studio不允许在Fragment中使用Tablayout代码。
我该怎么办？如何在其中一个Fragment中实现tablayout？

- VISHAL TANK

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Parin Parikh · Answer 1

尝试以下方法：根据您的需求，将此内容添加到片段布局中。

 <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="50dp"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:tabIndicatorColor="@color/tab_indicator"
            app:tabIndicatorHeight="2.5dp"
            app:tabPaddingBottom="-1dp"
            app:tabPaddingEnd="-1dp"
            app:tabPaddingStart="-1dp"
            app:tabPaddingTop="-1dp"
            app:tabBackground="@color/white"/>

创建一个模型，用于显示您想要展示的选项卡。

现在在您的片段中添加以下代码：

this.navigationData = new ArrayList<>();
this.navigationData.add(new MainNavigationViewModel("TAB-1",     R.drawable.TAB-1, R.drawable.TAB-1, true));
this.navigationData.add(new MainNavigationViewModel("TAB-2", R.drawable.TAB-2, R.drawable.TAB-2, false));
this.navigationData.add(new MainNavigationViewModel("TAB-3", R.drawable.TAB-3, R.drawable.TAB-23, false));

for (MainNavigationViewModel vm : this.navigationData) {
    tabLayout.addTab(tabLayout.newTab().setCustomView(ViewHelper.buildTabWithText(getContext(), vm.getText(), vm.getIsSelected())));
}
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

adapter = new MainFragmentPagerAdapter(getChildFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);

现在创建 FragmentPagerAdapter（新类），如下所示。

public class MainFragmentPagerAdapter extends FragmentPagerAdapter {
    private interface FragmentFactory {
        Fragment create();
    }

    private static final FragmentFactory[] fragments = new FragmentFactory[] {
            () -> LiveFeedFragment.getInstance(),
            () -> GroupsFragment.getInstance(),
            () -> NewsFragment.getInstance()
    };


    public MainFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments[position].create();
    }

    @Override
    public int getCount() {
        return fragments.length;
    }
}

并且可以像这样访问片段。