android spinner 联动数据安卓联动布局

转载

clghxq 2023-07-31 16:46:54

文章标签 android开发 android ide xml 文章分类 Android 移动开发

可用于商品展示的锚点定位加联动布局

演示

这个是网上找的一个项目，修复了一些bug

自定义的ScrollView会造成他子类里面包含的recycleview加载不全
从底部滑到顶部后再次跳转回混乱
recycleview充当子类的时候占用父类的touch事件造成卡顿

使用方法

演示代码入口在CActivity里面，能看懂代码就不用看下面了

添加依赖

dependencies {
	api "com.android.support:design:${SUPPORT_VERSION}"
}

1.拷贝自定义widget/CustomScrollView
2.添加布局，在id为ll_top的LinearLayout里加头部
3.拷贝CActivity中四个方法，并在init中处理自己的数据
4.仿写一个AnchorView，在布局R.layout.view_anchor自定义自己的子模块界面

特别注意：

如果子模块中加了recycleview，一定要加这么一条代码
recyclerView.setNestedScrollingEnabled(false);

原理阐述（很简单）

1.自定义NestedScrollView

新建CustomScrollView继承NestedScrollView，通过回调讲两个方法暴露出去
onScrollChanged（滚动监听）
onInterceptTouchEvent（事件分发，监听它的原因是有时候CustomScrollView里面的子view会消费事件，导致CustomScrollView接受不到事件，所以在分发的时候传给CustomScrollView）
代码如下：

public class CustomScrollView extends NestedScrollView {

    public Callbacks mCallbacks;

    public CustomScrollView(Context context) {
        super(context);
    }

    public CustomScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setCallbacks(Callbacks callbacks) {
        this.mCallbacks = callbacks;
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mCallbacks != null) {
            mCallbacks.onScrollChanged(l, t, oldl, oldt);
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (mCallbacks != null) {
            mCallbacks.ontouch(ev);
        }
        return super.onInterceptTouchEvent(ev);
    }

    //定义接口用于回调
    public interface Callbacks {
        void onScrollChanged(int x, int y, int oldx, int oldy);
        void ontouch(MotionEvent ev);
    }

}

2.在布局中添加CustomScrollView

这个布局包含四部分：
头部LinearLayout
占位TabLayout
实际操作的TabLayout
底部内容的LinearLayout

这里最重要的就是两个tablayout，可以看一下他们在ScrollView滑动时的运动情况
在顶部时，两个tablayout叠加在一起

演示

滑到下面时，一个留着原地，一个跟着ScrollView移动位置，使自己保持在顶部

演示

具体布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/window_background"
    android:orientation="vertical">
    <cn.bittonet.wftpay.felonehelper.widget.CustomScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/ll_top"
                    android:paddingBottom="10dp"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="这里是顶部内容区域"
                        android:textSize="16sp" />

                </LinearLayout>

                <!--占位的tablayout-->
                <android.support.design.widget.TabLayout
                    android:id="@+id/tablayout_holder"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:background="#ffffff"
                    app:tabIndicatorColor="@color/colorPrimary"
                    app:tabMode="scrollable"
                    app:tabSelectedTextColor="@color/colorPrimary" />

                <LinearLayout
                    android:id="@+id/container"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    />

            </LinearLayout>


            <!--实际用户操作的tablayout-->
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout_real"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#ffffff"
                android:visibility="invisible"
                app:tabIndicatorColor="@color/colorPrimary"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/colorPrimary" />
        </FrameLayout>


    </cn.bittonet.wftpay.felonehelper.widget.CustomScrollView>

</LinearLayout>

3.处理滚动事件

根据滑动的距离改变tablayout的位置，这样就行实现了悬停的效果

