一.TabLayout的基本使用
首先在XML代码中添加ViewPager和TabLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.swpuiot.secondarytradingplatformv20.TabLayoutActivity"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_show2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
然后在Activity中绑定ViewPager和TabLayout
public class TabLayoutActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private SimpleFragmentPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager = (ViewPager) findViewById(R.id.vp_show2);
viewPager.setAdapter(pagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setupWithViewPager(viewPager);
//用这个方法绑定ViewPager和TabLayout
for (int i = 0; i < tabLayout.getTabCount(); i++) {
//为TabLayout的每个Tab都添加自定义View
tabLayout.getTabAt(i).setCustomView(pagerAdapter.getTabView(i));
}
}
}
创建ViewPager包含的fragment
public class PageFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";
private int mPage;
public static PageFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, page);
PageFragment fragment = new PageFragment();
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage = getArguments().getInt(ARG_PAGE);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_page, container, false);
TextView textView = (TextView) view;
textView.setText("Fragment#"+mPage);
return view;
}
}
然后编写PagerAdapter
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 3;
private int[] imageResId = {
R.drawable.ic_action_name,
R.drawable.menu_clock,
R.drawable.ic_action_name
};
private String tabTitles[] = new String []{"tab1","tab2","tab3"};
private Context mcontext;
public SimpleFragmentPagerAdapter(FragmentManager fm,Context context) {
super(fm);
mcontext = context;
}
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public CharSequence getPageTitle(int position) {
return null;
}
//这个方法是用来返回Tab的名字的,如果要自定义Tab的View,就让它返回null就可以了
public View getTabView(int position){
View view = LayoutInflater.from(mcontext).inflate(R.layout.tab_item, null);
TextView tv= (TextView) view.findViewById(R.id.textView);
tv.setText(tabTitles[position]);
ImageView img = (ImageView) view.findViewById(R.id.imageView);
img.setImageResource(imageResId[position]);
return view;
}
//这个方法是自己写的,用来加载TabView的视图
}
二.总结
TabLayout可能会出现问题,如果你的TabLayout的根布局是RelativeLayout就会导致TabLayout无法点击,更换成LinearLayout就可以点击了。