之前实现如下图中的导航效果时,都是顶部一个线性布局+ViewPager+Fragment,线性布局中再去部署TextView和View,ViewPager滑动时,线性布局的布局就要跟着变化。直到我遇到了Metrial Design的TabLayout,我才意识到原来实现一个这样的导航效果还可以这么方便,下面我就来使用TabLayout实现如图的导航栏效果。
首先,要进行Material Design包的加载,我使用的是Android Studio 3.0版本,在app的build.gradle中添加依赖:
implementation 'com.android.support:design:28.0.0-alpha1'
接着,实现如图的导航,除了使用TabLayout,仍然需要ViewPager和Fragment的配合。
这里设置导航分为文章、时尚、商品、新闻、店铺、旅游6个部分,对应的需要定义6个Fragment布局和类。
文章 fragment_article.xml如图:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp" android:textColor="#000000" android:id="@+id/tv_article"/> </LinearLayout>
文章 ArticleFragment.java如图:
//注意:这里的Fragment导入的包是v4下的,android.support.v4.app.Fragment public class ArticleFragment extends Fragment { private TextView textView; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_article,container,false); textView=view.findViewById(R.id.tv_article); return view; } @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); textView.setText("文章"); } }
其他5个部分类似,此处就不贴代码了。既然使用了ViewPager+Fragment就必须需要一个适配器来为ViewPager填充内容,下面是自定义的FragmentAdapter.java:
public class FragmentAdapter extends FragmentPagerAdapter { private List<String> titleList; //存放导航的标题 private List<Fragment> list; //存放ViewPager中要填充的Fragment public FragmentAdapter(FragmentManager fm,List<String> titleList,List<Fragment> list) { super(fm); this.titleList=titleList; this.list=list; } @Override public Fragment getItem(int i) { return list.get(i); } @Override public int getCount() { return list.size(); } @Nullable @Override //重载此方法 设置导航栏中对应的标题 //如果不重载,导航栏的标题就没有内容,只有滑动条 public CharSequence getPageTitle(int position) { return titleList.get(position); } }
这里要注意的是,一定要重载getPageTitle()这个方法,否则导航栏没有标题,只有一个导航条,如下图:
在布局中使用TabLayout,下面是activity_material_design.xml布局:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context=".MaterialDesignActivity"> <android.support.design.widget.TabLayout android:id="@+id/tablelayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" app:tabTextColor="#cacaca" app:tabSelectedTextColor="#e62424" app:tabIndicatorColor="#e62424" app:tabBackground="@drawable/tab_bg" app:tabTextAppearance="@android:style/TextAppearance.Small"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </android.support.v4.view.ViewPager> </LinearLayout>
这里要说明一下TabLayout的几个属性:
app:tabBackground 设置TableLayout的背景色
app:tabTextColor 设置未被选中时文字的颜色
app:tabSelectedTextColor 设置选中时文字的颜色
app:tabIndicatorColor 设置滑动条的颜色
app:tabTextAppearance="@android:style/TextAppearance.Large"
设置TableLayout的文本主题,无法通过textSize来设置文字大小,只能通过主题来设定
app:tabMode="scrollable"
设置TableLayout可滑动,当页数较多时,一个界面无法呈现所有的导航标签,此时就必须要用。
这里app:tabBackground属性使用的是我自己定义的一个背景tab_bg.xml,布局如下:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#616fbe" android:endColor="@color/colorPrimary" android:type="linear"/> </shape>
下面再贴一下MaterialDesignActivity.java的代码:
public class MaterialDesignActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; private List<String> titleList; private List<Fragment> list; private FragmentAdapter fragmentAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_material_design); initView(); initData(); } private void initView() { tabLayout=findViewById(R.id.tablelayout); viewPager=findViewById(R.id.viewpager); } private void initData() { titleList=new ArrayList<>(); list=new ArrayList<>(); titleList.add("文章"); titleList.add("时尚"); titleList.add("商品"); titleList.add("新闻"); titleList.add("店铺"); titleList.add("旅游"); list.add(new ArticleFragment()); list.add(new FashionFragment()); list.add(new GoodsFragment()); list.add(new NewsFragment()); list.add(new ShopFragment()); list.add(new TourismFragment()); fragmentAdapter=new FragmentAdapter(getSupportFragmentManager(),titleList,list); viewPager.setAdapter(fragmentAdapter); //此方法设置导航 作用有3:从ViewPager中获取TableLayout的title //ViewPager滑动时设置TabLaout的Title和indicator(滑动条) //点击TabLayout时ViewPager相应变化 tabLayout.setupWithViewPager(viewPager); } }
下面就可以运行项目,效果就是一开始的图,这里TabLayout使用了app:tabMode="scrollable"的属性,所以运行结果导航栏是可以滑动。好了,TabLayout的简单使用到这里就完成了,最后感谢一下https://blog.csdn.net/chenyuan_jhon/article/details/62898808博客的内容讲解。