[Java][Android] 안드로이드 뷰페이저

오늘은 안드로이드 뷰페이저를 구현해보겠습니다. 

 

 

build.gradle에 추가

//viewpager2
implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha04'

 

xml에 뷰페이저를 추가

뷰페이저를 띄울 액티비티의 xml에 뷰페이저를 추가해줍니다.

 

activity_viewpager.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewpagerActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" >
    </androidx.viewpager2.widget.ViewPager2>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

뷰 페이저에 들어갈 아이템 XML 정의

텍스트뷰 하나가 포함된 간단한 아이템을 만들었습니다.

viewpager_item.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:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:id="@+id/view_pager_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="40sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

뷰 페이저 어댑터 구현

뷰 페이저2의 어댑터는 리사이클러뷰의 어댑터를 구현하는것과 같습니다.

아래의 어댑터와 같은 형식은 많이 쓰이는 형식이므로 스틱코드에 등록해놓고 한 번에 불러와서 필요부분만 수정해서 쓰는 식으로 빠르게 구현할 수 있습니다. 

 

stickode.com/detail.html?no=1901 - 안드로이드 자바 뷰페이저2 기본 어댑터 

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

    private List<String> Items;

    public ViewpagerAdapter(List<String> Items) {
        this.Items = Items;
    }

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

    @Override
    public void onBindViewHolder(@NonNull ViewpagerAdapter.ViewHolder holder, int position) {
        holder.pagerText.setText(Items.get(position));
    }

    @Override
    public int getItemCount() {
        return Items.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView pagerText;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            pagerText = itemView.findViewById(R.id.view_pager_text);
        }
    }

}

 

뷰페이저에 어댑터 설정 (ViewpagerActivity)

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_viewpager);	
    ViewPager2 viewPager = findViewById(R.id.view_pager);	
    ViewpagerAdapter adapter = new ViewpagerAdapter(setTextList());		// 어댑터 생성. 아이템 리스트를 파라미터로 넣어준다.
    viewPager.setAdapter(adapter);	// 뷰페이저에 어댑터 등록
}

 

어댑터에 등록할 아이템 생성 (ViewpagerActivity)

뷰페이저에서 보여줄 텍스트를 담은 리스트를 생성합니다.

protected ArrayList setTextList(){

    ArrayList<String> itemList = new ArrayList();
    itemList.add("Page 1");
    itemList.add("Page 2");
    itemList.add("Page 3");
    itemList.add("Page 4");
    itemList.add("Page 5");

    return itemList;
}

 

ViewpagerActivity 전체 코드

public class ViewpagerActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_viewpager);
    ViewPager2 viewPager = findViewById(R.id.view_pager);
    ViewpagerAdapter adapter = new ViewpagerAdapter(setTextList());
    viewPager.setAdapter(adapter);
}


    protected ArrayList setTextList(){

        ArrayList<String> itemList = new ArrayList();
        itemList.add("Page 1");
        itemList.add("Page 2");
        itemList.add("Page 3");
        itemList.add("Page 4");
        itemList.add("Page 5");

        return itemList;
    }
}

 

 

---

아래 영상과 같이 뷰페이저가 잘 작동하는 것을 확인할 수 있습니다.

뷰페이저 페이지 양옆 넘기기

 

페이지를 위아래로 넘기고 싶다면 뷰페이저의 orientation속성을 vertical로 변경시켜주면 됩니다. default는 horizontal입니다.

 

 

 

뷰페이저 페이지 위아래 넘기기