tablayout과scrollview의 미끄럼 연결 효과 실현

*tablayout과 scrollview의 미끄럼 연결 효과는 이번의 효과는 제목 표시줄인 tablayout의tab을 클릭하고 아래의 scrollview 레이아웃을 지정한 위치로 스크롤하고 아래의 레이아웃을 일정한 위치로 스크롤하면 tab의 텍스트 색깔이 변합니다.효과도는 다음과 같다. 여기는 시뮬레이터로 조작한 것이기 때문에 효과가 약간 느려 보인다.1. 우선 여기 제목 표시줄은 안드로이드의 원생적인 tablayout 레이아웃으로 세 개의tab 전환 효과를 실현하고 아래의 레이아웃은 간단한 Scrollview 컨트롤러로 위아래로 미끄러질 수 있는 레이아웃을 실현한다.다음은 제목 표시줄의 레이아웃 파일입니다.

    .support.design.widget.AppBarLayout
        android:id="@+id/top_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        .support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/sn_44dp"
            android:background="@color/tabColor"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:contentInsetStart="0dp">
            "match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                "@+id/ll_left_img"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent">
                    "@+id/goods_info_back"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/sn_22dp"
                        android:layout_gravity="center"
                        android:layout_weight="6.5"
                        android:src="@drawable/search_back"
                        android:layout_marginLeft="@dimen/sn_28dp"
                        android:layout_marginRight="@dimen/sn_8dp"/>
                
                .support.design.widget.TabLayout
                    android:id="@+id/goods_tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="?attr/actionBarSize"
                    app:tabSelectedTextColor="@color/mall_color"
                    app:tabTextColor="@android:color/black"
                    app:tabIndicatorColor="@android:color/transparent"
                    app:tabGravity="center"
                    android:layout_weight="2">
                .support.design.widget.TabLayout>
                "@+id/ll_right_img"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent">
                    "@+id/goods_info_msg"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/sn_22dp"
                        android:src="@drawable/more_menu"
                        android:layout_weight="6.5"
                        android:layout_gravity="center"
                        android:layout_marginLeft="@dimen/sn_8dp"
                        android:layout_marginRight="@dimen/sn_28dp"/>
                
            
        .support.v7.widget.Toolbar>
    .support.design.widget.AppBarLayout>

여기에 Tablayout은 간단한 전환 효과만 실현했을 뿐, 나는 더 이상 설명하지 않겠다. 2.아래의 레이아웃은 상품 윤방도, 상품의 상세한 상황, 상품 평가와 추천 상품 네 부분으로 구성된 다음에 한 scorllview에 싸서 레이아웃 파일은 매우 간단하지만 비교적 지루해서 저는 여기에 붙이지 않겠습니다.우선tablayout의 클릭 전환 이벤트를 처리하고ddOnTabSelectedListener 감청을 추가합니다

//tablayout    
        goodsTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int pos = tab.getPosition();
                //          TabLayout      
                tagFlag = false;
                if (pos == 0) {
                    mainNestScroll.smoothScrollTo(0, scrollGoods.getTop());
                }
                if (pos == 1) {
                    mainNestScroll.smoothScrollTo(0, scrollDetail.getTop());
                }
                if (pos == 2) {
                    mainNestScroll.smoothScrollTo(0, scrollComment.getTop());
                }
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                Log.i("tab", "onTabUnselected: " + tab.getPosition());
            }
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.i("tab", "onTabReselected: " + tab.getPosition());
            }
        });

해당하는tab 옵션을 눌렀을 때scrollview의smoothScrollTo 방법을 사용하여 레이아웃을 맨 위로 스크롤하는 효과를 실현합니다.getTop 방법은 현재 컨트롤의 맨 위 좌표를 가져옵니다.3. 위에서 Tab 옵션을 클릭하면 레이아웃의 미끄럼 효과가 나타난다. 그러면 레이아웃이 맨 위로 미끄러질 때 Tab 옵션의 전환은 어떻게 이루어져야 하는가. 만약에 현재 레이아웃이 맨 위에 있는지 판단한 다음에 Tab 옵션의 색깔을 설정하면 소용없다.현재 동작이scrollview주도인지 tablayout주도인지mainNestScroll을 통해tagFlag를 정의해야 합니다.getScrollY()는 ScrollView 슬라이딩 거리를 획득하여 ScrollView가 현재 전시하고 있는 맨 윗부분의 내용이 어느 내용 모듈에 속하는지 판단하고 구체적인 실현 코드는 다음과 같다.

 /**
     *    ScrollView    
     * false: ScrollView    
     * true: TabLayout     
     */
    private boolean tagFlag = false;
    /**
     *         ，         ，          
     */
    private int lastTagIndex = 0;
    /**
     *              ，      ，        
     * true:   
     * false ;     
     */
    private boolean content2NavigateFlagInnerLock = false;

    mainNestScroll.getViewTreeObserver().addOnScrollChangedListener(() -> {
            tagFlag = true;
            if (mainNestScroll.getScrollY() > scrollDetail.getTop()) {
                refreshContent2NavigationFlag(2);
            } else if (mainNestScroll.getScrollY() > scrollComment.getTop()) {
                refreshContent2NavigationFlag(3);
            } else if (mainNestScroll.getScrollY() > scrollGoods.getTop()) {
                refreshContent2NavigationFlag(1);
            } else {
                refreshContent2NavigationFlag(0);
            }
      });

     /**
     *     
     *
     * @param currentTagIndex       
     */
    private void refreshContent2NavigationFlag(int currentTagIndex) {
        //               ，     ，         
        if (lastTagIndex != currentTagIndex) {
            content2NavigateFlagInnerLock = false;
        }
        if (!content2NavigateFlagInnerLock) {
            //      
            content2NavigateFlagInnerLock = true;
            //     ScrollView        ，           
            if (tagFlag) {
                goodsTabLayout.setScrollPosition(currentTagIndex, 0, true);
            }
        }
        lastTagIndex = currentTagIndex;
    }

이상의scrollview와tablayout의 연결 효과 실현은 자신이 프로젝트를 할 때 겪는 작은 문제이다. 내부 자물쇠를 넣지 않고 동작 주체를 판단할 때 슬라이딩으로tab를 전환하는 효과를 실현할 수 없기 때문에 간단한 실현 기록이다.