如何将tablayout与底部导航和viewpager一起使用?
How to use tablayout with bottom navigation and viewpager?
我用 bottom navigation bar
创建了一个 activity。
当我想切换到另一个片段时,我想要 tablayout
。
而tablayout
可以控制viewpager
。我可以把viewpager
放到指定的片段吗?
我想要这样:
这是目前的结果。我想把viewpager
放在红框里
尝试将您的 BottomNavigationView
和 TabLayout
与 ViewPager
同步
myBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_one) {
myViewPager.setCurrentItem(0);
}else if (id == R.id.action_two) {
myViewPager.setCurrentItem(1);
}else if (id == R.id.action_three) {
myViewPager.setCurrentItem(2);
}else if (id == R.id.action_four) {
myViewPager.setCurrentItem(3);
}
return false;
}
});
myViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (position == 0) {
myBottomNavigationView.setSelectedItemId(R.id.action_one);
}else if (position == 1) {
myBottomNavigationView.setSelectedItemId(R.id.action_two);
}else if (position == 2) {
myBottomNavigationView.setSelectedItemId(R.id.action_three);
}else if (position == 3) {
myBottomNavigationView.setSelectedItemId(R.id.action_four);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
您需要在 Activity 上放置查看寻呼机。制作一个视图寻呼机适配器。在适配器中连接不同的片段。之后,您可以在 Activity 示例上设置适配器,如下所示。抱歉,我们需要将您的选项卡布局放在 vewPager 之前。在您的 View Pager Adapter 上连接您的选项卡布局。
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/assignment_activitly"
>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
android:background="@color/colorPrimary"
app:tabTextColor="@color/textPrimary"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextAppearance="@style/Tab"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
/>
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {
ViewPager viewpager;
TabLayout tabLayout;
public void onCreate(Bundle savedInstanceState) {
viewpager = findViewById(R.id.viewpager);
tabLayout = findViewById(R.id.tablayout);
super.onCreate(saveedInstanceState);
.........
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewpager.setViewPager(adapter);
tabLayout.setupWithViewPager(viewPager);
}
}
ViewPagerAdapter
public class ViewPagerAdapter extends FragmentPagerAdapter {
private String tabTitles [] = new String[] {"title first", "title Second"};
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 0) {
return new YourFragmentFirst();
} else if (....){
return new YourFragmentSeconde();
}
........
}
@Override
public int getCount() {
return //return your number of Fragment;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
我用 bottom navigation bar
创建了一个 activity。
当我想切换到另一个片段时,我想要 tablayout
。
而tablayout
可以控制viewpager
。我可以把viewpager
放到指定的片段吗?
我想要这样:
这是目前的结果。我想把viewpager
放在红框里
尝试将您的 BottomNavigationView
和 TabLayout
与 ViewPager
myBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_one) {
myViewPager.setCurrentItem(0);
}else if (id == R.id.action_two) {
myViewPager.setCurrentItem(1);
}else if (id == R.id.action_three) {
myViewPager.setCurrentItem(2);
}else if (id == R.id.action_four) {
myViewPager.setCurrentItem(3);
}
return false;
}
});
myViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (position == 0) {
myBottomNavigationView.setSelectedItemId(R.id.action_one);
}else if (position == 1) {
myBottomNavigationView.setSelectedItemId(R.id.action_two);
}else if (position == 2) {
myBottomNavigationView.setSelectedItemId(R.id.action_three);
}else if (position == 3) {
myBottomNavigationView.setSelectedItemId(R.id.action_four);
}
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
您需要在 Activity 上放置查看寻呼机。制作一个视图寻呼机适配器。在适配器中连接不同的片段。之后,您可以在 Activity 示例上设置适配器,如下所示。抱歉,我们需要将您的选项卡布局放在 vewPager 之前。在您的 View Pager Adapter 上连接您的选项卡布局。
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:id="@+id/assignment_activitly"
>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
android:background="@color/colorPrimary"
app:tabTextColor="@color/textPrimary"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextAppearance="@style/Tab"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
/>
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {
ViewPager viewpager;
TabLayout tabLayout;
public void onCreate(Bundle savedInstanceState) {
viewpager = findViewById(R.id.viewpager);
tabLayout = findViewById(R.id.tablayout);
super.onCreate(saveedInstanceState);
.........
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
viewpager.setViewPager(adapter);
tabLayout.setupWithViewPager(viewPager);
}
}
ViewPagerAdapter
public class ViewPagerAdapter extends FragmentPagerAdapter {
private String tabTitles [] = new String[] {"title first", "title Second"};
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 0) {
return new YourFragmentFirst();
} else if (....){
return new YourFragmentSeconde();
}
........
}
@Override
public int getCount() {
return //return your number of Fragment;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}