如何在Android中实现此选项卡式布局？

Question

I'm currently working on a "Sign Up" page which consists of 4 different views. Let's call them View1 , View2 , View3 and View4 .

When the user presses Sign Up, it should take him/her to View1, and then the user can only go to View2 after a button "Next" is pressed. If the user clicks View2, View3 or View4 nothing should happen - but they should be displayed so that the user knows how much progress he has made in the registration process.

Currently I have finished my View1 layout and it loads with success. How can I achieve the tabbed layout that I'm looking for? Should I have a separate class to the views to handle the tabbing or do I need to add the tabs to each individual view? I'm a big Android and Stackoverflow rookie so I apologise in advance if this is a strange request and am happy to elaborate on anything that is unclear.

Any help is highly appreciated!

Answer 1

u can use :

ViewPager
TabLayout
BaseFragmentStatePagerAdapter (pageAdapter)

ViewPager.setAdapter(pageAdapter);
TabLayout.setupWithViewPager(ViewPager)

example implementation of adapter:

/** fragment state page adapter
* is different from pageAdapter
* in way that is not loading all fragments on same time
* The first PageAdapter might destroy View hierarchy and re load it when  needed,
* the StatePageAdapter only saves the state of the Fragment and completely destroys it,
* if the user then comes back to that page, the state is retrieved.*/
public class SectionPagerAdapter extends BaseFragmentStatePagerAdapter {

     private List<CustomFragment> _fragments;

     public SectionPagerAdapter(FragmentManager fm, List<CustomFragment> fragments) {
        super(fm);
        _fragments = fragments;
    }

    /**
     *
     * @param object
     * @return POSITION_NONE;
     *
     * This way, when you call notifyDataSetChanged(),
     * the view pager will remove all views and reload them all.
     * s so the reload effect is obtained.
     */
     @Override
     public int getItemPosition(Object object) {
        /** check if object is custom fragment class */
        if (object.getClass().isAssignableFrom(CustomFragment.class)) {
           /** cast object to fragment */
           CustomFragment customFragment = (CustomFragment)object;
           return _fragments.indexOf(customFragment);
        } else {
            /** else recreate */
            return POSITION_NONE;
        }
     }

     @Override
     public CustomFragment getItem(int position) {
        return _fragments.get(position);
     }

     @Override
     public CharSequence getPageTitle(int position) {
         return getItem(position).getTittle();
     }

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

     @Override
     public Parcelable saveState() {
         return super.saveState();
     }

     /** to prevent crash on restore state 
      * - due to GOOGLE BUG (i use my own imlementation of adapter 
      * don't call super ! */
     @Override
     public void restoreState(Parcelable state, ClassLoader loader) {
         super.restoreState(state, loader);
      }
  }

*CustomFragment is abstract class extendent from Fragment class with extra methods update() & getTitle()

 /** to handle extended property in fragment*/
 public abstract class CustomFragment extends Fragment implements IGetDetails{

    public CustomFragment() {
    }

     /** method to perform fragment update */
     public abstract void update();
}

public interface IGetDetails {
    String getTittle();
}

then in main activity u create a container:

    /** create fragment container */
    if (_fragments == null) {
        _fragments = new ArrayList<>();
        _fragments.add(new Fragment1());
        _fragments.add(new Fragment2());
        _fragments.add(new Fragment3());
    }

to populate fragments u can use this metyhod:

/**
 * populate view pager
 */
private ViewPager populateViewPager(ViewPager pager, List<CustomFragment> list) {
    /** get child fragment manager of this fragment  */
    FragmentManager childFragmentManager = getChildFragmentManager();
    /** we need pass to adapter child fragment manager because of nested fragments  */
    SectionPagerAdapter sectionPagerAdapter = new SectionPagerAdapter(childFragmentManager, list);
    /** set adapter to view pager */
    pager.setAdapter(sectionPagerAdapter);
    /** testify data set changed */
    sectionPagerAdapter.notifyDataSetChanged();
    return pager;
}

** if u use Activity as host for view pager u should pass FragmentManager but if u host on fragment ( u got nested frgments )u sholud pass to adpter child fragment manager

and example layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />