本文将带你了解Android应用开发Android 仿支付宝城市服务栏目tab选择滑动子View效果，希望本文对大家学Android有所帮助。

一.   图示
    \
    支付宝效果
    \实现的效果
    二. 思路讲解
    TabLayout+ScrollView实现即可。每一个tab对应scrollview中包裹的一层布局，以上有4个tab，也就需要inflate   4个布局文件，用来表示每一层的样式内容。
   
    1.页面加载完毕后，记住每一层父布局在Screen中所要滑动至顶部的距离Distance；
   
    2.操作：
   
    a. 当点击tab时：滑动scrollview该层的距离Distance；
   
    b. 当滑动scrollview至对应的层时： 选定对应的tab。
   
    三. 代码
    1. 布局代码


    布局代码很简单，可能会有的疑问点有：
   
    a. wrapperFl是用来干啥的？
   
    b. ObservableScrollView又是个什么东西？
   
    （后面说明）
   
    2. 逻辑代码


 
    public class MainActivity extends AppCompatActivity implements   ObservableScrollView.ScrollViewListener {
        private static final String TAG =   MainActivity;
        private FrameLayout   wrapperFl;
        private TabLayout   tabLayout;
        private ObservableScrollView   scrollView;
        private LinearLayout   containerLl;
        private boolean   firstAlreadyInflated = true;
        private ViewGroup   firstFloorVg;
        private ViewGroup secondFloorVg;
        private ViewGroup   thirdFloorVg;
        private ViewGroup   fourthFloorVg;
        private int   secondFloorVgPositionDistance;//第二层滑动至顶部的距离
        private int   thirdFloorVgPositionDistance;
        private int   fourthFloorVgPositionDistance;
        private int currentPosition =   0;
        private boolean   tabInterceptTouchEventTag = true;//标志位，用来区分是点击了tab还是手动滑动scrollview
     
        @Override
        protected void onCreate(Bundle   savedInstanceState) {
              super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initViews();
            initListeners();
        }
     
        private void initViews() {
            wrapperFl = (FrameLayout)   findViewById(R.id.wrapperFl);
            tabLayout = (TabLayout)   findViewById(R.id.tabLayout);
            scrollView =   (ObservableScrollView) findViewById(R.id.scrollView);
            containerLl = (LinearLayout)   findViewById(R.id.containerLl);
            for (int i = 0; i < 4;   i++) {
                tabLayout.addTab(tabLayout.newTab().setText(tab   + (i + 1)));
            }
     
            firstFloorVg = (ViewGroup)   LayoutInflater.from(this).inflate(R.layout.item_floor_first, null);
            secondFloorVg = (ViewGroup)   LayoutInflater.from(this).inflate(R.layout.item_floor_second, null);
            thirdFloorVg = (ViewGroup)   LayoutInflater.from(this).inflate(R.layout.item_floor_third, null);
            fourthFloorVg = (ViewGroup)   LayoutInflater.from(this).inflate(R.layout.item_floor_fourth, null);
     
              containerLl.addView(firstFloorVg);
              containerLl.addView(secondFloorVg);
              containerLl.addView(thirdFloorVg);
              containerLl.addView(fourthFloorVg);
     
        }
     
        @Override
        public void   onWindowFocusChanged(boolean hasFocus) {
              super.onWindowFocusChanged(hasFocus);
            if (firstAlreadyInflated)   {//获取各层离screen顶部的位置以及计算滑动值相应顶部所需要的距离
                firstAlreadyInflated =   false;
                int[]   firstFloorVgPosition = new int[2];
                int[]   secondFloorVgPosition = new int[2];
                int[]   thirdFloorVgPosition = new int[2];
                int[]   fourthFloorVgPosition = new int[2];
                firstFloorVg.getLocationOnScreen(firstFloorVgPosition);
                  secondFloorVg.getLocationOnScreen(secondFloorVgPosition);
                  thirdFloorVg.getLocationOnScreen(thirdFloorVgPosition);
                  fourthFloorVg.getLocationOnScreen(fourthFloorVgPosition);
                int   firstFloorVgPositionAnchor = firstFloorVgPosition[1];
                int   secondFloorVgPositionAnchor = secondFloorVgPosition[1];
                int   thirdFloorVgPositionAnchor = thirdFloorVgPosition[1];
                int   fourthFloorVgPositionAnchor = fourthFloorVgPosition[1];
     
                Log.d(TAG, 第一层距离屏幕的距离是： +   firstFloorVgPosition[1]);
                Log.d(TAG, 第二层距离屏幕的距离是： +   secondFloorVgPosition[1]);
                Log.d(TAG, 第三层距离屏幕的距离是： +   thirdFloorVgPosition[1]);
                Log.d(TAG, 第四层距离屏幕的距离是： +   fourthFloorVgPosition[1]);
     
                  secondFloorVgPositionDistance = secondFloorVgPositionAnchor -   firstFloorVgPositionAnchor;
                  thirdFloorVgPositionDistance = thirdFloorVgPositionAnchor -   firstFloorVgPositionAnchor;
                fourthFloorVgPositionDistance   = fourthFloorVgPositionAnchor - firstFloorVgPositionAnchor;
            }
        }
     
         

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之Android频道！