ViewPager学习

ViewPager

ViewPager入门

概念

ViewPager是一个容器类，它可以添加其他的view类，然后进行左右切换，它需要一个适配器Adapter来提供数据。

使用

1. 在activity_main.xml中添加

       <androidx.viewpager.widget.ViewPager
           android:id="@+id/view_pager"
           android:layout_width="match_parent"
           android:layout_height="match_parent"/>
   

2. 接着在layout中添加三个视图布局xml文件

3. 创建ViewPager的适配器，必须重写getCount、isViewFromObject、instantiateItem以及destroyItem方法

   public class ViewPagerAdapter extends PagerAdapter {
   
       private List<View> mViews;
   
       public ViewPagerAdapter(List<View> views) {
           mViews = views;
       }
   
       //返回视图列表视图数量
       @Override
       public int getCount() {
           return mViews.size();
       }
   
       //判断视图是否属于对象
       @Override
       public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
           return view == object;
       }
   
       //为翻页控件添加视图
       @NonNull
       @Override
       public Object instantiateItem(@NonNull ViewGroup container, int position) {
           container.addView(mViews.get(position));
           return mViews.get(position);
       }
   
       //移除翻页控件中的视图
       @Override
       public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
           container.removeView(mViews.get(position));
       }
   }
   

4. 在MainActivity中引用布局文件，同时创建viewpager的适配器实例，然后viewpager添加adapter适配器。

       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           //引用视图翻页控件ViewPager
           ViewPager viewPager = findViewById(R.id.view_pager);
           //创建LayoutInflater实例来动态生成布局
           LayoutInflater layoutInflater = getLayoutInflater();
   
           View view1 = layoutInflater.inflate(R.layout.view_pager_layout1, null);
           View view2 = layoutInflater.inflate(R.layout.view_pager_layout2, null);
           View view3 = layoutInflater.inflate(R.layout.view_pager_layout3, null);
           List<View> viewList = new ArrayList<>();
           viewList.add(view1);
           viewList.add(view2);
           viewList.add(view3);
           //构建翻页适配器实例
           ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(viewList);
   
           viewPager.setAdapter(viewPagerAdapter);
       }
   

ViewPager+Fragment实现微信主页布局

1. 在activity_main.xml中添加布局，创建三个TextView和一个ViewPager：

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout 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"
       tools:context=".MainActivity">
   
       <LinearLayout
           android:id="@+id/linearLayout"
           android:layout_width="match_parent"
           android:layout_height="60dp"
           android:orientation="horizontal"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent">
   
           <TextView
               android:id="@+id/textView"
               android:layout_width="0dp"
               android:layout_height="match_parent"
               android:layout_weight="1"
               android:background="@drawable/change_color"
               android:gravity="center"
               android:text="TabFirst" />
   
           <TextView
               android:id="@+id/textView2"
               android:layout_width="0dp"
               android:layout_height="match_parent"
               android:layout_weight="1"
               android:background="@drawable/change_color"
               android:gravity="center"
               android:text="TabSecond" />
   
           <TextView
               android:id="@+id/textView3"
               android:layout_width="0dp"
               android:layout_height="match_parent"
               android:layout_weight="1"
               android:background="@drawable/change_color"
               android:gravity="center"
               android:text="TabThird" />
       </LinearLayout>
   
       <androidx.viewpager.widget.ViewPager
           android:id="@+id/view_pager"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           app:layout_constraintVertical_weight="1"
           app:layout_constraintBottom_toTopOf="@+id/linearLayout"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 创建三个Fragment，这里只是简单实现，直接创建即可，把xml文件中的Text设置为不同值，以便于区分显示

3. 创建ViewPager的Adapter

   public class ViewPagerAdapter extends FragmentPagerAdapter {
       private List<Fragment> mFragmentList;
   
       public ViewPagerAdapter(@NonNull FragmentManager fm, List<Fragment> fragmentList) {
           super(fm);
           mFragmentList = fragmentList;
       }
   
       @Override
       public int getCount() {
           return mFragmentList.size();
       }
   
       @NonNull
       @Override
       public Fragment getItem(int position) {
           return mFragmentList.get(position);
       }
   }
   

