【问题标题】:How to implement tabview in one of the fragment of bottombar?如何在底部栏的片段之一中实现tabview?
【发布时间】:2017-05-22 00:05:48
【问题描述】:

我想要这种设计:: Here Is My design

我的 mainactivity.xml 仅包含一个 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 上创建一个 tabview: 为此,我在所需的片段 xml 文件中实现了工具栏、tablayout 和 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);
   }
}

现在我想添加这段代码来实现tablayout ::

 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?

【问题讨论】:

    标签: android-layout android-studio android-fragments tabview android-bottomnav


    【解决方案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"/>
    
    1. 为要显示的标签创建一个模型。

    2. 现在在您的片段中添加以下代码:

      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);
      
    3. 现在像这样创建 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;
          }
      }
      

    并以这种方式访问​​片段。

    【讨论】:

    • 我刚开始学习安卓。那么请告诉我如何创建选项卡的模型(MainNavigationViewModel)?它包含什么?
    • 您必须根据您的要求创建模型。例如。如果您只有带有文本的选项卡,那么您可以像这样创建模型: public class MainNavigationViewModel { int id;字符串文本; public String getText() { 返回文本; } public void setText(String text) { this.text = text; } } 模型包含你必须从你的活动中访问的 getter 或 setter 方法。如果这篇文章对你有帮助,请点赞。
    • this.navigationData.add(new MainNavigationViewModel("TAB-1", R.drawable.TAB-1, R.drawable.TAB-1, true)); MainNavigationViewModel 构造函数的第二个和第三个参数是什么?这个文件包含什么?和 tabLayout.addTab(tabLayout.newTab().setCustomView(ViewHelper.buildTabWithText(getContext(), vm.getText(), vm.getIsSelected())));什么是 ViewHelper ?它包含什么?
    • 1.构造函数中的第二个参数用于与文本一起显示选项卡的图像,构造函数中的第三个参数用于更改所选图像。如果选项卡中只有文本,则忽略第二个和第三个参数。 2.这个文件的作用是随着你改变tab来改变fragment。 3. ViewHelper 文件包含添加选项卡的代码。我将发布 viewhelper 文件的代码。
    • 好的,非常感谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多