2

ScrollView 스크롤 위치에 따라 CoordinatorLayout 클래스를 사용하여 Toolbar 불투명도를 적용하려고합니다. 나는 두 개의 뷰를 "수동으로 연결"하면서, 스크롤 이벤트 인 ScrollView을 듣고 내 Toolbar 알파 값으로보고합니다.CoordinatorLayout으로 스크롤 할 때 툴바 배경 알파 값 변경

원하는 동작은 다음과 같습니다 툴바는 투명 상태 (텍스트와 배경 모두)에서 시작하고 끝입니다

완전히 흰색 배경검정 텍스트 하나의보기는 완전히 스크롤 .

대략적인 동작은 Youtube video입니다.

현재 구현

레이아웃 파일 (간체)

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:fitsSystemWindows="true"> 

    <ScrollView 
     android:id="@+id/scrollView" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

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

      <my.package.widgets.DetailsTop 
       android:id="@+id/layout_details_top" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 

      <my.package.widgets.DetailsBottom 
       android:id="@+id/layout_details_bottom" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 
     </LinearLayout> 
    </ScrollView> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#00FFFFFF"/> 
</RelativeLayout> 

조각 구현

public class SearchVehicleDetailsFragment extends BaseFragment<SearchContract.ParentView> { 

    @Bind(R.id.layout_details_top) DetailsTop detailsTopLayout; 
    @Bind(R.id.layout_details_bottom) DetailsBottom detailsBottomLayout; 
    @Bind(R.id.scrollView) ScrollView scrollView; 
    @Bind(R.id.toolbar) Toolbar toolbar; 

    @Override 
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { 
     super.onViewCreated(view, savedInstanceState); 

     scrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() { 
      @Override 
      public void onScrollChanged() { 
       float alpha = (float) scrollView.getScrollY()/vehicleDetailsTopLayout.getHeight(); 
       toolbar.setBackgroundColor(getColorWithAlpha(alpha, getResources().getColor(R.color.white))); 
       toolbar.setTitleTextColor(getColorWithAlpha(alpha, getResources().getColor(R.color.dark_grey))); 
      } 
     }); 
    } 

    public static int getColorWithAlpha(float alpha, int baseColor) { 
     int a = Math.min(255, Math.max(0, (int) (alpha * 255))) << 24; 
     int rgb = 0x00ffffff & baseColor; 
     return a + rgb; 
    } 
} 

문제

그러나 이전 스 니펫이 완벽하게 작동하는 특히 간단한 솔루션 인 경우에도 나는 왜 이것이 CoordinatorLayout과 함께 작동하지 않는지에 대해 약간 혼란스러워합니다. 또한, 사용자 정의 CoordinatorLayout.Behavior<android.support.v7.widget.Toolbar> 구현으로이 작업에 성공한 것으로 보이는 사람을 발견했습니다.

그의 custom CoordinatorLayout.Behavior implementation을 살펴볼 수 있습니다. 그는 또한 Medium에 대한 세부 정보를 제공합니다. 그러나 대신 전체 Toolbar 태그와 지원 설계 라이브러리 작업의 방법이 부분에 대한 이해의 강한 부족의 단지 <android.support.v7.widget.Toolbar .../>의 많은 때문에, 나는 ... 그것을 구현할 수 없었어

질문

CoordinatorLayout 및 그 주변의 모든 클래스가 어떻게 작동하는지 알고 싶습니다. 그래서 아마도 내가 찾고있는 동작을 구현할 수있을 것입니다. ScrollView 스크롤 위치를 툴바 배경색의 알파 값에 연결합니다. 당신은 또한이 모든 것을 구현하는 방법을 알고 있다면 분명히

, 나는 행동을 실험했습니다 당신의 조각 :

+0

멋진 컨셉으로 보입니다. –

+1

코디네이터 레이아웃에 대한 자세한 설명을 보려면이 부분을 확인하십시오. https://medium.com/google-developers/intercepting-everything-with-coordinatorlayout-behaviors-8c6adc140c26#.nvsysrem6 –

답변

0

를보고 정말 행복 할 것이다, 나는 당신이 나의 기사가 부분적으로 도움이되었다고 기쁘게 생각합니다.

나는 중요하지 않았기 때문에 Toolbar 청크의 코드를 다시 작성했습니다.간단한 Toolbar 속성, 그것에 대해 특별한 아무것도 : CoordinatorLayout, 모든 클래스 주위 가 함께 작동하는 방법 내가 좋아하는 것

<android.support.v7.widget.Toolbar 
    android:layout_height="?attr/actionBarSize" 
    android:layout_width="match_parent" 
    android:id="@+id/toolbar" 
    app:layout_behavior=".view.ToolbarBackgroundAlphaBehavior"/> 

이해합니다. 그래서 아마 동작을 구현할 수 있습니다. ScrollView 스크롤 위치를 도구 모음 배경색의 알파 값에 연결합니다.

레이아웃에서 CoordinatorLayout은 모든 것을 래핑하는 상위 상위 항목으로 놓치고 있습니다. 대신 당신이 그냥 ScrollView처럼 작동하지만 차이가 NestedScrollView대상을 작업 할 CoordinatorLayout.Behavior에만 API (23)

후 스크롤을 중첩하는 ScrollView는 달리, 이전 버전에서 중첩 된 스크롤을 수행 할 수 있다는 것입니다 NestedScrollView를 사용해야합니다 ScrollView를 사용하는 보기는 CoordinatorLayout의 직계 하위 항목이어야합니다. 기사에서 볼 수 있듯이 Toolbar은 코디네이터 직속입니다. 그렇지 않으면 동작이 작동하지 않습니다.

예에서 NestedScrollView은 앱바 레이아웃 동작을 사용하므로 AppBarLayout이 확장되거나 축소 될 수 있습니다. 이에 대한 예제는 많이 있습니다.

+0

이 질문을보십시오. https://stackoverflow.com/questions/45460263/toolbaralphascrollbehavior-coordinatorlayout –