前言
之前是写过这块的教程,但是没有写完。因为中途各种原因耽搁了,现在重新开一篇文章写写关于TabLayout的相关内容
基本使用
这里不在赘述,关于基本使用实际上在项目开发中并不能经常见到。实际上,TabLayout的常见使用场景主要又两类:
- TabLayout + ViewPager
- TabLayout + ViewPager + Fragment
比较而言,第二种场景使用的更多一些,以下代码会把这两种使用场景都贴出来。在网上搜索的时候,不带有Fragment的情形比较少
TabLayout + ViewPager的使用
这种情况下,一般是直接对ViewPager添加View。因为ViewPager实际上是一个ViewGroup,可直接addView
<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="com.example.chen.myapplication.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tlMain"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/colorPrimaryDark" />
<android.support.v4.view.ViewPager
android:id="@+id/vpMain"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ArrayList<String> titleList = new ArrayList<String>() {{
add("google drive");
add("google+");
add("google play");
}};
private ArrayList<View> viewList = new ArrayList<>();
private TabLayout tlMain;
private ViewPager vpMain;
private MyAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View view1 = getLayoutInflater().inflate(R.layout.view1, null);
View view2 = getLayoutInflater().inflate(R.layout.view2, null);
View view3 = getLayoutInflater().inflate(R.layout.view3, null);
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
initView();
}
private void initView() {
tlMain = (TabLayout) findViewById(R.id.tlMain);
tlMain.setTabMode(TabLayout.MODE_FIXED);
tlMain.addTab(tlMain.newTab().setText(titleList.get(0)));
tlMain.addTab(tlMain.newTab().setText(titleList.get(1)));
tlMain.addTab(tlMain.newTab().setText(titleList.get(2)));
vpMain = (ViewPager) findViewById(R.id.vpMain);
adapter = new MyAdapter(titleList, viewList);
tlMain.setTabsFromPagerAdapter(adapter);
vpMain.setAdapter(adapter);
tlMain.setupWithViewPager(vpMain, true);
}
}
MyAdapter.java
public class MyAdapter extends PagerAdapter {
private ArrayList<String> titleList;
private ArrayList<View> viewList;
public MyAdapter(ArrayList<String> titleList, ArrayList<View> viewList) {
this.titleList = titleList;
this.viewList = viewList;
}
@Override
public int getCount() {
return viewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}
TabLayout + ViewPager + Fragment的使用
<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="com.example.chen.myapplication.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tlMain"
android:layout_width="match_parent"
android:layout_height="50dp"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorAccent"
app:tabTextColor="@color/colorPrimaryDark" />
<android.support.v4.view.ViewPager
android:id="@+id/vpMain"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ArrayList<String> titleList = new ArrayList<String>() {{
add("google drive");
add("google+");
add("google play");
}};
private ArrayList<Fragment> fragmentList = new ArrayList<Fragment>() {{
add(new OneFragment());
add(new TwoFragment());
add(new ThreeFragment());
}};
private TabLayout tlMain;
private ViewPager vpMain;
private MyAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
adapter = new MyAdapter(getSupportFragmentManager(), titleList, fragmentList);
vpMain.setAdapter(adapter);
tlMain.setupWithViewPager(vpMain, true);
tlMain.setTabsFromPagerAdapter(adapter);
}
private void initView() {
tlMain = (TabLayout) findViewById(R.id.tlMain);
vpMain = (ViewPager) findViewById(R.id.vpMain);
}
}
OneFragment.java
public class OneFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_view1, container, false);
return view;
}
}
TwoFragment.java
public class TwoFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_view2, container, false);
return view;
}
}
ThreeFragment.java
public class ThreeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_view3, container, false);
return view;
}
}
MyAdapter.java
public class MyAdapter extends FragmentPagerAdapter {
private ArrayList<String> titleList;
private ArrayList<Fragment> fragmentList;
public MyAdapter(FragmentManager fm, ArrayList<String> titleList, ArrayList<Fragment> fragmentList) {
super(fm);
this.titleList = titleList;
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}
效果如图【两种方式实现的效果一样】
总结
第一种情况多用于做头部轮播,第二种情况多用于做带有导航的首页
使用这两种方式都要注意内存的处理问题,避免过多的变量造成内存泄漏