java ViewPager && Fragment Study && Dots Indicator

Posted 2021-05-08

## ViewPager + Fragment Study  
  
#### viewPager  
1.viewPager >> ViewPagerActivity.java  
2.Fragment(Define a Fragment) >> ViewPagerFragment.java  
3.pagerAdapter(Setup FragmentPagerAdapter)>> ViewPagerActivity.java   
  
    <!-- activity_screen_slide.xml -->
    <android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  
*************************  
  
#### ViewPager With Dots Indicator  
  
![](https://i.stack.imgur.com/gmHJe.png)  
  
All we need are: ViewPager, TabLayout and 2 drawables for selected and default dots.  
Firstly, we have to add TabLayout to our screen layout, and connect it with ViewPager.  
  
Separate TabLayout  

    <android.support.v4.view.ViewPager
        android:id="@+id/photos_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
      
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>  
  
###### In this case, we can put TabLayout anywhere, but we have to connect TabLayout with ViewPager programmatically.  
  
    ViewPager pager = (ViewPager) view.findViewById(R.id.photos_viewpager);
    PagerAdapter adapter = new PhotosAdapter(getChildFragmentManager(), photosUrl);
    pager.setAdapter(adapter);
    
    TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(pager, true);  
  
###### Once we created our layout, we have to prepare our dots. So we create three files: selected_dot.xml, default_dot.xml and tab_selector.xml.  
  
selected_dot.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/colorAccent"/>
            </shape>    
        </item>
    </layer-list>
  
default_dot.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>
  
tab_selector.xml  

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/selected_dot"
              android:state_selected="true"/>
        <item android:drawable="@drawable/default_dot"/>
    </selector>  
  
#######Now we need to add only 3 lines of code to TabLayout in our xml layout.  
  
    app:tabBackground="@drawable/tab_selector"
    app:tabGravity="center"
    app:tabIndicatorHeight="0dp"  
  
*************************************
#### 如何理解INFLATE第三個參數<View view = inflater.inflate(R.layout.fragmentview_pager, container, false);>  
  
(http://www.cnblogs.com/yuxing/archive/2012/02/18/2357740.html)

public class ViewPagerFragment extends Fragment {

    private static final String TAG = "ViewPagerFragment";

    private static final String ARG_PAGE = "PAGE";
    private static final String ARG_IMAGE = "IMAGE";

    private int mPageNumber;
    private int resImageId = 0;

    public static ViewPagerFragment newInstance(int pageNumber, int resImageId) {
        ViewPagerFragment fragment = new ViewPagerFragment();
        Bundle args = new Bundle(1);
        args.putInt(ARG_PAGE, pageNumber);
        args.putInt(ARG_IMAGE, resImageId);
        fragment.setArguments(args);
        return fragment;
    }

    public ViewPagerFragment() {
        // Required empty public constructor
    }

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

        init();

        initHandler();

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_view_pager, container, false);

        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        TextView tvLabel = (TextView) view.findViewById(R.id.text1);
        ImageView img = (ImageView) view.findViewById(R.id.img1);

        tvLabel.setText("Page" + mPageNumber);
        img.setImageResource(resImageId);
    }

    public int getPageNumber() {
        return mPageNumber;
    }

    private void init() {
        mPageNumber = getArguments().getInt(ARG_PAGE);
        resImageId = getArguments().getInt(ARG_IMAGE);
    }

    private void initHandler() {
    }
}

public class ViewPagerActivity extends FragmentActivity {

    private static final String TAG = "ViewpagerActivity";
    //variable declaration
    private ViewPager mViewPager;

    private PagerAdapter mPagerAdapter;

    //array to store pictures
    private List<Fragment> getFragment(){
        List<Fragment> fragments = new ArrayList<Fragment>();
        fragments.add(ViewPagerFragment.newInstance(1, android.R.drawable.ic_menu_camera));
        fragments.add(ViewPagerFragment.newInstance(2, android.R.drawable.ic_menu_camera));
        fragments.add(ViewPagerFragment.newInstance(3, android.R.drawable.ic_menu_camera));
        fragments.add(ViewPagerFragment.newInstance(4, android.R.drawable.ic_menu_camera));
        fragments.add(ViewPagerFragment.newInstance(5, android.R.drawable.ic_menu_camera));

        return fragments;
    }

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

        init();

        initHandler();
    }

    private void init() {

        // Instantiate a ViewPager and a PagerAdapter.
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        List<Fragment> fragments = getFragment();

        mPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener());
    }

    private void initHandler() {

    }

//    viewPager Adapter inner class
    private static class ViewPagerAdapter extends FragmentPagerAdapter {

        private List<Fragment> fragments;

        public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragments){
            super(fm);
            this.fragments = fragments;
        }

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

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