android 仿城市选择,Android应用开发Android 仿支付宝城市服务栏目tab选择滑动子View效果...

本文将带你了解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频道！