[Java][Android] 뷰페이저2 (viewPager2) 구현 + 이미지 순서 표시

뷰페이저를 이용해서 이미지를 스와이프 하여 나타내는 것을 구현해 보겠습니다.

 

우선, 전체 코드입니다.

 

1. 뷰페이저를 나타낼 메인 화면의 레이아웃을 만들어줍니다.

 

activity_main.xml

<?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:id="@+id/main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <TextView
    android:id="@+id/tv_order"
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="5dp"
    android:layout_marginBottom="5dp"
    android:background="#88000000"
    android:gravity="center"
    android:textColor="@color/white"
    app:layout_constraintBottom_toBottomOf="@id/view_pager2"
    app:layout_constraintEnd_toEndOf="parent" />

  <androidx.viewpager2.widget.ViewPager2
    android:id="@+id/view_pager2"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_gravity="center"
    android:layout_marginTop="100dp"

    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

2. 이어서 뷰페이저 안에 들어갈 아이템의 레이아웃을 만들어줍니다.

 

vp_item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageView
    android:id="@+id/images"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitCenter" />

</FrameLayout>

 

3. 뷰페이저의 어댑터 클래스를 만들어줍니다.

 

VpAdapter.java

 

public class VpAdapter extends RecyclerView.Adapter<VpAdapter.ViewHolder> {

  private Context context;
  private List<String> items;

  public VpAdapter(Context context, List<String> items) {
    this.context = context;
    this.items = items;
  }

  @NonNull
  @Override
  public VpAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(context).inflate(R.layout.vp_item, parent, false);
    return new ViewHolder(view);
  }

  @Override
  public void onBindViewHolder(@NonNull VpAdapter.ViewHolder holder, int position) {
    holder.bind(items.get(position));
  }

  @Override
  public int getItemCount() {
    return items != null ? items.size() : 0;
  }

  public class ViewHolder extends RecyclerView.ViewHolder {
    ImageView imageView;
    public ViewHolder(@NonNull View itemView) {
      super(itemView);
      imageView = itemView.findViewById(R.id.images);
    }

    public void bind(String imageResource) {
      imageView.setImageResource(Integer.parseInt(imageResource));
    }
  }
}

 

 

4. 메인 액티비티 입니다.

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

  // 이미지 뷰페이저
  private VpAdapter vpAdapter;
  private ViewPager2 viewPager2;
  private TextView tv_order;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    viewPager2 = findViewById(R.id.view_pager2);
    tv_order = findViewById(R.id.tv_order);


    List<String> images = new ArrayList<>();

    // 더미 사진을 이용 했습니다. 각자 원하는 사진을 추가 해주시면 됩니다.
    images.add(String.valueOf(R.drawable.cat1));
    images.add(String.valueOf(R.drawable.cat2));
    images.add(String.valueOf(R.drawable.cat3));
    images.add(String.valueOf(R.drawable.cat4));
    images.add(String.valueOf(R.drawable.cat5));

    vpAdapter = new VpAdapter(MainActivity.this ,images);
    viewPager2.setAdapter(vpAdapter);

    viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
      @Override
      public void onPageSelected(int position) {
        super.onPageSelected(position);
        String order = (position + 1) + " / " + images.size();
        tv_order.setText(order);
      }
    });

  }
}

 

 

이렇게 뷰페이저 구현은 완성되었습니다.

 

여기에 registerOnPageChangeCallback() 메서드를 사용해서,

onPageSeleted() 메서드로 뷰페이저의 페이지가 바뀔 때

해당 페이지의 postion 값을 이용해서 textView에 나타내주면 이미지의 순서를 표시할 수 있습니다.

(position은 0부터 시작하므로, 사용자에게 직관적으로 보여주기 위해 +1 을 해주는 게 좋습니다.)

 

 

완성 화면