在片段上创建选项卡视图

Question

我创建了一个底部导航应用程序，我添加了 2 个按钮。当我点击每个按钮时，它会移动到 2 个不同的片段。我想在第一个片段（黑色片段）中添加选项卡视图。我想要像 WhatsApp 这样的选项卡视图中的 3 个选项卡。当我滑动选项卡时，它必须转到另一个片段。我试过了，没用。

（我的项目底部导航视图已经运行良好，我想在 blankfragment、java 代码和 XML 文件中添加选项卡视图）

下载项目代码

https://drive.google.com/file/d/0B_36gwgzDoNRbGd4R2NlX0RpeU0/view?usp=drivesdk!

Like this screen shot image model

Answer 1

看看这个例子，它会帮助你实现你想要的：

第一部分是如何用BottomNavigation

实现ViewPager

MainActivity

public class MainActivity extends AppCompatActivity {

BottomNavigationView bottomNavigationView;

//This is our viewPager
private ViewPager viewPager;


//Fragments

ChatFragment chatFragment;
CallsFragment callsFragment;
ContactsFragment contactsFragment;
MenuItem prevMenuItem;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    //Initializing viewPager
    viewPager = (ViewPager) findViewById(R.id.viewpager);

    //Initializing the bottomNavigationView
    bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottom_navigation);

    bottomNavigationView.setOnNavigationItemSelectedListener(
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    switch (item.getItemId()) {
                        case R.id.action_call:
                            viewPager.setCurrentItem(0);
                            break;
                        case R.id.action_chat:
                            viewPager.setCurrentItem(1);
                            break;
                        case R.id.action_contact:
                            viewPager.setCurrentItem(2);
                            break;
                    }
                    return false;
                }
            });

    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            if (prevMenuItem != null) {
                prevMenuItem.setChecked(false);
            }
            else
            {
                bottomNavigationView.getMenu().getItem(0).setChecked(false);
            }
            Log.d("page", "onPageSelected: "+position);
            bottomNavigationView.getMenu().getItem(position).setChecked(true);
            prevMenuItem = bottomNavigationView.getMenu().getItem(position);

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

   /*  //Disable ViewPager Swipe
   viewPager.setOnTouchListener(new View.OnTouchListener()
    {
        @Override
        public boolean onTouch(View v, MotionEvent event)
        {
            return true;
        }
    });
    */

    setupViewPager(viewPager);
}

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    callsFragment=new CallsFragment();
    chatFragment=new ChatFragment();
    contactsFragment=new ContactsFragment();
    adapter.addFragment(callsFragment);
    adapter.addFragment(chatFragment);
    adapter.addFragment(contactsFragment);
    viewPager.setAdapter(adapter);
}
}

ViewPagerAdapter:

public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = 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();
}

public void addFragment(Fragment fragment) {
    mFragmentList.add(fragment);
}

}

activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="droidmentor.bnv_with_viewpager.MainActivity">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/colorPrimary"
        app:itemIconTint="@drawable/bottom_navigation_color_selector"
        app:itemTextColor="@drawable/bottom_navigation_color_selector"
        app:menu="@menu/menu_bottom_navigation" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_navigation"
        android:layout_alignParentTop="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>

编辑

这将展示如何将 ViewPager 放入 Fragment 中：

将您的 fragment_blank.xml 更改为：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.view.ViewPager 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.PagerTabStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"/>

</android.support.v4.view.ViewPager>

在您的 BlankFragment.java 中执行此操作：

public class BlankFragment extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater,
                       ViewGroup container,
                       Bundle savedInstanceState) {
    View result=inflater.inflate(R.layout.fragment_blank, container, false);
    ViewPager pager=(ViewPager)result.findViewById(R.id.pager);

    pager.setAdapter(buildAdapter());

    return(result);
  }

  private PagerAdapter buildAdapter() {
    return(new SampleAdapter(getActivity(), getChildFragmentManager()));
  }
}

创建一个 Adapter 我叫我的 SampleAdapter:

public class SampleAdapter extends FragmentPagerAdapter {
Context ctxt=null;

public SampleAdapter(Context ctxt, FragmentManager mgr) {
    super(mgr);
    this.ctxt=ctxt;
}

  @Override
    public int getCount() {
    return(10);
  }

  @Override
    public Fragment getItem(int position) {
    return(EditorFragment.newInstance(position));
  }

  @Override
    public String getPageTitle(int position) {
    return(EditorFragment.getTitle(ctxt, position));
  }
}

更多选项：

如果你想在你的片段中使用 TabLayout：

ViewPager viewPager;
TabLayout tabLayout;

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

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

    return view;
 }

@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    setupViewPager(viewPager);
    tabLayout.setupWithViewPager(viewPager);

    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

        }

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

        }

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

        }
    });

如果您选择这样做，则必须将以下内容放入 fragment_blank：

<android.support.design.widget.TabLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:tabBackground="@drawable/tab_color_selector"        
/>

在片段上创建选项卡视图

Create a tab view on the fragment

java

android

fragment

tabview

bottomnavigationview

编辑