[Android] Viewpager indicator 적용

https://puzzleleaf.tistory.com/151

위 사이트처럼 참고 + 추가 하였다.

총 세 장의 이미지로 스와이프 하면 나오도록 하였따.

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".TutorialActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/tutorial_viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp" />


</android.support.constraint.ConstraintLayout>

activity_tutorial.xml

ViewPager를 적용할 Activity의 xml

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

    <item android:drawable="@drawable/round_cell_selected"
        android:state_selected="true"/>
    <item android:drawable="@drawable/round_cell"/>
</selector>

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
</layer-list>

round_cell.xml 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</layer-list>

round_cell_selected.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">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:id="@+id/tutorial_imageview"/>
</LinearLayout>

tutorial_page.xml

pageview 내부에 나타날 xml

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

    ViewPager pager = (ViewPager)findViewById(R.id.tutorial_viewpager);

    pager.setAdapter(new BottomDotAdapter(getSupportFragmentManager()));
    pager.setCurrentItem(0);

    TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(pager, true);


}

ViewPager를 적용할 Activity

private class BottomDotAdapter extends FragmentPagerAdapter {
    public BottomDotAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {

        Bundle bundle;
        if(position<0 || MAX_PAGE<=position)
            return null;

        switch (position){
            case 0:
                bundle = new Bundle();

                bundle.putInt("R_id", TUTORIAL_FIRST_IMAGE_NUM );

                cur_fragment = new TutorialFragment();
                cur_fragment.setArguments(bundle);

                break;
            case 1:
                bundle = new Bundle();

                bundle.putInt("R_id", TUTORIAL_FIRST_IMAGE_NUM + 1 );

                cur_fragment = new TutorialFragment();
                cur_fragment.setArguments(bundle);

                break;
            case 2:

                bundle = new Bundle();

                bundle.putInt("R_id", TUTORIAL_FIRST_IMAGE_NUM + 2 );

                cur_fragment = new TutorialFragment();
                cur_fragment.setArguments(bundle);

                break;
        }
        return cur_fragment;
    }

    @Override
    public int getCount() {
        return MAX_PAGE;
    }
}

 FragmentAdapter , getItem 으로 탭마다 이미지를 구분해준다.

bundle로 fragment에 파라미터를 넘긴다.

public class TutorialFragment extends android.support.v4.app.Fragment {

    //0 - tutorial first image
    int view_id;

    public TutorialFragment(){

    }

    @Override
    public void setArguments(Bundle bundle){

        view_id = bundle.getInt("R_id");
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.tutorial_page, container, false);

        ImageView iv = (ImageView)layout.findViewById(R.id.tutorial_imageview);

        if(view_id == 0)
            iv.setImageDrawable(getResources().getDrawable( R.drawable.tutorial00) );

        else if(view_id == 1)
            iv.setImageDrawable(getResources().getDrawable( R.drawable.tutorial01) );

        else if(view_id == 2)
            iv.setImageDrawable(getResources().getDrawable( R.drawable.tutorial02) );

        return layout;
    }
}

뷰페이저에 보이는 layout 을 구분한다.