[안드로이드] 밀어서 화면변경 뷰페이저(View Pager)

2020.11.22 - [안드로이드] - [안드로이드] Toast 메시지 띄우는 방법

[안드로이드] Toast 메시지 띄우는 방법

 

이번에 알아볼 기능은 뷰페이저입니다. 

탭을 눌러 화면을 변경해주는 것과는 달리 뷰페이저는 사용자가 화면을 옆으로 밀어주면 화면을 변경해주는 기능입니다. 

메인화면 하나와 프래그먼트 3개를 메인 엑티비티 화면에 올려놓고, 밀어주면 화면을 바꿀 수 있게 만들겠습니다.

 

1. 프래그먼트 만들기

app 선택 후 마우스오른쪽 -> New -> Fragment -> Fragment(Blank)

 

프래그먼트 이름 설정 후 Finish ( 자동으로 java파일과 xml파일 생성)

 

 

위의 방법으로 프래그먼트1, 프래그먼트2, 프래그먼트3을 만들어 줍니다.

 

화면전환이 되었는지 알아보기 위해서 프래그먼트 xml파일들에 버튼을 생성합니다.

 

fragment_1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFE400"
    tools:context=".Fragment1" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="화면1" />
</LinearLayout>

 

fragment_2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#6799FF"
    tools:context=".Fragment2" >

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="화면2" />
</LinearLayout>

 

fragment_3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFB2F5"
    tools:context=".Fragment3" >

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="화면3" />
</LinearLayout>

 

2. 메인화면에 프래그먼트 설정

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <androidx.viewpager.widget.PagerTitleStrip
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#55cedf"
            android:textColor="#FFFFFF"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"/>

    </androidx.viewpager.widget.ViewPager>
</LinearLayout>

 

MainActivity.java

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import java.util.ArrayList;


public class MainActivity extends AppCompatActivity {

    //뷰페이저 객체생성
    ViewPager pager;

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

        pager = findViewById(R.id.pager);

        //페이지 갯수지정
        pager.setOffscreenPageLimit(3);

        //어뎁터 객체생성
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());

        //뷰페이저에 프레그먼트 등록
        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 MyPagerAdapter extends FragmentStatePagerAdapter{

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

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

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

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

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

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return "페이지" + position;
        }
    }
}

 

3. 실행화면