shihyingru
3/13/2017 - 9:33 AM

ViewPager && Fragment Study && Dots Indicator

ViewPager + Fragment Study Dots Indicator

new_gist_file.md
content_copyfile_download
  • Rendered
  • Source

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

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)

ViewPagerFragment.java
content_copyfile_download
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() {
    }
}
ViewPagerActivity.java
content_copyfile_download
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();
        }
    }
}