[Android/안드로이드]ViewPager2 사용하기

기존의 ViewPager에서는 좌우 스크롤링만 가능했었습니다. 상하 스크롤링기능을 추가하고 싶다면 새로운 모듈을 만들어서 사용해야하는 번거로움이 생길 뿐더러 몇몇 기기에서는 스크롤이 버벅거리는 현상이 있었습니다. 

 

ViewPager2 새로운 기능

• ViewPager2는 RecyclerView를 기반으로 사용됩니다.
• 수직스크롤링 지원
• notifyDataSetChanged기능
• 페이지 변경 에니메이션 제어 기능 향상
• 사용하기 편해진 페이지 변경 리스너

변경된 사용방법

• FragmentStatePagerAdapter에서 FragmentStateAdapter로 대체합니다
• PagerAdapter에서 RecyclerView.Adapter로 대체합니다
• 페이지 이벤트를 addPageChangeListener()에서 registerOnpageCallback()로 대체합니다.

 

 

사용법

우선 ViewPager2를 사용하려면 다음 종속성을 추가해야합니다.

build.gradle(Module:app) 

  
  dependencies {
      
      //viewpager2
      implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha04'
  }
  

 

 

레이아웃에 ViewPager를 추가해줍니다.

activity_main.xml

  
  <?xml version="1.0" encoding="utf-8"?>
  <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"
      android:background="#000000"
      tools:context=".MainActivity">
  
      <androidx.appcompat.widget.AppCompatButton
          android:layout_gravity="center"
          android:id="@+id/btnToggle"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="가로로 슬라이드" />
  
      <androidx.viewpager2.widget.ViewPager2
          android:layout_weight="1"
          android:id="@+id/viewPager2"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="horizontal"/>
  </LinearLayout>
  

 

Data

DataPage.java

  
  package com.example.verpager2;
  
  public class DataPage {
      int color;
      String title;
  
      public DataPage(int color, String title){
          this.color = color;
          this.title = title;
      }
  
      public int getColor() {
          return color;
      }
  
      public void setColor(int color) {
          this.color = color;
      }
  
      public String getTitle() {
          return title;
      }
  
      public void setTitle(String title) {
          this.title = title;
      }
  }
  

 

RecyclerView.Adapter

ViewPager2에서는 RecyclerView와 사용법이 같기 때문에 이전 글을 참조해 모듈화를 잘 만들어놓으면 같이 사용할 수 있습니다.

ViewPagerAdapter.java

  
  package com.example.verpager2;
  
  import android.content.Context;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  
  import androidx.recyclerview.widget.RecyclerView;
  
  import java.util.ArrayList;
  
  public class ViewPagerAdapter extends RecyclerView.Adapter<ViewHolderPage> {
  
      private ArrayList<DataPage> listData;
  
      ViewPagerAdapter(ArrayList<DataPage> data) {
          this.listData = data;
      }
  
      @Override
      public ViewHolderPage onCreateViewHolder(ViewGroup parent, int viewType) {
          Context context = parent.getContext();
          View view = LayoutInflater.from(context).inflate(R.layout.item_viewpager, parent, false);
          return new ViewHolderPage(view);
      }
  
      @Override
      public void onBindViewHolder(ViewHolderPage holder, int position) {
          if(holder instanceof ViewHolderPage){
              ViewHolderPage viewHolder = (ViewHolderPage) holder;
              viewHolder.onBind(listData.get(position));
          }
      }
  
      @Override
      public int getItemCount() {
          return listData.size();
      }
  }
  

 

ViewHolder

ViewHolderPage.java

  
  package com.example.verpager2;
  
  import android.view.View;
  import android.widget.RelativeLayout;
  import android.widget.TextView;
  
  import androidx.recyclerview.widget.RecyclerView;
  
  public class ViewHolderPage extends RecyclerView.ViewHolder {
  
      private TextView tv_title;
      private RelativeLayout rl_layout;
  
      DataPage data;
  
      ViewHolderPage(View itemView) {
          super(itemView);
          tv_title = itemView.findViewById(R.id.tv_title);
          rl_layout = itemView.findViewById(R.id.rl_layout);
      }
  
      public void onBind(DataPage data){
          this.data = data;
  
          tv_title.setText(data.getTitle());
          rl_layout.setBackgroundResource(data.getColor());
      }
  }
  

 

item_viewpager.xml

  
  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/rl_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      <androidx.appcompat.widget.AppCompatTextView
          android:id="@+id/tv_title"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:textColor="@android:color/white"
          android:textSize="32sp"
          tools:text="item" />
  </RelativeLayout>
  

 

Adapter Connect

MainActivity.xml

  
  package com.example.verpager2;
  
  import androidx.appcompat.app.AppCompatActivity;
  import androidx.viewpager2.widget.ViewPager2;
  
  import android.os.Bundle;
  import android.view.View;
  import android.widget.Button;
  
  import java.util.ArrayList;
  
  public class MainActivity extends AppCompatActivity {
  
      ViewPager2 viewPager2;
      Button btnToggle;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          viewPager2 = findViewById(R.id.viewPager2);
          btnToggle = findViewById(R.id.btnToggle);
  
          ArrayList<DataPage> list = new ArrayList<>();
          list.add(new DataPage(android.R.color.black,"1 Page"));
          list.add(new DataPage(android.R.color.holo_red_light, "2 Page"));
          list.add(new DataPage(android.R.color.holo_green_dark, "3 Page"));
          list.add(new DataPage(android.R.color.holo_orange_dark, "4 Page"));
          list.add(new DataPage(android.R.color.holo_blue_light, "5 Page"));
          list.add(new DataPage(android.R.color.holo_blue_bright, "6 Page"));
  
          viewPager2.setAdapter(new ViewPagerAdapter(list));
  
          btnToggle.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  if (viewPager2.getOrientation() == ViewPager2.ORIENTATION_VERTICAL) {
                      btnToggle.setText("가로로 슬라이드");
                      viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
                  }else {
                      btnToggle.setText("세로로 슬라이드");
                      viewPager2.setOrientation(ViewPager2.ORIENTATION_VERTICAL);
                  }
              }
          });
      }
  }
  

 

결과화면

다음과같이 기존의 몇몇기기에서 수직스크롤을 할 때 버벅거리는 현상도 수정되었고, 이제는 ViewPager2자체적으로 수직스크롤 기능까지 지원해줘서 편리하게 사용할 수 있습니다.

 

궁금하신점이나 부족한점은 댓글 부탁드립니다~~