Android - ViewPager 사용하기 (+CircleIndicator)

 

 

ViewPager

본 예제에서는 Fragment와 Adapter를 이용한 ViewPager 화면을 만들어보고 고정적인 버튼과 CircleIndicator를 구성해보도록 하겠습니다.

 

 

activity_main

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

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

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/selector_indicator"
        >
    </androidx.viewpager.widget.ViewPager>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="390pt"
        />
    <Button
        android:id="@+id/btnStartLinkB"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/black_button"
        android:text="바로 시작하기"
        android:textColor="#FFFFFF"
        ></Button>
    </LinearLayout>


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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="366pt"
            />

    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/indicator"
        app:ci_drawable="@drawable/black_indicator"
        app:ci_width="5pt"
        app:ci_height="5pt"
        android:layout_width="match_parent"
        android:layout_height="48dp" />

    </LinearLayout>

</FrameLayout>

 

FrameLayout을 사용하는 이유는 뷰페이저안에 요소들과 겹쳐 있는 움직이지 않는 고정 CircleIndicator와 버튼등을 구성하기 위함입니다. FrameLayout안에 여러개의 레이아웃을 넣고 빈 레이아웃을 이용해 요소들이 생성될 위치를 지정하면 됩니다. 버튼과 Indicator는 ShapeDrawble을 이용할 것이고 뷰페이저도 Indicator 구분을 위해 사용해야 합니다.

 

activity_main_frag1~3

<?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"
    android:background="@drawable/img_main_1">
    
</LinearLayout>

fragment를 원하는 만큼 생성하고  레이아웃을 작성합니다. 저는 세개만 작성하고 이미지만 하나씩 배경으로 지정했습니다.

 

Resource

먼저 뷰페이저에서 사용할 indicator에서 선택된 원과 그렇지 않은 원으로 어떤 스타일을 사용할 것인지 프로그램에게 가르쳐주기위한 리소스를 하나 작성합니다. drawble폴더에 xml형식으로 작성하시면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/black_indicator"
        android:state_selected="true"/>
    <item android:drawable="@drawable/gray_indicator"/>
</selector>

이름은 selector_indicator.xml으로 했습니다. 선택 된 원은 black_indicator으로, 그렇지 않은 원은 gray_indicator으로 작성하겠습니다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#333333"/>
    <size
        android:height="5pt"
        android:width="5pt"/>
</shape>

black_indicator.xml

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#EAEAEA"/>
    <size
        android:height="5pt"
        android:width="5pt"/>
</shape>

gray_indicator.xml

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#333333"/>
</shape>

black_button.xml 기본 버튼은 여백이 많고 못생겼으니 작성하는 김에 버튼이 사용할 리소스도 하나 만들었습니다. 위에서 작성한 원들과 다르게 버튼은 사각형이니 shape는 "rectangle"이 됩니다.

 

SectionPageAdapter.java

 

public class SectionPageAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public void addFragment(Fragment fragment, String title){
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
    public SectionPageAdapter(FragmentManager fm){
        super(fm);
    }
    @Override
    public Fragment getItem(int position) { return mFragmentList.get(position); }

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


}

뷰페이저의 프래그먼트들과 연결해서 위 클래스가 프래그먼트들을 하나씩 돌리면서 사용하게 됩니다. FragmentPagerAdapter를 상속받아야 합니다.

 

MainActivity.java

 

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    SectionPageAdapter adapter = new SectionPageAdapter(getSupportFragmentManager());
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Intent intent = new Intent(this, LoadingActivity.class);
        startActivity(intent);
        mViewPager = (ViewPager) findViewById(R.id.container);
        setupViewPager(mViewPager);
        CircleIndicator indicator = (CircleIndicator) findViewById(R.id.indicator);
        indicator.setViewPager(mViewPager);


        Button btnStartLinkB = (Button)findViewById(R.id.btnStartLinkB);

        btnStartLinkB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(getApplicationContext(),login.class);
                startActivity(intent);
            }
        });


    }
    public void setupViewPager(ViewPager viewPager) {
        adapter.addFragment(new MainActivityFrag1(), "1");
        adapter.addFragment(new MainActivityFrag2(), "2");
        adapter.addFragment(new MainActivityFrag3(), "3");
        viewPager.setAdapter(adapter);
    }
}

메인 액티비티는 위와 같이 작성하고 버튼을 클릭하면 다음 화면으로 넘어가게 설계했습니다. 뷰페이저는 Indicator와 연결 하고 setupViewPager메서드는 어댑터와 프래그먼트들을 연결하기 위한 메서드고 프래그먼트가 많다면 addFragment로 추가해서 사용하시면 됩니다.

 

결과물

 

 

 

잘 구성이 됬네요. FrameLayout 안에 뷰페이저, Button, Indicator가 있고 뷰페이저는 어댑터 하나에 프래그먼트 세개를 연결해서 화면을 구성합니다. 위 예제를 이용해서 Indicator나 버튼의 디자인, 프래그먼트의 구성요소 등 다양한 시도를 할 수 있을 것으로 생각됩니다.