scrollView.setCallbacks(new CustomScrollView.Callbacks() {
            @Override
            public void onScrollChanged(int x, int y, int oldx, int oldy) {
                //根据滑动的距离y(不断变化的) 和 holderTabLayout距离父布局顶部的距离(这个距离是固定的)对比，
                //当y < holderTabLayout.getTop()时，holderTabLayout 仍在屏幕内，realTabLayout不断移动holderTabLayout.getTop()距离，覆盖holderTabLayout
                //当y > holderTabLayout.getTop()时，holderTabLayout 移出，realTabLayout不断移动y，相对的停留在顶部，看上去是静止的
                int translation = Math.max(y, holderTabLayout.getTop());
                realTabLayout.setTranslationY(translation);

                if (isScroll) {
                    for (int i = tabTxt.length - 1; i >= 0; i--) {
                        //需要y减去顶部内容区域的高度
                        if (y - mLlTop.getMeasuredHeight() > anchorList.get(i).getTop() - 10) {
                            setScrollPos(i);
                            break;
                        }
                    }
                }

            }

完整代码如下：

public class CActivity extends AppCompatActivity {
    /**
     * 占位tablayout，用于滑动过程中去确定实际的tablayout的位置
     */
    private TabLayout        holderTabLayout;
    /**
     * 实际操作的tablayout，
     */
    private TabLayout        realTabLayout;
    private CustomScrollView scrollView;
    private LinearLayout     container;
    private LinearLayout     mLlTop;
    private String[] tabTxt = {"客厅", "卧室", "餐厅", "书房", "阳台", "儿童房"};

    private List<AnchorView> anchorList = new ArrayList<>();

    //判读是否是scrollview主动引起的滑动，true-是，false-否，由tablayout引起的
    private boolean isScroll;
    //记录上一次位置，防止在同一内容块里滑动 重复定位到tablayout
    private int lastPos = 0;
    //监听判断最后一个模块的高度，不满一屏时让最后一个模块撑满屏幕
    private ViewTreeObserver.OnGlobalLayoutListener listener;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_c);
        holderTabLayout = findViewById(R.id.tablayout_holder);
        realTabLayout = findViewById(R.id.tablayout_real);
        scrollView = findViewById(R.id.scrollView);
        container = findViewById(R.id.container);
        mLlTop = findViewById(R.id.ll_top);
        init();
    }

    private void init() {
        for (int i = 0; i < tabTxt.length; i++) {
            AnchorView anchorView = new AnchorView(this);
            anchorView.setAnchorTxt(tabTxt[i]);
            anchorView.setContentTxt(tabTxt[i]);
            anchorList.add(anchorView);
            container.addView(anchorView);
        }
        for (int i = 0; i < tabTxt.length; i++) {
            holderTabLayout.addTab(holderTabLayout.newTab().setText(tabTxt[i]));
            realTabLayout.addTab(realTabLayout.newTab().setText(tabTxt[i]));
        }


        listener = new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                //计算让最后一个view高度撑满屏幕
                int        screenH    = getScreenHeight();
                int        statusBarH = getStatusBarHeight(CActivity.this);
                int        tabH       = holderTabLayout.getHeight();
                int        lastH      = screenH - statusBarH - tabH - 16 * 3;
                AnchorView anchorView = anchorList.get(anchorList.size() - 1);
                if (anchorView.getHeight() < lastH) {
                    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                            LinearLayout.LayoutParams.MATCH_PARENT,
                            LinearLayout.LayoutParams.WRAP_CONTENT);
                    params.height = lastH;
                    anchorView.setLayoutParams(params);
                }

                //一开始让实际的tablayout 移动到 占位的tablayout处，覆盖占位的tablayout
                realTabLayout.setTranslationY(holderTabLayout.getTop());
                realTabLayout.setVisibility(View.VISIBLE);
                container.getViewTreeObserver().removeOnGlobalLayoutListener(listener);

            }
        };
        container.getViewTreeObserver().addOnGlobalLayoutListener(listener);

        //监听scrollview滑动
        scrollView.setCallbacks(new CustomScrollView.Callbacks() {
            @Override
            public void onScrollChanged(int x, int y, int oldx, int oldy) {
                //根据滑动的距离y(不断变化的) 和 holderTabLayout距离父布局顶部的距离(这个距离是固定的)对比，
                //当y < holderTabLayout.getTop()时，holderTabLayout 仍在屏幕内，realTabLayout不断移动holderTabLayout.getTop()距离，覆盖holderTabLayout
                //当y > holderTabLayout.getTop()时，holderTabLayout 移出，realTabLayout不断移动y，相对的停留在顶部，看上去是静止的
                int translation = Math.max(y, holderTabLayout.getTop());
                realTabLayout.setTranslationY(translation);

                if (isScroll) {
                    for (int i = tabTxt.length - 1; i >= 0; i--) {
                        //需要y减去顶部内容区域的高度
                        if (y - mLlTop.getMeasuredHeight() > anchorList.get(i).getTop() - 10) {
                            setScrollPos(i);
                            break;
                        }
                    }
                }

            }

            @Override
            public void ontouch(MotionEvent ev) {
                if (ev.getAction() == MotionEvent.ACTION_DOWN) {
                    isScroll = true;
                }
            }
        });

        //实际的tablayout的点击切换
        realTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                isScroll = false;
                int pos = tab.getPosition();
                Log.d("=======pos", "" + pos);
                int top = anchorList.get(pos).getTop();
                //同样这里滑动要加上顶部内容区域的高度(这里写死的高度)
                scrollView.smoothScrollTo(0, top + mLlTop.getMeasuredHeight());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                isScroll = false;
                int pos = tab.getPosition();
                int top = anchorList.get(pos).getTop();
                //同样这里滑动要加上顶部内容区域的高度
                scrollView.smoothScrollTo(0, top +mLlTop.getMeasuredHeight());
            }
        });
    }

    private void setScrollPos(int newPos) {
        if (lastPos != newPos) {
            realTabLayout.setScrollPosition(newPos, 0, true);
        }
        lastPos = newPos;
    }

    private int getScreenHeight() {
        return getResources().getDisplayMetrics().heightPixels;
    }

    public int getStatusBarHeight(Context context) {
        int result = 0;
        int resourceId = context.getResources()
                                .getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。