안드로이드 뷰페이저를 이용한 화면전환 ~ Screen switching with Android Viewpager

안드로이드 뷰페이저를 이용한 화면전환

Screen switching with Android Viewpager

뷰페이저란 뷰를 좌/우로 넘겨가며 뷰를 보여주는 클래스이다.

안드로이드에서 기본으로 지원하는 클래스는 아니지만 안드로이드에서 기본으로 라이브러리를 제공하고 있어 간단하고 사용할 수 있다.

좌/우로 넘겨가며 뷰를 보여주는 다른 방법도 있다고 들었지만 뷰페이저가 편리하다고 한다.

VIewpager is class that show a view by passing it left or right

It is not basecally support class but it is simple and usable beacuse it provides a library built into Android

I've heard that there are other ways to turn left and right and show the view, but the Viewpager is said to be convenient.

<RelativeLayout
    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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="7dp"
        android:text="Button" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/button"
        android:layout_alignParentLeft="true">

    </android.support.v4.view.ViewPager>
</RelativeLayout>

레이아웃은 간단하게 한개의 기능없는 버튼과 뷰페이저가 있다.

layout simply have one button without function and 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"
    android:background="@drawable/dahyun">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="First"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.067"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.037"
        android:textSize="40dp"/>

</android.support.constraint.ConstraintLayout>

프레그먼트를 이용해서 뷰페이저에 붙일려고 하기 때문에 프레그먼트용 레이아웃을 만든다.

이 레이아웃도 간단하게 보여줄 이미지와 그 안에 텍스트가 있다

총 3장을 보여주기 때문에 똑같은 프레그먼트를 3개 만들었다.

I'm going to attach it to the view page using a fragment, so i'm going to make a layout for the presentation

This layout also has an image to show and a text in it

I made three identical comments because i showed a total of three chapters

public class Fragment1 extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // 인플레이션
        ViewGroup rootView = (ViewGroup) inflater.inflate
                (R.layout.fragment1, container, false);

        return rootView;
    }
}

프레그먼트를 인플레이션하기 위하여 똑같이 3개를 인플레이션 했다.

Inflation of three equally so as to imflate Fregment

public class MainActivity extends AppCompatActivity {

    private ViewPager pager;

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

        // 뷰페이저 설정
        // Setting Viewpager
        pager = (ViewPager) findViewById(R.id.pager);
        // 캐싱설정 -> 3으로 설정
        // Setting cashing -> setting 3
        pager.setOffscreenPageLimit(3);

        // FragmentManager 참조
        // getSupportFragmentManager로 FragmentManager 참조
        // FragmentManager reference
        // FragmentManager reference using getSupportFragmentManager
        PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());

        // 1.어댑터에 프레그먼트 추가
        // 2.뷰페이저에 어댑터를 이용 프레그먼트 붙이기
        // 1. Fregment add in adapter
        // 2. Attach a presentation using an adapter to the Viewpager
        Fragment1 fragment1 = new Fragment1();
        adapter.addItem(fragment1);

        Fragment2 fragment2 = new Fragment2();
        adapter.addItem(fragment2);

        Fragment3 fragment3 = new Fragment3();
        adapter.addItem(fragment3);

        pager.setAdapter(adapter);
    }

    //어댑터 만들기
    class PagerAdapter extends FragmentStatePagerAdapter {

        ArrayList<Fragment> items = new ArrayList<Fragment>();

        public PagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public void addItem(Fragment item) {
            items.add(item);
        }

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

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

아답터를 만들어서 인플레이션한 프레그먼트를 이용할 수 있도록 한다.

ListView와 마찬가지로 setAdapter();을 이용하여 데이터를 뿌려주도록 한다.

Create an adaptor to make it available to the inflation

As with the list view, use setAdapter(); to scatter the data.