4. 在MainActivity中实现

   public class MainActivity extends AppCompatActivity implements View.OnClickListener {
       private List<Fragment> mFragmentList;
       private ViewPager mViewPager;
       private TextView mTextView1;
       private TextView mTextView2;
       private TextView mTextView3;
       private TextView mCurrentTextView;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
           //初始化
           InitView();
       }
   
   
       public void InitView(){
           mTextView1 = findViewById(R.id.textView);
           mTextView2 = findViewById(R.id.textView2);
           mTextView3 = findViewById(R.id.textView3);
           mViewPager = findViewById(R.id.view_pager);
           mTextView1.setOnClickListener(this);
           mTextView2.setOnClickListener(this);
           mTextView3.setOnClickListener(this);
           //创建Fragment实例，并添加到List中
           FirstFragment firstFragment = new FirstFragment();
           SecondFragment secondFragment = new SecondFragment();
           ThirdFragment thirdFragment = new ThirdFragment();
           mFragmentList = new ArrayList<>();
           mFragmentList.add(firstFragment);
           mFragmentList.add(secondFragment);
           mFragmentList.add(thirdFragment);
           //创建FragmentPagerAdapter实例
           ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(),mFragmentList);
           //ViewPager添加适配器
           mViewPager.setAdapter(adapter);
           //设置当前第一个Fragment默认选中
           mViewPager.setCurrentItem(0);
           //使得第一个TextView默认选中，设置为Select，使背景切换
           mCurrentTextView = mTextView1;
           mCurrentTextView.setSelected(true);
           //添加ViewPager的切换监听事件，更新TextView的背景
           mViewPager.addOnPageChangeListener(new ViewPagerChangeListener());
       }
   
       //改变TextView的选中状态
       public void changeTextView(int i){
           mCurrentTextView.setSelected(false);
           switch (i){
               case 0:
                   mCurrentTextView = mTextView1;
                   mCurrentTextView.setSelected(true);
                   break;
               case 1:
                   mCurrentTextView = mTextView2;
                   mCurrentTextView.setSelected(true);
                   break;
               case 2:
                   mCurrentTextView = mTextView3;
                   mCurrentTextView.setSelected(true);
                   break;
               default:
                   break;
   
           }
       }
   
       //ViewPager切换监听，调用changeTextView方法改变TextView选中状态
       public class ViewPagerChangeListener implements ViewPager.OnPageChangeListener{
           @Override
           public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
           }
           @Override
           public void onPageSelected(int position) {
               changeTextView(position);
           }
   
           @Override
           public void onPageScrollStateChanged(int state) {
           }
       }
   
       //点击事件
       @Override
       public void onClick(View v) {
           switch (v.getId()){
               case R.id.textView:
                   mViewPager.setCurrentItem(0);
                   changeTextView(0);
                   break;
               case R.id.textView2:
                   mViewPager.setCurrentItem(1);
                   changeTextView(1);
                   break;
               case R.id.textView3:
                   mViewPager.setCurrentItem(2);
                   changeTextView(2);
                   break;
               default:
                   break;
           }
       }
   }
   

ViewPager+TabLayout+Fragment

1. 在activity_main.xml中添加布局，创建TabLayout和一个ViewPager：

   <?xml version="1.0" encoding="utf-8"?>
   <androidx.constraintlayout.widget.ConstraintLayout 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"
       tools:context=".MainActivity">
   
       <com.google.android.material.tabs.TabLayout
           android:id="@+id/tab_layout"
           android:layout_width="match_parent"
           android:layout_height="50dp"
           app:tabTextColor="@color/black"
           app:tabSelectedTextColor="@color/teal_200"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" >
       </com.google.android.material.tabs.TabLayout>
   
       <androidx.viewpager.widget.ViewPager
           android:id="@+id/view_pager"
           android:layout_width="match_parent"
           android:layout_height="0dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toBottomOf="@+id/tab_layout"
           app:layout_constraintVertical_weight="1" />
   
   </androidx.constraintlayout.widget.ConstraintLayout>
   

2. 创建三个Fragment，这里只是简单实现，直接创建即可，把xml文件中的Text设置为不同值，以便于区分显示

3. 创建ViewPager的Adapter，注意这里的TitleList和重写的CharSequence方法，是设置TabLayout的标题名称的

   public class ViewPagerAdapter extends FragmentPagerAdapter {
       private List<Fragment> mFragmentList;
       private List<String> mTitleList;
   
       public ViewPagerAdapter(@NonNull FragmentManager fm, List<Fragment> fragmentList) {
           super(fm);
           mFragmentList = fragmentList;
           mTitleList = new ArrayList<>();
           mTitleList.add("Tab1");
           mTitleList.add("Tab2");
           mTitleList.add("Tab3");
       }
   
       @Override
       public int getCount() {
           return mFragmentList.size();
       }
   
       @NonNull
       @Override
       public Fragment getItem(int position) {
           return mFragmentList.get(position);
       }
   
       @Nullable
       @Override
       public CharSequence getPageTitle(int position) {
           return mTitleList.get(position);
       }
   }
   

4. 在MainActivity中实现

   public class MainActivity extends AppCompatActivity {   
    private List<Fragment> mFragmentList;    
    private ViewPager mViewPager;    
    @Override    
    protected void onCreate(Bundle savedInstanceState) {        
    super.onCreate(savedInstanceState);        
    setContentView(R.layout.activity_main);        
    InitView();   
     }    
     public void InitView(){       
      mViewPager = findViewById(R.id.view_pager);       
       TabLayout tabLayout = findViewById(R.id.tab_layout);        
       FirstFragment firstFragment = new FirstFragment();        
       SecondFragment secondFragment = new SecondFragment();        
       ThirdFragment thirdFragment = new ThirdFragment();       
        mFragmentList = new ArrayList<>();        
        mFragmentList.add(firstFragment);        
        mFragmentList.add(secondFragment);        
        mFragmentList.add(thirdFragment);        
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(),mFragmentList);       
        mViewPager.setAdapter(adapter);        
        //把TabLayout和ViewPager组合,使用setupWithViewPager可以让TabLayout和ViewPager联动       
        tabLayout.setupWithViewPager(mViewPager);    
        }
        }