Android 仿“今日头条”顶部导航栏跟页面滑动效果 最简单方式MD控件TabLayout实现
1.配置依赖
//implementation 'com.android.support:appcompat-v7:+' implementation 'com.android.support:appcompat-v7:23.4.0' implementation 'com.android.support:design:23.4.0' implementation 'com.android.support:recyclerview-v7:23.4.0' implementation 'com.android.support:cardview-v7:23.4.0'
2.activity的xml布局ConstraintLayout
- layout_constraintTop_toBottomOf :当前View在另一个View的下侧 与below相似
- layout_constraintBottom_toTopOf :当前View在另一个View的上方 与above相似
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> //默认会有横线,颜色默认是大粉红色的,去掉红线用 app:tabIndicatorHeight="0dp" <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/cardview_dark_background"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorAccent" app:layout_constraintTop_toBottomOf="@id/tab_layout"> </android.support.v4.view.ViewPager> </android.support.constraint.ConstraintLayout>
3. 页面的逻辑
主要的几个点
1)。文字和fragment是怎么绑定的 ===通过fragmentAdapter
@Override
public Fragment getItem(int position) {
return mFragmentArrays[position];
}
@Override
public CharSequence getPageTitle(int position) {//标题的现实
return mTabTitles[position];
}
2)。绑定viewpager和Tablayout
tabLayout.setupWithViewPager(viewPager);//绑定viewpager和Tablayout
3)。滑动
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动,类今日头条private Fragment[] mFragmentArrays = new Fragment[8];
4).设置带有图片的TabLayout
tabLayout.removeAllTabs();//所以在我们需要给选项卡设置图片就需要把选项卡的内容给清空,使用下面的方法 for(int i=0;i<mTabTitles.length;i++){ TabLayout.Tab tab =tabLayout.newTab(); tab.setIcon(R.mipmap.ic_launcher); tab.setText(mTabTitles[i]); tabLayout.addTab(tab); }
5).添加监听事件
//设置监听事件 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) { } });
6)。Tablayout的下滑线
<android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#E0E0E0" app:tabIndicatorColor="@color/colorAccent" app:tabIndicatorHeight="0dp" app:tabMode="fixed" app:tabSelectedTextColor="@color/colorPrimary" app:tabTextAppearance="@style/TabStyle" />private String[] mTabTitles = new String[8];
private void bindData() { mTabTitles[0] = "推荐"; mTabTitles[1] = "热点"; mTabTitles[2] = "科技"; mTabTitles[3] = "体育"; mTabTitles[4] = "健康"; mTabTitles[5] = "军事"; mTabTitles[6] = "娱乐"; mTabTitles[7] = "热点"; // tabLayout.setTabMode(TabLayout.MODE_FIXED); //固定模式,也就是说 tab顶部不能滚动 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动,类 今日头条 mFragmentArrays[0] = TabFragment.newInstance(); mFragmentArrays[1] = TabFragment.newInstance(); mFragmentArrays[2] = TabFragment.newInstance(); mFragmentArrays[3] = TabFragment.newInstance(); mFragmentArrays[4] = TabFragment.newInstance(); mFragmentArrays[5] = TabFragment.newInstance(); mFragmentArrays[6] = TabFragment.newInstance(); mFragmentArrays[7] = TabFragment.newInstance(); PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(pagerAdapter); //将ViewPager和TabLayout绑定 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) { } }); addTab(); } private void addTab(){ tabLayout.removeAllTabs();//所以在我们需要给选项卡设置图片就需要把选项卡的内容给清空,使用下面的方法 for(int i=0;i<mTabTitles.length;i++){ TabLayout.Tab tab =tabLayout.newTab(); tab.setIcon(R.mipmap.ic_launcher); tab.setText(mTabTitles[i]); tabLayout.addTab(tab); } } final class MyViewPagerAdapter extends FragmentPagerAdapter { public MyViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return mFragmentArrays[position]; } @Override public int getCount() { return mFragmentArrays.length; } @Override public CharSequence getPageTitle(int position) { return mTabTitles[position]; // return tabLayout.getTabAt(position).getText(); // return tabLayout.getTabCount() } } }