The Tab page at the bottom of Android is implemented based on ViewPager

The Tab page at the bottom of Android is implemented based on ViewPager

Among many mainstream apps, including QQ, and so on, many apps use the bottom navigation to stay consistent with the ios UI. Of course, this design is not opposed in Android. This article uses ViewPager to achieve this effect. First, let's look at the implementation. Contains the nesting of ViewPager.

Before discussing implementation, let's first recall how we implemented it.

In the previous implementation method, we can't layout it first, and then write the logic. In the layout, there are tabs with a certain height at the bottom, usually four or five tabs, but also three tabs, depending on the application. The top of the Tab is a FrameLayout, used as a fragment container. When processing the corresponding Click Event Logic in the Activity, you need to control the display and hiding of Fragment by yourself. Sometimes poor control may even cause inexplicable problems.

Is there a simple way to avoid writing the Fragment switching logic by ourselves? Actually, ViewPager is the control. Someone asked at this time, generally, in the navigation content area at the bottom, click to switch, and do not slide switching (except). ViewPager will slide switching. How can this problem be solved. The answer is to override ViewPager and provide a Boolean variable to control whether sliding switching is supported. Through this variable, the onTouchEvent and onInterceptTouchEvent functions of the corresponding event are overwritten. If this variable is set to true, that is, sliding switching is supported, that is, the default behavior of ViewPager. We use the parent class method for processing. If it is false, if we do not process or intercept it, return false. In this way, the code of our ViewPager subclass becomes like this.

public class CustomViewPager extends ViewPager {    private boolean isCanScroll = false;    public CustomViewPager(Context context) {        super(context);    }    public CustomViewPager(Context context, AttributeSet attrs) {        super(context, attrs);    }    public boolean isCanScroll() {        return isCanScroll;    }    public void setCanScroll(boolean isCanScroll) {        this.isCanScroll = isCanScroll;    }    @Override    public boolean onTouchEvent(MotionEvent ev) {        if (isCanScroll) {            return super.onTouchEvent(ev);        } else {            return false;        }    }    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        if (isCanScroll) {            return super.onInterceptTouchEvent(ev);        } else {            return false;        }    }}

Use our own ViewPager instead of the default ViewPager for layout, as shown below:

Then we can simply layout the Tab at the bottom.

The above two layout_weight attribute controls the height of the content area.

Then click the Tab button to make it effective. compile our Selector as the background of the button. Here we select two colors, which are replaced by the corresponding image in actual development.

Finally, let's take a look at our simple logic processing and set the listener for the RadioGroup. After clicking this Button, we can determine which Button is used to display ViewPager as the corresponding page and use the setCurrentItem function, if the second parameter is set to false, the animation is not switched.

public class MainActivity extends AppCompatActivity{    private CustomViewPager mViewPager;    private RadioGroup mRadioGroup;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();    }    private void initView() {        mViewPager= (CustomViewPager) findViewById(R.id.viewpager);        mRadioGroup= (RadioGroup) findViewById(R.id.radio);        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public Fragment getItem(int i) {                return BaseFragment.newInstance(i);            }            @Override            public int getCount() {                return 4;            }        });        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {                switch (checkedId) {                    case R.id.tab1:                        mViewPager.setCurrentItem(0, false);                        break;                    case R.id.tab2:                        mViewPager.setCurrentItem(1, false);                        break;                    case R.id.tab3:                        mViewPager.setCurrentItem(2, false);                        break;                    case R.id.tab4:                        mViewPager.setCurrentItem(3, false);                        break;                }            }        });    }}

The simple Tab implementation is made of wood. Sometimes the system has some components. If the functions we need are similar to those we need, we can transform them and use them directly. There is no need to repeat the wheel.