안드로이드 애플리케이션 개발에서 사용자 경험은 매우 중요하며, 사용자가 앱을 자연스럽게 탐색할 수 있도록 도와주는 다양한 UI 구성 요소가 필요합니다. 그중에서도 뷰 페이저(ViewPager)는 사용자에게 여러 화면을 스와이프(좌우로 넘김)할 수 있는 경험을 제공합니다. 이번 포스트에서는 ViewPager2를 활용하여 스와이프 가능한 화면을 구성하는 방법에 대해 알아보겠습니다.
뷰 페이저(ViewPager) 개요
ViewPager 는 여러 페이지를 좌우로 스와이프하여 탐색할 수 있는 UI 구성 요소입니다. 사용자가 화면을 스와이프함에 따라 원하는 페이지로 쉽게 이동할 수 있도록 도와줍니다. ViewPager2는 기존 ViewPager의 개선된 버전으로 RecyclerView를 기반으로 하여 더 나은 성능과 유연성을 제공합니다.
뷰 페이저2의 특징
- RecyclerView 기반:
ViewPager2는RecyclerView와 통합되어 더 많은 기능과 최적화를 제공합니다. - 수직 및 수평 스크롤: 기본적으로 수평 스크롤을 지원하며, 설정을 통해 수직 스크롤도 가능하게 할 수 있습니다.
- Fragment 지원:
ViewPager2는 프래그먼트를 그대로 사용할 수 있어, 여러 화면을 간편하게 구성할 수 있습니다.
개발 환경 설정
뷰 페이저2를 사용하기 위해서는 Android Studio와 Gradle을 사용하여 새 프로젝트를 생성해야 합니다. 다음 단계를 따라주세요.
- Android Studio를 열고 File > New > New Project를 선택합니다.
- Empty Activity를 선택하고, 프로젝트 이름과 패키지 이름을 설정합니다.
- Gradle 파일에 뷰 페이저2 의존성을 추가합니다.
Gradle 의존성 추가
dependencies {
implementation 'androidx.viewpager2:viewpager2:1.0.0'
}위의 의존성을 build.gradle (Module: app) 파일에 추가한 후, 프로젝트를 동기화합니다.
뷰 페이저2 구현하기
1. 레이아웃 구성
먼저, activity_main.xml 파일에 다음과 같이 ViewPager2를 추가합니다.
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>2. 어댑터 생성
다음으로, ViewPager2의 데이터를 관리하는 어댑터를 생성해야 합니다. 어댑터는 RecyclerView.Adapter를 상속받아야 합니다.
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
public class MyPagerAdapter extends RecyclerView.Adapter {
private String[] data;
public MyPagerAdapter(String[] data) {
this.data = data;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(android.R.layout.simple_list_item_1, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
holder.textView.setText(data[position]);
}
@Override
public int getItemCount() {
return data.length;
}
public static class ViewHolder extends RecyclerView.ViewHolder {
TextView textView;
public ViewHolder(View itemView) {
super(itemView);
textView = itemView.findViewById(android.R.id.text1);
}
}
} 3. MainActivity 구현
이제 메인 액티비티에서 ViewPager2를 초기화하고, 생성한 어댑터를 연결해줍니다.
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
public class MainActivity extends AppCompatActivity {
private ViewPager2 viewPager;
private MyPagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewPager);
String[] data = {"화면 1", "화면 2", "화면 3", "화면 4"};
adapter = new MyPagerAdapter(data);
viewPager.setAdapter(adapter);
}
}뷰 페이저2에 프래그먼트 사용하기
이제 우리는 ViewPager2에서 프래그먼트를 사용하여 더 복잡한 UI를 구성해 보겠습니다. 프래그먼트를 사용하면 다양한 화면을 구현하는 데 유용합니다.
1. 프래그먼트 생성
각각의 화면을 구성하기 위해 새로운 프래그먼트를 생성하겠습니다.
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class ScreenSlidePageFragment extends Fragment {
private static final String ARG_OBJECT = "object";
public static ScreenSlidePageFragment create(int position) {
ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
Bundle args = new Bundle();
args.putInt(ARG_OBJECT, position);
fragment.setArguments(args);
return fragment;
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(android.R.layout.simple_list_item_1, container, false);
TextView textView = view.findViewById(android.R.id.text1);
textView.setText("프래그먼트 " + getArguments().getInt(ARG_OBJECT));
return view;
}
}2. 어댑터 수정
프래그먼트를 사용하기 위해 어댑터를 수정합니다.
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
public class ScreenSlidePagerAdapter extends FragmentStateAdapter {
public ScreenSlidePagerAdapter(FragmentActivity fa) {
super(fa);
}
@NonNull
@Override
public Fragment createFragment(int position) {
return ScreenSlidePageFragment.create(position);
}
@Override
public int getItemCount() {
return 4; // 프래그먼트 수
}
}3. MainActivity에서 어댑터 설정
마지막으로, MainActivity에서 어댑터를 설정합니다.
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.widget.ViewPager2;
public class MainActivity extends AppCompatActivity {
private ViewPager2 viewPager;
private ScreenSlidePagerAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewPager);
adapter = new ScreenSlidePagerAdapter(this);
viewPager.setAdapter(adapter);
}
}뷰 페이저2의 장점과 활용 예시
- 우수한 사용자 경험: 사용자에게 매끄러운 화면 전환과 인터랙티브한 UI를 제공하여 앱 탐색의 자연스러움을 더합니다.
- 다양한 화면 배치: 거의 모든 유형의 화면을 프래그먼트를 사용하여 구성할 수 있어 재사용성과 유지보수가 용이합니다.
- 뷰 페이저와 애니메이션: 뷰 페이저2는 다양한 애니메이션 효과를 지원하여, 더 매력적인 UI/UX를 만들 수 있습니다.
결론
이번 포스트에서는 ViewPager2를 사용하여 사용자에게 스와이프 가능한 화면을 만드는 방법을 알아보았습니다. 우리는 어댑터를 이용하여 데이터를 관리하고, 프래그먼트를 활용하여 복잡한 UI를 구성하는 방법을 배웠습니다. 이러한 기술을 활용하면 더욱 매력적이고 사용하기 쉬운 안드로이드 애플리케이션을 개발할 수 있습니다.
앞으로의 포스팅에서도 안드로이드 개발 관련 다양한 주제를 다룰 예정이니 많은 관심 부탁드립니다!