[Java][Android] 안드로이드 - ViewPager2

뷰페이저를 이용해서 한번에 한 아이템만 보여줄수 있는 방식의 리사이클러뷰를 만들어 보려고 합니다.

 

사용법은 리사이클러뷰와 거의 흡사합니다.

 

먼저 뷰페이저2를 사용하기 위해서는다음 종속성을 추가해야합니다.

build.gradle(Module:app) 

 

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

 

 

전체 코드 입니다.

 

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>

뷰페이저를 사용할 액티비티 레이아웃에 뷰페이저 위젯을 삽입해 줍니다.

 

 

다음은 뷰페이저에서 보여줄 아이템 화면 레이아웃입니다.

item_viewpager.xml

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;
    }
}

 

다음은 뷰페이지에 들어갈 변수들을 클래스화한 DataPage 클래스입니다.

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;
    }
}

 

뷰페이저 어댑터 클래스입니다.

ViewpagerAdapter.java

class ViewPagerAdapter extends RecyclerView.Adapter<ViewHolderPage> {

    private ArrayList<DataPage> listData;

    ViewPagerAdapter(ArrayList<DataPage> data) {
        this.listData = data;
    }

    @NonNull
    @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();
    }
}

 

다음은 뷰홀더 클래스입니다.

ViewHolderPager.java

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());
    }
}

 

마지막으로 뷰페이저를 보여줄 화면의 자바 코드입니다.

MainActivity.java

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);
                }
            }
        });
    }

}

list에 담을 데이터를 넣어줍니다.

setAdapter() 메서드를 사용해서 뷰페이저에 어댑터를 연결해줍니다.

setOrientation() 메서드를 사용해서 뷰페이저에서 사용할 방향을 설정해 줍니다.

 

완성 화면