前言:很久以前就使用过TabLayout+ViewPager+Fragment实现分页滑动效果,不过太久没用忘记了,现在重新回顾并且记录下使用方法。
以下是效果图:
接下来介绍一下使用方法
属性介绍:
1、 app:tabSelectedTextColor=”?attr/colorPrimary”
//改变选中字体的颜色
2、 app:tabTextColor=”#000000”
//改变未选中字体的颜色
3、 app:tabIndicatorColor=”?attr/colorPrimary”
//改变指示器下标的颜色
4、 app:tabBackground=”color”
//改变整个TabLayout的颜色
5、 app:tabIndicatorHeight=”4dp”
//设置指示器下标的高度
6、 app:tabTextAppearance=”@Android:style/TextAppearance.Holo.Large”
//设置文字的外貌
7、 app:tabMode=”fixed”
//设置TabLayout模式,默认是fixed:固定的,标签很多时候会被挤压,不能滑动。另外一种就是scrollable,可以滑动的
8、 app:tabPadding=”xxdp”
//设置Tab内部的子控件的Padding
9、 app:paddingEnd=”xxdp”
//设置整个TabLayout的Padding
10、app:paddingStart=”xxdp”
//设置整个TabLayout的Padding
11、app:tabGravity=”center”
//内容的显示模式。center是居中,如果是fill,则是充满
12、app:tabMaxWidth=”xxdp”
//设置最大的tab宽度
13、app:tabMinWidth=”xxdp”
//设置最小的tab宽度
14、app:tabContentStart=”100dp”
//TabLayout开始位置的偏移量
XML文件:
<android.support.design.widget.TabLayout
android:id="@+id/my_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="?attr/colorPrimary"
app:tabMode="fixed"
app:tabSelectedTextColor="?attr/colorPrimary"
app:tabTextColor="#000000" />
<android.support.v4.view.ViewPager
android:id="@+id/my_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Java代码:
根据分页数的不同分别创建对应的Fragement和布局文件,然后创建一个适配器,继承FragmentPagerAdaoter。
MyFragmentPagerAdaoter:
package com.wyh.demo;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
/**
* Created by wyh on 2017/3/10.
*/
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private ArrayList<String> tab_title_list;//存放标签页标题
private ArrayList<Fragment> fragment_list;//存放ViewPager下的Fragment
public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<String> tab_title_list, ArrayList<Fragment> fragment_list) {
super(fm);
this.tab_title_list = tab_title_list;
this.fragment_list = fragment_list;
}
@Override
public Fragment getItem(int position) {
return fragment_list.get(position);
}
@Override
public int getCount() {
return fragment_list.size();
}
@Override
public CharSequence getPageTitle(int position) {
return tab_title_list.get(position);
}
}
MainActivity:
package com.wyh.demo;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private ArrayList<String> tab_title_list = new ArrayList<>();//存放标签页标题
private ArrayList<Fragment> fragment_list = new ArrayList<>();//存放ViewPager下的Fragment
private Fragment fragment1, fragment2, fragment3, fragment4;
private MyFragmentPagerAdapter adapter;//适配器
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
tabLayout = (TabLayout) findViewById(R.id.my_tablayout);
viewPager = (ViewPager) findViewById(R.id.my_viewpager);
tab_title_list.add("页面1");
tab_title_list.add("页面2");
tab_title_list.add("页面3");
tab_title_list.add("页面4");
tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(0)));
tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(2)));
tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(3)));
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragment4 = new Fragment4();
fragment_list.add(fragment1);
fragment_list.add(fragment2);
fragment_list.add(fragment3);
fragment_list.add(fragment4);
adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), tab_title_list, fragment_list);
viewPager.setAdapter(adapter);//给ViewPager设置适配器
tabLayout.setupWithViewPager(viewPager);//将TabLayout与Viewpager联动起来
tabLayout.setTabsFromPagerAdapter(adapter);//给TabLayout设置适配器
}
}
最后的tabLayout.setupWithViewPager(viewPager);代码最尾重要,他使得tabLayout和ViewPager绑定起来,一起滑动。这样分页滑动效果就实现了。
TabLayout的监听事件
tabLayout.setOnTabSelectedListener(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添加图标
tabLayout.addTab(tabLayout.newTab().setText("页面1").setIcon(R.mipmap.ic_launcher));
ps:以上只是TabLayout+ViewPager+Fragment实现分页滑动效果的简单使用,没有涉及到其他优化问题,可能还是存在一些问题,欢迎指出!