一、简介
Viewpager，视图翻页工具，提供了多页面切换的效果。Android 3.0后引入的一个UI控件，位于v4包中。低版本使用需要导入v4包，但是现在我们开发的APP一般不再兼容3.0及以下的系统版本，另外现在大多数使用Android studio进行开发，默认导入v7包，v7包含了v4，所以不用导包，越来越方便了。
Viewpager使用起来就是我们通过创建adapter给它填充多个view，左右滑动时，切换不同的view。Google官方是建议我们使用Fragment来填充ViewPager的，这样 可以更加方便的生成每个Page，以及管理每个Page的生命周期
Viewpager在Android开发中使用频率还是比较高的，下面开始一起学习吧
二、基本使用
1. xml引用
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
2. page布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/text_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FAE8DA"
android:gravity="center"
android:text="@string/hello"
android:textSize="22sp" />
</LinearLayout>
3. 创建适配器
可直接创建PagerAdapter，亦可创建它的子类
package com.lid.viewpager.main.adapter;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.lid.viewpager.R;
import java.util.List;
public class MainViewPagerAdapter extends PagerAdapter {
private Context mContext;
private List<String> mData;
public MainViewPagerAdapter(Context mContext, List<String> mData) // 构造器
{
this.mContext = mContext;
this.mData = mData;
}
@Override
public int getCount() // 根据 mData 的数量，创建 ViewPager 中的页面数量
{
return mData.size();
}
@Override
public boolean isViewFromObject(View view, Object object) // 好像是判断是否重复，如果已经加载了那就不去重复加载
{
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) // 实例化 pager.xml
{
View view = View.inflate(mContext, R.layout.pager, null); // 实例化 pager.xml
TextView textView = view.findViewById(R.id.text_view); // 取得 pager.xml 中的 TextView
textView.setText(mData.get(position)); // 根据 position 设置 TextView 中的文字
container.addView(view); // 将实例化的 pager.xml 加入到容器中去, container 就是容器.
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) // 好像是销毁Item用的
{
container.removeView((View) object);
}
}
4. 设置适配器
package com.lid.viewpager.main;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.lid.viewpager.R;
import com.lid.viewpager.main.adapter.MainViewPagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setVp();
}
private void setVp() // 配置 ViewPager
{
List<String> list = new ArrayList<>();
for (int i = 0; i < 3; i++) // 填充数据源
{
list.add("第" + i + "个View");
}
ViewPager vp = findViewById(R.id.view_pager);
vp.setAdapter(new MainViewPagerAdapter(this, list)); // 设置适配器 ( Set Adapter )
}
}
效果：
1.gif
码云:
https://gitee.com/giraffer/ViewPager001
5. 标题栏
给Viewpager设置标题栏有一下几种方式：
PagerTabStrip： 带有下划线
PagerTitleStrip： 不带下划线
TabLayout：5.0后推出
5.2 PagerTitleStrip
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7">
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pager_title"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="top"
android:background="#FFFFFF"
android:textColor="#FF0000"
android:textSize="18sp" />
</android.support.v4.view.ViewPager>
<Button
android:id="@+id/start_home"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="@string/start_home" />
</LinearLayout>
5.3 PagerTabStrip
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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="#FFFFFF"
android:textColor="#FF0000" />
</android.support.v4.view.ViewPager>
</LinearLayout>
5.3 重写PagerAdapter中的getTitle()方法
注意!
@Override
public CharSequence getPageTitle(int position) // PagerTitleStrip 的标题就是从这里取到的
{
return mData.get(position);
}
这两种方法作为了解，不常用，项目中还没用到过
效果:
android.support.v4.view.PagerTitleStrip
1.gif
android.support.v4.view.PagerTabStrip
2.gif
码云:
https://gitee.com/giraffer/ViewPager002
三、与Fragment结合使用
与Fragment结合使用其实也一样，只是用Fragment代替原先的View，填充Viewpager；然后就是Adapter不一样，配合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，否则页面会因为没有重建得不到刷新
1. 创建Fragment
package com.lid.viewpager.main.fragment;
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;
import com.lid.viewpager.R;
public class PagerFragment extends Fragment {
String mContent;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) // 在 PagerFragment 被Android系统创建的时候,回调此函数.
{
View view = inflater.inflate(R.layout.pager_fragment, container, false); // 装载 pager_fragment.xml
TextView textView = view.findViewById(R.id.pager_fragment_textview); // 获取 TextView
mContent = (String) getArguments().get("content"); // 取出 String (字符串)
textView.setText(mContent); // 让 TextView 显示,刚刚取到的String
return view;
}
}
2.创建Fragment对应的pager_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/pager_fragment_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/pager_fragment_button" />
<TextView
android:id="@+id/pager_fragment_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/hello" />
</LinearLayout>
3.为Viewpager设置数据和适配器
package com.lid.viewpager.main;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.lid.viewpager.R;
import com.lid.viewpager.main.fragment.PagerFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setVp();
}
private void setVp() // 配置 ViewPager
{
final List<PagerFragment> list = new ArrayList<>(); // 创建一个可以盛放 PagerFragment 的 List
for (int i = 0; i < 5; i++) // 创建五个PagerFragment塞进List
{
PagerFragment fragment = new PagerFragment();
Bundle bundle = new Bundle();
bundle.putString("content", "第" + i + "个Fragment"); // 给PagerFragment加点料,用Bundle传递个String给新创建的PagerFragment 让五个PagerFragment区分开来
fragment.setArguments(bundle);
list.add(fragment); // 塞进List
}
ViewPager vp = findViewById(R.id.view_pager);
vp.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) // 这里用的匿名类 FragmentStatePagerAdapter
{
@Override
public Fragment getItem(int position) // 按照 position 从 List 中依次取出 PagerFragment
{
return list.get(position);
}
@Override
public int getCount() // 返回 List 中 PagerFragment 的总数
{
return list.size();
}
});
}
}
效果:
1.gif
码云:
https://gitee.com/giraffer/ViewPager003
网友评论