接上一章,tabs我们已经建立好了,但是默认的tab功能只能点击,如果还想让tab可滑动切换,那么就需要继续加工了.
一、首先修改activity_main.xml ,添加viewpage组件:
<?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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/main_viewPage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_navigation"
></android.support.v4.view.ViewPager>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
android:layout_alignParentBottom="true"
app:menu="@menu/navigation" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_above="@id/bottom_navigation"
android:background="@drawable/bottom_shadow" />
</RelativeLayout>
上面的VIEW是做了一个阴影效果:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#0000"
android:startColor="#30000000"
android:type="linear"/>
</shape>
修改MainActvity如下:
public class MainActivity extends AppCompatActivity {
private TextView mTextMessage;
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
viewPager.setCurrentItem(0);
return true;
case R.id.navigation_dashboard:
viewPager.setCurrentItem(1);
return true;
case R.id.navigation_notifications:
viewPager.setCurrentItem(2);
return true;
case R.id.navigation_tab4:
viewPager.setCurrentItem(3);
return true;
case R.id.navigation_tab5:
viewPager.setCurrentItem(4);
return true;
}
return false;
}
};
MenuItem menuItem;
ViewPager viewPager ;
BottomNavigationView navigation ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTextMessage = (TextView) findViewById(R.id.message);
navigation = (BottomNavigationView) findViewById(R.id.bottom_navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
BottomNavigationViewHelper.disableShiftMode(navigation);
viewPager = findViewById(R.id.main_viewPage);
//滑动监听
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
if (menuItem != null) {
menuItem.setChecked(false);
} else {
navigation.getMenu().getItem(0).setChecked(false);
}
menuItem = navigation.getMenu().getItem(position);
menuItem.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
setupViewPager();
}
/***
* 设置tab fragment 页面集合
*/
private void setupViewPager() {
MainViewPagerAdapter adapter = new MainViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(TabFragment.newInstance("首页"));
adapter.addFragment(TabFragment.newInstance("消息"));
adapter.addFragment(TabFragment.newInstance("广场"));
adapter.addFragment(TabFragment.newInstance("发现"));
adapter.addFragment(TabFragment.newInstance("我的"));
viewPager.setAdapter(adapter);
}
}
新增类:MainViewPagerAdapter 如:
public class MainViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
public MainViewPagerAdapter(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);
}
}
新建一个公共的tabFragment,如:
public class TabFragment extends Fragment {
public static TabFragment newInstance(String info) {
Bundle args = new Bundle();
TabFragment fragment = new TabFragment();
args.putString("info", info);
fragment.setArguments(args);
return fragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_base, null);
TextView tvInfo = (TextView) view.findViewById(R.id.textView);
tvInfo.setText(getArguments().getString("info"));
tvInfo.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "Don't click me.please!.", Snackbar.LENGTH_SHORT).show();
}
});
return view;
}
}
fragment布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>
直接运行即可看到效果: