Material Design是非常强大的,它包含了很多很好的控件,今天我们来学习下TabLayout导航控件,可以用作底部导航,也可以用做底部标签页切换,这样就不用我们自己去一点点写代码实现这种功能了,下面先看下效果:
一、按照惯例,先创建项目然后引入design的依赖包
compile 'com.android.support:design:25.3.1'
二、添加布局文件
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.guifa.tablayouttest.HomeActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tabLayout"
android:background="#f0f0f0" />
</RelativeLayout>
三、Java代码部分
1.首先先创建一个Fragment:
package com.guifa.tablayouttest;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
* Created by GuiFa on 2017/3/31
*/
public class NewsFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_news, container, false);
String titleStr = getArguments().getString("title");
TextView textView = (TextView) view.findViewById(R.id.text);
textView.setText(titleStr);
return view;
}
public static NewsFragment newInstance(String title) {
Bundle args = new Bundle();
args.putString("title", title);
NewsFragment fragment = new NewsFragment();
fragment.setArguments(args);
return 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/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
以newInstance(String title)方式创建Fragment,其中传入参数可以传入你需要的,这里以String title为例,Fragment接受到title参数,然后将title显示在Fragment中。在xml中,我只放了个TextView作为演示使用,在项目中使用时换成自己的业务流程就好。
2.接着创建tablayout的adapter
这里我将其命名为TabLayoutAdapter并使其继承FragmentPagerAdapter,然后重写里面的方法即可,其中必须重写的方法有:getItem(int position)、getCount()和构造方法。
package com.guifa.tablayouttest;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
/**
* Created by GuiFa on 2017/3/31
*/
public class TabLayoutAdapter extends FragmentPagerAdapter {
private List<String> mTitles;
public TabLayoutAdapter(FragmentManager fm, List<String> titles) {
super(fm);
this.mTitles = titles;
}
@Override
public Fragment getItem(int position) {
return NewsFragment.newInstance(mTitles.get(position));
}
@Override
public int getCount() {
return mTitles.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}
在构造方法中我传入了List titles,这里我们可以认为有几个标题就有多少个tab,所以在getCount()中返回mTitles.size()即可,这里我还重写了一个方法getPageTitle(int position),目的是获取tab的标题返回mTitles.get(position)即可。
3.最后我们创建一个Activity来装载Fragment
package com.guifa.tablayouttest;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
public class HomeActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
List<String> titles = new ArrayList<>();
titles.add("电影");
titles.add("电视剧");
titles.add("动漫");
titles.add("戏曲");
titles.add("综艺");
titles.add("歌曲");
titles.add("纪录片");
titles.add("娱乐");
titles.add("少儿");
titles.add("游戏");
titles.add("高校");
titles.add("体育");
titles.add("资讯");
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
TabLayoutAdapter adapter = new TabLayoutAdapter(getSupportFragmentManager(), titles);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
}
}
Activity中很简单,首先找到id,创建adapter,将adapter放入viewpager,最后的异步,也是最关键的一步:tabLayout.setupWithViewPager(viewPager);就这一句话就可以将TabLayout和ViewPager联立起来,这样tabLayout就能正常运行了,无论是滑动还是点击tab,都可以切换页面,是不是要比自己写简单很多呢?
下面介绍一下它的几个常用属性:
1.改变选中字体的颜色:app:tabSelectedTextColor=””
2.改变未选中字体的颜色:app:tabTextColor=””
3.改变指示器下标的颜色:app:tabIndicatorColor=””
4.改变整个TabLayout的颜色:app:tabBackground=””
5.改变TabLayout内部字体大小,没直接方法,不过可以通过app:tabTextAppearance=”@android:style/TextAppearance.Holo.Large”
6.Tab的模式:fixed/scrollable 这两种模式,默认是fixed,通过app:tabMode=”“设置,当设置为fixed时,tab数量多时依然是平分,标题会挤在一起,如下图,而scrollable 则只显示一部分,滑动的时,会显示更多,如第一张图所示。
7.tabLayout的监听事件
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// tab选中事件
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// tab未选中事件
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// tab再次选中事件
}
});
以上就是TabLayout的简单使用,若有错误和建议,欢迎指出,谢谢。