2015-08-11 14 views
7

Tôi có một hoạt động Android sử dụng CollapsingToolbarLayout bên trong CoordinatorLayout để đạt được thanh công cụ cuộn/thu gọn với hình ảnh làm phông nền/biểu ngữ.Đặt chiều cao ban đầu của hình ảnh sai trong CollapsingToolbarLayout

Hình ảnh được tải từ internet và tôi không biết kích thước của nó trước.

Tôi muốn thanh công cụ có chiều cao nhất định (160dp) ban đầu, nhưng nếu hình ảnh lớn hơn thì tôi muốn cho phép người dùng cuộn xuống hơn nữa để hiển thị phần còn lại của hình ảnh. Tuy nhiên, điều này sẽ không bao giờ xảy ra tự động. Trạng thái ban đầu có chiều cao 160dp nhưng người dùng có thể cuộn xuống để tăng chiều cao của hình ảnh.

Tôi dường như không thể tìm thấy sự kết hợp chính xác của chiều cao/minheight để đạt được điều này. Điều này thậm chí có thể ở tất cả?

Dưới đây là cách bố trí của tôi:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    android:background="@color/toolbar_text"> 

    <android.support.design.widget.CoordinatorLayout 
      android:id="@+id/coordinatorLayout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true"> 

     <android.support.design.widget.AppBarLayout 
       android:id="@+id/appBarLayout" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:fitsSystemWindows="true"> 

      <android.support.design.widget.CollapsingToolbarLayout 
        android:id="@+id/collapsing_toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        app:layout_scrollFlags="scroll|exitUntilCollapsed" 
        app:contentScrim="?attr/colorPrimary" 
        android:fitsSystemWindows="true"> 

       <!-- The background banner --> 
       <ImageView 
         android:id="@+id/imgBanner" 
         android:layout_width="match_parent" 
         android:layout_height="160dp" 
         android:scaleType="centerCrop" 
         android:fitsSystemWindows="true" 
         app:layout_collapseMode="parallax"/> 

       <android.support.v7.widget.Toolbar 
         android:id="@+id/toolbar" 
         android:layout_width="match_parent" 
         android:layout_height="?attr/actionBarSize" 
         app:layout_collapseMode="pin" 
         app:theme="@style/AppToolbarTheme" /> 

      </android.support.design.widget.CollapsingToolbarLayout> 

     </android.support.design.widget.AppBarLayout> 

     <android.support.v4.widget.NestedScrollView 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_gravity="fill_vertical" 
       android:clipToPadding="false" 
       app:layout_behavior="@string/appbar_scrolling_view_behavior" > 

       ... 
     </android.support.v4.widget.NestedScrollView> 

    </android.support.design.widget.CoordinatorLayout> 

</LinearLayout> 

Chiều cao của hình ảnh biểu ngữ được thiết lập để 160dp kiểm soát như thế nào lớn thanh công cụ là bước đầu, nhưng rõ ràng cách này, tôi không thể mở rộng nó vượt ra ngoài 160dp bởi vì đó là chiều cao của chế độ xem.

Tôi đã thử đặt chiều cao 160dp thành CollapsingToolbarLayout hoặc AppBarLayout nhưng không có gì giúp, chiều cao luôn tối đa 160dp và tôi chỉ có thể cuộn lên (hình ảnh nhỏ hơn) và không xuống, ngay cả khi hình ảnh lớn hơn nhiều và ImageView được đặt thành tỷ lệ là wrap_content.

Dưới đây là một bản vẽ của những gì tôi muốn đạt được trong trường hợp nó không phải là rõ ràng: Mockup of what I want

+0

Tôi đang cố gắng có chính xác điều tương tự. Bạn đã quản lý để làm việc này? –

Trả lời

4

Dưới đây là một cách hacky để thực hiện điều này, tôi không chắc chắn về một cách tốt hơn nhưng rất thích nghe nó . Kiểm tra ControllableAppBarLayout

Nơi mã trong dự án của bạn và thay thế:

android.support.design.widget.AppBarLayout 

Với:

ControllableAppBarLayout 

Đặt android: layout_height của ControllableAppBarLayout là kích thước tối đa của thanh công cụ của bạn, ví dụ: kích thước bạn muốn trong ảnh "cuộn xuống dưới" của bạn.

Sau đó, trong mã của bạn trong phương thức onCreate(), bạn có thể nhận được quyền truy cập vào các ControllableAppBarLayout:

appBarLayout = (ControllableAppBarLayout) findViewById(R.id.appBarLayout); 
appBarLayout.collapseToolbar(); 

appBarLayout.collapseToolbar() sẽ hoàn toàn đóng thanh công cụ. Tuy nhiên, bạn có thể sửa đổi phương pháp này trong ControllableAppBarLayout:

private void performCollapsingWithoutAnimation() { 
    if (mParent.get() != null) { 
     mBehavior.onNestedPreScroll(mParent.get(), this, null, 0, getHeight(), new int[]{0, 0}); 
    } 
} 

cụ thể, thay đổi getHeight() để số trong dp đại diện cho phần chênh lệch giữa chiều cao tối đa của hình ảnh trên thanh công cụ và chiều cao bạn muốn ban đầu hiển thị. Đó là, sự khác biệt giữa "trạng thái ban đầu" và "di chuyển xuống dưới" như bạn đã trình bày ở trên.

Bản hack này sẽ thực hiện được những gì bạn muốn.

+0

Tốt, hoạt động tốt và không tìm thấy bất kỳ tác dụng phụ nào. Cảm ơn! –

+0

Tôi rất vui khi nghe nó hoạt động, điều đó thật tuyệt. Không có gì. – Ethan

+1

Có lẽ một vấn đề mặc dù: có cách nào để đảm bảo chiều cao 'mở rộng hoàn toàn' không bao giờ vượt quá không gian màn hình có sẵn trên thiết bị không? Ví dụ: nếu tôi đặt chiều cao là 420dp, trên thiết bị của tôi, tôi vẫn còn một khoảng trống ở dưới cùng. Nhưng nếu ai đó có một thiết bị ngắn hơn nhiều, họ có thể cuộn nội dung tất cả các cách tắt màn hình (hình ảnh chiếm toàn bộ màn hình) và sau đó họ không thể cuộn lại lên nữa. Điều tương tự khi bạn chuyển thiết bị sang chế độ ngang. Tôi đã thử áp dụng một lề dưới để ControllableAppBarLayout nhưng điều đó dường như không làm bất cứ điều gì. –

Các vấn đề liên quan