안드로이드 스튜디오 슬라이드 뷰 만들기 [java][자바] 스와이프, 페이지뷰

안녕하세요~

요즘 앱 만들때 필수 기능인 슬라이드 뷰 를 만드는 방법을 알려드릴게요~

저도 책보고 구글봐서 이해한거라 여러번보시고 코드 분석 해보세요~ 최대한 쉽게 이해할 수 있게 알려드릴게요!

 

자~ 일단 슬라이드 뷰는 fragment, fragmentActivity 를 포함한 클래스로 이뤄져요~

 

저같은 경우는 4개의 클래스를 만들었습니다.

1. 슬라이드 뷰 틀 전체를 담을 클래스

public class ShowStoreAd extends FragmentActivity { //슬라이드 뷰 전체를 담는 뷰

    private FragmentManager fragmentManager; //안드로이드 제공 함수
    private SlideViewFlagment slideViewFlagment; //2번 클래스
    private FragmentTransaction fragmentTransaction; //안드로이드 제공 함수

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.slidepage);  //전체를 담는 뷰 
     

        Log.d(TAG,"슬라이드"); //여기 부분은 fragmentactivity를 담을때 쓰는 전형적인 코드 형식입니다.
        fragmentManager = getSupportFragmentManager();
        slideViewFlagment = new SlideViewFlagment();
        fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.slidehome, slideViewFlagment).commitAllowingStateLoss();
        // 이부분은 두번째 클래스와 같이 보세요. 그럼이해 될거에요.
        Log.d(TAG,"슬라이드");
      

    }


}

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

    <LinearLayout
        android:id="@+id/slidehome"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"></LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

2. 내용물을 슬라이드를 해 줄 수 있게 해주는 틀 클래스

public class SlideViewFlagment extends Fragment {

    // When requested, this adapter returns a DemoObjectFragment,
    // representing an object in the collection.
    DemoCollectionPagerAdapter demoCollectionPagerAdapter; //연결해주는 어뎁터 선언(4번클래스)
    ViewPager viewPager; //어뎁터를 보여줄 androidx에서 제공되는 페이지뷰(슬라이드 뷰)

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.storead, container, false);
    } //androidx에서 제공되는 슬라이드 가능 레이아웃 이에요. 밑에  xml 코드 보시고 고대로쓰면 됄거에요.

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());
        viewPager = view.findViewById(R.id.pager);
       viewPager.setAdapter(demoCollectionPagerAdapter);
       
       
       //위에 버튼 만들어주는부분. 슬라이드 말고 버튼으로도 화면이동 가능하게요.
       //xml보면 있어요~ 같이보고 필요할떄 사용하세요~
       TabLayout tabLayout = view.findViewById(R.id.tab_layout); 
        tabLayout.setupWithViewPager(viewPager); //페이지와 함께 보여준다.. 이런뜻같아요.
   }

}

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


    <androidx.viewpager.widget.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </androidx.viewpager.widget.ViewPager>




</androidx.constraintlayout.widget.ConstraintLayout>

3. 2번 슬라이드 뷰 전체 안에 들어갈 내용물을 담을 클래스

public class DemoObjectFragment extends Fragment {//이쁘게 꾸민 내용물.
    public static final String ARG_OBJECT = "object";

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.slidepages, container, false);
    }//fragment개념 모르시는 분은 이부분은 그냥 따라 쓰세요. R.layout.본인레레아웃.



// 결국 이부분을 넘길때 보이는 뷰를 이곳에 꾸미면 돼요.보시다 시피 틀 자체나, 레이아웃같은건 기본적으로
//바꿀수 없게 되잇는 구조지만, Bundle 데이터 주고받으면서 if문으로 어느정도 틀을 다르게 해서 볼 수 있을거같아같아요.
// 예를들어 Bundle에서 1값을 받으면 사과사진, 2값을 받으면 바나나나 사진, 3값을 받으면 사진없애고 버튼 나오게하거나 등등
// 응용해서 만드세요~
    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        Bundle args = getArguments(); //4번 클래스에서 주는 Bundle정보를 받는 변수
        view.findViewById(R.id.adimage);

    }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/adimage"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="fitXY"
                    android:src="@drawable/applelogo" />
            </LinearLayout>
        </ScrollView>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

4. 2번, 3번을 링크 해줘서 하나의 3번 클래스의 내용을 바꾸어 넘길때 마다 다른 내용의 뷰가 보이게 해주는 클래스

사실 제일 중요한 부분이죠. 이거 이해하면 슬라이드 뷰는 끝.

public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
                                              //그리드뷰 어뎁터처럼 플레그맨트 어뎁터 있는거에요.
                                              //넘겨야 되니까 순서나 이런거 링킹해주는거죠.
    public DemoCollectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }


//자동으로 적용되는 인덱스 같은 함수입니다. 어디 쓰였는지 찾지 마세여 
//틀 만 따고 내용은 바꾸면서 이용하세요.
//맨처음 화면 i = 0, 넘길수록 +1 씩 i값이 늘어난다고 보심 돼요.
    @Override
    public Fragment getItem(int i) { 
        Fragment fragment = new DemoObjectFragment();//3번 클래스로 초기화 해줍니다.
        Bundle args = new Bundle();// Bundle은 다른 클래스에 데이터를 넘겨줄때도 사용됩니다. 지금처럼
        // Our object is just an integer :-P
        args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);
        //단순히 페이지 숫자 보여주려고 i+1 데이터를 3번 클래스의 ARG_OBJECT변수에 있는 "object"를 키값으로 하고 전송하는 거에요.)
        //저 args.putInt 가 int 데이터를 키값과 함께 어딘가로 보내는 기능이 있어요.
        
        fragment.setArguments(args);//fragment변수에 해당하는 fragment클래스에 args데이터 들을 보내는거죠.
        return fragment;
    }


// 페이지 개수를 정해요. 3번 클래스의 내용물 개수라고 보시면 되구요. 넘길 수 있는 슬리이드 개수죠.
//자동 적용되니 그냥 return에 원하는 슬라이드 개수 적으면 돼요.
    @Override
    public int getCount() { 
        return 4;
    }

    @Override
    public CharSequence getPageTitle(int position) {
    //이건 아까 1번째 클래스에서 위에 버튼에 표시될 글이에요.
    //그냥 틀 그대로 쓰면돼요. 안드로이드에서 제공되는 부분이에요. 자동으로 적용이 되서 선언되는 부분으 없습니다.
        return "가게 정보 " + (position + 1);
    }
}

 

클래스가 4개다 보니 초보 개발자 분들은 뭔가 머리 아플꺼 같은 느낌이 벌써부터 들죠~?

제가 최대한 쉽게 설명 드릴게요.!!!!

주석도 보면서 이해해보세요~

 

여러번 읽어보셨나요~? 

전체적인 부분은 

1번 클래스는 벽 , 2번 클래스는 액자, 3번 클래스는 사진, 4번클래스는 사진 바꿔달라고 말하면 사진 바꿔껴주는 사람

이라고 생각하시면 됩니다. ㅋㅋ 질문을 댓글을 달아주세요~