[ViewPager] 안드로이드 ViewPager 사용하기(양쪽 페이지 미리보기)

안드로이드 ViewPager 사용하기 및 양쪽 미리보기

안드로이드 App을 만들다 보면 ViewPager를 사용할 일이 정말 많습니다.

ViewPager를 쓰지않은 앱이 없다고해도 과장이 아닌데 그만큼 정말 활용도가 높습니다. 그래서 이번엔 ViewPager의 기본 사용방법을 알아보고 양쪽 페이지를 미리보기하는 방법을 알아보도록 하겠습니다.

ViewPager를 만드는 방법은 activity_main.xml 파일 작성, ViewPager에 들어갈 fragment_image.xml, ImageFragment.java 파일 작성, MainActivity.java에서 ViewPager에 Fragment 추가하는 소스코드 구현 이렇게 3단계면 가능합니다.

그리고 우리는 미리보기를 구현할 것이기 때문에 미리보기 소스코드 추가까지 4단계로 진행이 됩니다.

1. activity_main.xml 파일 작성

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>
</android.support.design.widget.CoordinatorLayout>

- 이번 예제에서는 ViewPager의 높이를 200dp로 고정합니다.

2. fragment_image.xml과 ImageFragment.java 파일 작성

fragment_image.xml

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

    <!-- 깔끔하게 보여주기 위해 scaleType과 marginTop 속성을 줍니다. -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/culture"
        android:scaleType="centerCrop"
        android:layout_marginTop="16dp"/>
</LinearLayout>

ImageFragment.java

package com.imaec.forblog;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ImageFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_image, container, false);

        ImageView imageView = view.findViewById(R.id.imageView);

        if (getArguments() != null) {
            Bundle args = getArguments();
            // MainActivity에서 받아온 Resource를 ImageView에 셋팅
            imageView.setImageResource(args.getInt("imgRes"));
        }

        return view;
    }
}

- MainActivity.java에서 bundle로 넘길 값을 받아 이미지뷰에 셋팅해주는 소스코드가 있습니다.

3. MainActivity.java 파일 작성

 3-1) FragmentAdapater Class 작성

class FragmentAdapter extends FragmentPagerAdapter {

    // ViewPager에 들어갈 Fragment들을 담을 리스트
    private ArrayList<Fragment> fragments = new ArrayList<>();

    // 필수 생성자
    FragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

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

    // List에 Fragment를 담을 함수
    void addItem(Fragment fragment) {
        fragments.add(fragment);
    }
}

 3-2) ViewPager와 FragmentAdapter 연결

ViewPager viewPager = findViewById(R.id.viewPager);
FragmentAdapter fragmentAdapter = new FragmentAdapter(getSupportFragmentManager());
// ViewPager와  FragmentAdapter 연결
viewPager.setAdapter(fragmentAdapter);

 3-3) FragmentAdapter에 Fragment 추가

// FragmentAdapter에 Fragment 추가, Image 개수만큼 추가
for (int i = 0; i < 4; i++) {
    ImageFragment imageFragment = new ImageFragment();
    fragmentAdapter.addItem(imageFragment);
}
fragmentAdapter.notifyDataSetChanged();

- 여기까지하면 기본적인 ViewPager 사용방법이 됩니다.

결과

- 소스코드를 조금 추가하고 수정해서 미리보기가 가능하도록 해야겠죠.

4. MainActivity.java 소스 추가

 4-1) ViewPager Item Margin 조정

viewPager.setClipToPadding(false);
int dpValue = 16;
float d = getResources().getDisplayMetrics().density;
int margin = (int) (dpValue * d);
viewPager.setPadding(margin, 0, margin, 0);
viewPager.setPageMargin(margin/2);

 4-3) ImageList 선언

// Fragment로 넘길 Image Resource
ArrayList<Integer> listImage = new ArrayList<>();
listImage.add(R.drawable.culture);
listImage.add(R.drawable.festival);
listImage.add(R.drawable.course);
listImage.add(R.drawable.leports);

 4-3) 3-3 소스코드 수정

// FragmentAdapter에 Fragment 추가, Image 개수만큼 추가
for (int i = 0; i < listImage.size(); i++) {
    ImageFragment imageFragment = new ImageFragment();
    Bundle bundle = new Bundle();
    bundle.putInt("imgRes", listImage.get(i));
    imageFragment.setArguments(bundle);
    fragmentAdapter.addItem(imageFragment);
}
fragmentAdapter.notifyDataSetChanged();

MainActivity.java 전체소스

package com.imaec.forblog;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

        // Fragment로 넘길 Image Resource
        ArrayList<Integer> listImage = new ArrayList<>();
        listImage.add(R.drawable.culture);
        listImage.add(R.drawable.festival);
        listImage.add(R.drawable.course);
        listImage.add(R.drawable.leports);

        ViewPager viewPager = findViewById(R.id.viewPager);
        FragmentAdapter fragmentAdapter = new FragmentAdapter(getSupportFragmentManager());
        // ViewPager와  FragmentAdapter 연결
        viewPager.setAdapter(fragmentAdapter);

        viewPager.setClipToPadding(false);
        int dpValue = 16;
        float d = getResources().getDisplayMetrics().density;
        int margin = (int) (dpValue * d);
        viewPager.setPadding(margin, 0, margin, 0);
        viewPager.setPageMargin(margin/2);

        // FragmentAdapter에 Fragment 추가, Image 개수만큼 추가
        for (int i = 0; i < listImage.size(); i++) {
            ImageFragment imageFragment = new ImageFragment();
            Bundle bundle = new Bundle();
            bundle.putInt("imgRes", listImage.get(i));
            imageFragment.setArguments(bundle);
            fragmentAdapter.addItem(imageFragment);
        }
        fragmentAdapter.notifyDataSetChanged();
    }

    class FragmentAdapter extends FragmentPagerAdapter {

        // ViewPager에 들어갈 Fragment들을 담을 리스트
        private ArrayList<Fragment> fragments = new ArrayList<>();

        // 필수 생성자
        FragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

        // List에 Fragment를 담을 함수
        void addItem(Fragment fragment) {
            fragments.add(fragment);
        }
    }
}

- 여기까지하면 양쪽 페이지가 조금씩 보이는 미리보기 뷰페이저가 완성됩니다!

결과

- 위 이미지에서 보면 첫번째 이미지에는 오른쪽 이미지가 살짝 보이고 두번째 이미지부터는 양쪽에 이미지가 살짝씩 보이는것을 보실 수 있습니다. 밋밋하게 ViewPager만 쓰는것보다 이렇게 간단히 몇 줄 추가하는 것만으로도 깔끔한 UI가 될 수 있습니다!

오늘도 열코하세요!

* 궁금한점이 있으시면 댓글로 남겨주세요~ 최대한 빨리 답변드리도록 하겠습니다!