메뉴 건너뛰기

조회 수 43 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

1. 메인 UI 레이아웃 리소스에 ViewPager 추가

<android.support.constraint.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=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="300dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

2. ViewPager 페이지 구성을 위한 레이아웃 리소스

<?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"
    android:layout_width="match_parent"
    android:layout_height="300dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher_round" />
</LinearLayout>

▼ ViewPager에서 컨텐츠를 표현하기 위한 각 페이지의 UI 구성을 위한 레이아웃 리소스입니다. 

상단에 LinearLayout을 배치하고 그 아래에 ImageView를 배치하여 ViewPager의 각 페이지에 이미지를 표현하도록 구현하였습니다. 


3. Adapter 구현

ViewPager도 결국 RecyclerView와 같이 앱에서 사용되는 데이터 리스트를 화면에 배치한다는 점에서 동일합니다. 즉 데이터 리스트를 입력받아 각 데이터 항목에 해당하는 뷰(View)를 생성해주는 Adapter 구현이 필수라는 의미입니다.

public class ViewPagerAdapter extends PagerAdapter {
    private Context mContext;
    private ArrayList<Integer> imageList;

    public ViewPagerAdapter(Context context, ArrayList<Integer> imageList)
    {
        this.mContext = context;
        this.imageList = imageList;
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.pagerview_layout, null);

        ImageView imageView = view.findViewById(R.id.imageView);
        imageView.setImageResource(imageList.get(position));

        container.addView(view);

        return view;
    }

    @Override
    public int getCount() {
        return imageList.size();
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View)object);
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
        return (view == (View)o);
    }
}

▼ ViewPagerAdapter 클래스는 PagerAdapter를 상속받아 구현합니다. 필수 재정의 함수로는 아래와 같습니다.

함수 설명
instantiateItem(ViewGroup view, int position) 데이터 리스트에서 인자로 넘어온 position에 해당하는 아이템 항목에 대한 페이지를 생성합니다. 
destroyItem(ViewGroup parent, int position, Object object) Adapter가 관리하는 데이터 리스트에서 인자로 넘어온 position에 해당하는 데이터 항목을 생성된 페이지를 제거
int getCount() Adapter가 관리하는 데이터 리스트의 총 개수
isViewFromObject(View view, Object object) 페이지가 특정 키와 연관되는지 체크

PagerView에서 관리하는 데이터가 10개면 각 데이터 항목에 해당하는 뷰(View)는 한꺼번에 생성되지 않습니다. 현재 화면에 보이는 페이지 하나와 스와이프를 통해 좌우로 전환하게 될 페이지 2개로 총 3개의 페이지에 대해서 생성 및 관리를 합니다.


4. MainActivity 구현

public class MainActivity extends AppCompatActivity {

    private ArrayList<Integer> imageList;
    private static final int DP = 24;

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

        this.initializeData();

        ViewPager viewPager = findViewById(R.id.viewPager);
        viewPager.setClipToPadding(false);
        
        float density = getResources().getDisplayMetrics().density;
        int margin = (int) (DP * density);
        viewPager.setPadding(margin, 0, margin, 0);
        viewPager.setPageMargin(margin/2);

        viewPager.setAdapter(new ViewPagerAdapter(this, imageList));
    }

    public void initializeData()
    {
        imageList = new ArrayList();

        imageList.add(R.drawable.movie1);
        imageList.add(R.drawable.movie2);
        imageList.add(R.drawable.movie3);
        imageList.add(R.drawable.movie4);
        imageList.add(R.drawable.movie5);
    }
}

▼ oncreate()에서는 앞서 생성한 ViewPagerAdapter 객체를 생성하고 setAdapter를 통해 Adapter와 연결합니다. 

 

 


List of Articles
번호 제목 날짜 조회 수
257 [하이브리드앱] userAgent를 이용해서 웹 / 앱 접속 구분하기 2021.09.30 48
256 [하이브리드앱] 링크를 웹뷰가 아닌 새로운 브라우저에서 열기 2021.09.30 16
255 Firebase - 푸시알림 보내기 (2) 2021.09.30 58
254 Firebase - 푸시알림 보내기 file 2021.09.30 24
253 앱 번들(Android App Bundle) 만들기 file 2021.09.14 31
252 [Android] 퍼미션 권한체크(테드퍼미션) 2021.09.14 32
251 안드로이드 액티비티 세로고정 2021.09.14 8
250 안드로이드 - 커스텀 폰트(Custom Font) 적용하기 file 2021.04.02 41
249 안드로이드 - RecyclerView의 ViewType 구분하기 file 2021.04.02 294
248 안드로이드 - 리사이클러뷰 (RecyclerView) notifyDataSetChanged 실행 시 깜빡 거리는 현상 2021.04.02 206
247 안드로이드 - 갤러리에서 이미지 가져오기 2021.04.02 113
246 안드로이드 - 플로팅 액션 버튼(Floating Action Button) 사용법 file 2021.04.02 169
245 안드로이드 - Text 입력 이벤트 처리 - TextWatcher file 2021.04.02 136
244 안드로이드 - KeyEvent(키 이벤트) 처리 file 2021.04.02 313
243 안드로이드 - BottomNavigationView 사용하여 하단 메뉴 만들기 file 2021.04.02 477
242 안드로이드 - 프래그먼트 (Fragment) 사용하기 file 2021.04.02 161
241 안드로이드 - switch를 사용법 및 구현 file 2021.04.02 347
240 안드로이드 - RatingBar를 통해 별점주기 file 2021.04.02 274
239 안드로이드 - SharedPreferences에 앱 정보 저장하기 file 2021.04.02 86
» 안드로이드 - 뷰페이저(ViewPager) 구현 file 2021.04.02 43
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved