TabLayout
一. 页面切换指示器 , 使用前导入Android Design包: implementation 'com.android.support:design:23.3.0'
二. 添加标签
//第一种方法: java代码中添加
TabLayout tabLayout = findViewById(R.id.tab);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
//第二种方法: xml中直接嵌入子标签
<!--app:tabMode属性默认是fixed：固定的,标签很多时候会被挤压,不能滑动,scrollable则可以-->
<android.support.design.widget.TabLayout
app:tabMode="scrollable"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:text="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:text="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:text="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>三. 监听
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
//选中时
@Override
public void onTabSelected(TabLayout.Tab tab) {
Toast.makeText(getApplicationContext(), tab.getText(), Toast.LENGTH_SHORT).show();
}
//选中之后点击其他项时
@Override
public void onTabUnselected(TabLayout.Tab tab) {
Toast.makeText(getApplicationContext(), "没选中", Toast.LENGTH_SHORT).show();
}
//选中时,再次点击此项时
@Override
public void onTabReselected(TabLayout.Tab tab) {
Toast.makeText(getApplicationContext(), "重选", Toast.LENGTH_SHORT).show();
}
});ViewPager
一. 基本
Viewpager,视图翻页工具,提供了多页面切换的效果.Android 3.0后引入的一个UI控件,位于v4包中.
Viewpager的使用方法是通过创建adapter(适配器)给它填充多个view,左右滑动时,切换不同的view.
Google官方是建议我们使用Fragment来填充ViewPager的,这样可以更加方便的生成每个Page(页),以及管理每个Page的生命周期.
跳转到特定的页:
ViewPager vp = (ViewPager) findViewById(R.id.vp);
vp.setCurrentItem(4,true); //第二个参数为是否中间有滑动的动画,默认为true.二. XML引用
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--自带的标签(不带下划线),可不要-->
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pager_title"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@android:color/white"
android:layout_gravity="top"
android:textColor="#ff0000"
android:textSize="18sp">
</android.support.v4.view.PagerTitleStrip>
<!--自带的标签(带下划线),可不要-->
<android.support.v4.view.PagerTabStrip
android:id="@+id/pager_tab"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="top"
android:background="@android:color/white"
android:textColor="#ff0000">
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>使用了PagerTitleStrip / PagerTabStrip 子控件后, 需要重写适配器(适配器看下面的介绍)的方法:
private String[] mTitles = {"标题一","标题二","标题三"};
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}三. 适配器
1.我们知道有ViewPager有许许多多的页,这个页可以引用特定的布局文件,如简单的显示一个文本框:
<!-- item_base.xml -->
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="@+id/tv"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FAE8DA"
android:gravity="center"
android:text="Hello"
android:textSize="22sp"/>
</TextView>2.创建适配器
public class MyPagerAdapter extends PagerAdapter {
private Context mContext; //此viewPager所在的activity(提供上下文);
private List<String> mData; //所有的页要显示的文本集合
public MyPagerAdapter(Context context ,List<String> list) {
mContext = context;
mData = list;
}
@Override
public int getCount() {
return mData.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = View.inflate(mContext, R.layout.item_base,null);
TextView tv = (TextView) view.findViewById(R.id.tv);
tv.setText(mData.get(position));
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// super.destroyItem(container,position,object); 这一句要删除，否则报错
container.removeView((View)object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//每一个页占屏幕空间
@Override
public float getPageWidth(int position) {
//return 1.f; 默认返回1,代表该position占据了ViewPager的一整页,范围(0,1]
return 0.5f;
}
}3. 使用
private void setVp() {
List<String> list = new ArrayList<>();
for (int i = 0; i < 3; i++) {
list.add("第"+i+"个View");
}
ViewPager vp = (ViewPager) findViewById(R.id.vp);
vp.setAdapter(new MyPagerAdapter(this,list));
}4. 翻页动画
setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用于设置ViewPager切换时的动画效果,动画需要自己继承ViewPager.PageTransformer编写.
调用:
ViewPager vp = (ViewPager) findViewById(R.id.vp);
vp.setPageTransformer(false,new ZoomOutPageTransformer());
//深度动画:
import android.support.v4.view.ViewPager;
import android.view.View;
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
-----------------------------------------------------------------------------------------
//缩放动画:
public class ZoomOutPageTransformer implements ViewPager.PageTransformer
{
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
@SuppressLint("NewApi")
public void transformPage(View view, float position)
{
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
Log.e("TAG", view + " , " + position + "");
if (position < -1)
{ // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) //a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0
{ // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0)
{
view.setTranslationX(horzMargin - vertMargin / 2);
} else
{
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
/ (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else
{ // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
-----------------------------------------------------------------
//扇形动画:
public class RotateDownPageTransformer implements ViewPager.PageTransformer {
private static final float ROT_MAX = 20.0f;
private float mRot;
public void transformPage(View view, float position)
{
Log.e("TAG", view + " , " + position + "");
if (position < -1)
{ // [-Infinity,-1)
// This page is way off-screen to the left.
view.setRotation(0);
} else if (position <= 1) // a页滑动至b页 ； a页从 0.0 ~ -1 ；b页从1 ~ 0.0
{ // [-1,1]
// Modify the default slide transition to shrink the page as well
if (position < 0)
{
mRot = (ROT_MAX * position);
view.setPivotX(view.getMeasuredWidth() * 0.5f);
view.setPivotY(view.getMeasuredHeight());
view.setRotation( mRot);
} else
{
mRot = (ROT_MAX * position);
view.setPivotX(view.getMeasuredWidth() * 0.5f);
view.setPivotY(view.getMeasuredHeight());
view.setRotation( mRot);
}
// Scale the page down (between MIN_SCALE and 1)
// Fade the page relative to its size.
} else
{ // (1,+Infinity]
// This page is way off-screen to the right.
view.setRotation( 0);
}
}
}5. 监听
ViewPager vp = (ViewPager) findViewById(R.id.vp);
vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.e("vp","滑动中=====position:"+ position + " positionOffset:"+ positionOffset + " positionOffsetPixels:"+positionOffsetPixels);
}
@Override
public void onPageSelected(int position) {
Log.e("vp","显示页改变=====postion:"+ position);
Toast.makeText(MainActivity.this, "显示页改变", Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrollStateChanged(int state) {
switch (state) {
case ViewPager.SCROLL_STATE_IDLE:
Log.e("vp","状态改变=====SCROLL_STATE_IDLE====静止状态");
break;
case ViewPager.SCROLL_STATE_DRAGGING:
Log.e("vp","状态改变=====SCROLL_STATE_DRAGGING==滑动状态");
break;
case ViewPager.SCROLL_STATE_SETTLING:
Log.e("vp","状态改变=====SCROLL_STATE_SETTLING==滑翔状态");
break;
}
}
});
}TabLayout + ViewPager
我们可以利用以下方法来实现这两者之间跟随切换:
//第一种:
// 适配器必须重写getPageTitle()方法
mTabLayout.setTabsFromPagerAdapter(adapter);
// 监听TabLayout的标签选择，当标签选中时ViewPager切换
mTabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));
// 监听ViewPager的页面切换，当页面切换时TabLayout的标签跟着切换
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));其中TabLayout类的setTabsFromPagerAdapter()方法已将过时,被以下的第二种方法代替,其中适配器必须重写getPageTitle()方法,其实不必须,我们知道重写getPageTitle()方法是来设置TabLayout原生标签栏的标题的,而当我们使用setTabsFromPagerAdapter()方法时,TabLayout标签栏的标题内容将会使用getPageTitle()方法里提供的标题,而没有重写getPageTitle()方法来设置标题,TabLyout的标题内容将会以空来显示,所以说也不是必须要重写.
//第二种:
mTabLayout.setupWithViewPager(mViewPager);ViewPager + Fragment
一 . 需要配合Fragment使用的有两个Adapter：FragmentPagerAdapter和FragmentStatePagerAdapter
相同点： FragmentPagerAdapter和FragmentStatePagerAdapter都继承自PagerAdapter
不同点： 卸载不再需fragment时，各自采用的处理方法有所不同
FragmentStatePagerAdapter会销毁不需要的fragment。事务提交后， activity的FragmentManager中的fragment会被彻底移除。 FragmentStatePagerAdapter类名中的“state”表明：在销毁fragment时，可在onSaveInstanceState(Bundle)方法中保存fragment的Bundle信息。用户切换回来时，保存的实例状态可用来恢复生成新的fragment
FragmentPagerAdapter有不同的做法。对于不再需要的fragment， FragmentPagerAdapter会选择调用事务的detach(Fragment)方法来处理它，而非remove(Fragment)方法。也就是说， FragmentPagerAdapter只是销毁了fragment的视图， fragment实例还保留在FragmentManager中。因此，FragmentPagerAdapter创建的fragment永远不会被销毁
也就是：在destroyItem()方法中，FragmentStatePagerAdapter调用的是remove()方法，适用于页面较多的情况；FragmentPagerAdapter调用的是detach()方法，适用于页面较少的情况。但是有页面数据需要刷新的情况，不管是页面少还是多，还是要用FragmentStatePagerAdapter，否则页面会因为没有重建得不到刷新
二. 创建Fragment及相应的xml布局样式
public class PagerFragment extends Fragment {
String mContent;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
mContent = (String) getArguments().get("content");
View view = inflater.inflate(R.layout.fragment_pager, container, false) ;
TextView textView = (TextView) view.findViewById(R.id.tv);
textView.setText(mContent);
return view;
}
}<FrameLayout
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.strivestay.viewpagerdemo.PagerFragment">
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18sp"
android:text="@string/hello_blank_fragment"/>
</FrameLayout>三. 给Viewpager设置数据和适配器
private void setVp() {
final List<PagerFragment> list = new ArrayList<>();
for (int i = 0; i < 5; i++) {
PagerFragment fragment = new PagerFragment();
Bundle bundle = new Bundle();
bundle.putString("content","第"+i+"个Fragment");
fragment.setArguments(bundle);
list.add(fragment);
}
ViewPager vp = (ViewPager) findViewById(R.id.vp);
// vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
// @Override
// public Fragment getItem(int position) {
// return list.get(position);
// }
//
// @Override
// public int getCount() {
// return list.size();
// }
// });
vp.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
});
}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
