Lập trình thu gọn hoặc mở rộng CollapsingToolbarLayout


158

Câu hỏi đơn giản, nhưng tôi không thể tìm thấy câu trả lời. Làm thế nào tôi có thể thu gọn hoặc mở rộng CollapsingToolbarLayoutchương trình?

thanh công cụ bị sập

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

thanh công cụ mở rộng


1
Tôi đã tự hỏi điều tương tự. Cũng có thể thú vị khi mở rộng thanh công cụ sang toàn màn hình khi người dùng nhấp vào bố cục được nhúng (ví dụ: hình ảnh).
Moritz

Câu trả lời:


321

Sử dụng Thư viện hỗ trợ v23, bạn có thể gọi appBarLayout.setExpanded(true/false).

Đọc thêm: AppBarLayout.setExpanded (boolean)


2
Ok, cảm ơn bạn vì tiền boa, nhưng hỗ trợ lib v23 rất có lỗi, vì vậy tôi không thể kiểm tra ngay bây giờ, vì tôi cần ở lại vào ngày 22.2.1 ....
Tomas

Bây giờ bạn đã có 23.0.1 với một số bản sửa lỗi
Mario Velasco

6
Có thể định nghĩa một hình ảnh động tùy chỉnh với libs hỗ trợ 23.1.1 không? setExpanded (boolean, true) có một hình ảnh động rất chậm ...
Nifhel

Tôi đã có một vấn đề trong đó tôi có một bố cục với một thanh công cụ đóng mở và một bộ tái chế theo nó. Khi xóa các mục từ tái chế, thanh công cụ không hoạt động phù hợp, vì vậy tôi sẽ mở rộng bố cục thanh ứng dụng và nó hoạt động đúng. Tôi đã kết thúc bằng appBarLayout.setExpanded (true, true) cho hình ảnh động.
Ray Hunter

49

Tôi sử dụng mã này để thu gọn thanh công cụ. Vẫn không thể tìm ra cách để mở rộng nó.

public void collapseToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.onNestedFling(rootLayout, appbarLayout, null, 0, 10000, true);
    }
}

Chỉnh sửa 1: Chức năng tương tự với vận tốc âmY nhưng thanh công cụ không được mở rộng 100% và sai cho tham số cuối cùng sẽ hoạt động

public void expandToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.onNestedFling(rootLayout, appbarLayout, null, 0, -10000, false);
    }
}

Chỉnh sửa 2: Mã này thực hiện thủ thuật cho tôi

public void expandToolbar(){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appbarLayout.getLayoutParams();
    behavior = (AppBarLayout.Behavior) params.getBehavior();
    if(behavior!=null) {
        behavior.setTopAndBottomOffset(0);
        behavior.onNestedPreScroll(rootLayout, appbarLayout, null, 0, 1, new int[2]);
    }
}
  • setTopAndBottom Offerset làm mở rộng thanh công cụ
  • onNestedPreScroll hiển thị nội dung bên trong thanh công cụ mở rộng

Sẽ cố gắng tự mình thực hiện Hành vi.


2
Chỉnh sửa 1 cũng sẽ làm việc nếu bạn thiết lập các tham số cuối cùng của onNestedFlingđể false.
Ricky Lee

2
params.getBehavior () đang trả về null. Trong xml, thẻ layout_behaviour được đặt trên anh chị em NestedScrollView, không phải AppBarLayout. Bạn có thể giúp tôi được không?
Người dùng31689

Cảm ơn bạn. Chỉnh sửa 1 hoạt động đúng, nếu param cuối cùng là sai. :)
Sirelon

@GobletSky Tôi gặp phải vấn đề tương tự. Tôi đã có NestedScrollView trong đoạn của mình và cố gắng gọi onNestedFling trước khi đặt đoạn đó. Sau khi thiết lập đoạn, tôi có thể gọi phương thức thành công.
usp

@usp Thật ra, vấn đề của tôi hoàn toàn khác (lỗi hơi khó hiểu). Xem điều này: stackoverflow.com/questions/31067082/
Mạnh

27

Bạn có thể xác định mức độ mở rộng hoặc thu gọn với trình hoạt hình tùy chỉnh của mình. Chỉ cần sử dụng setTopAndBottomOffset(int).

Đây là một ví dụ:

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBar.getLayoutParams();
final AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
if (behavior != null) {
    ValueAnimator valueAnimator = ValueAnimator.ofInt();
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            behavior.setTopAndBottomOffset((Integer) animation.getAnimatedValue());
            appBar.requestLayout();
        }
    });
    valueAnimator.setIntValues(0, -900);
    valueAnimator.setDuration(400);
    valueAnimator.start();
}

2
Đây là câu trả lời duy nhất thực sự cho phép bạn tạo hiệu ứng cho phần bù tùy chỉnh. Cảm ơn nhiều!
Guilherme Torres Castro

2
appBar.setExpanded (sai, đúng); (mở / đóng, hoạt hình) Bạn không cần phải viết tất cả những dòng đó
Puni

2
đến @Puni, nếu bạn muốn mở rộng / thu gọn thành phần bù "tùy chỉnh" (như thực hiện thu gọn nhiều giai đoạn), bạn sẽ cần điều này.
曾 其

Đây là giải pháp tốt nhất để tạo hiệu ứng bù cho AppBar trong trường hợp bạn không muốn viết hành vi tùy chỉnh. Một bản cập nhật cho đoạn mã là gọi valueAnimator.setIntValues ​​() với behavior.topAndBottom Offerset giá trị bắt đầu thay vì 0 để bắt đầu tạo hiệu ứng từ offset của thanh ứng dụng hiện tại.
reel

Để sử dụng một biến tùy chỉnh ( -900 )để đặt valueAnimator.setIntValuesGiải pháp beter là sử dụng- ( appBar.getTotalScrollRange() )
Ali Rezaiyan

12

Tôi đã viết một phần mở rộng nhỏ cho AppBarLayout. Nó cho phép mở rộng và thu gọn CollapsibleToolbarLayoutcả hai có và không có hình ảnh động. Nó dường như được làm điều đó hoàn toàn đúng.

Cảm thấy thật thanh thản khi từ bỏ.

Chỉ cần sử dụng nó thay vì của bạn AppBarLayoutvà bạn có thể gọi các phương thức chịu trách nhiệm mở rộng hoặc thu gọn CollapsingToolbarLayout.

Nó hoạt động chính xác như mong đợi trong dự án của tôi, nhưng bạn có thể cần phải điều chỉnh các giá trị fling / scroll trong các perform...phương thức (đặc biệt là trong performExpandingWithAnimation()) để phù hợp hoàn hảo với của bạn CollapsibleToolbarLayout.


@ssdeno vui lòng đọc Readme.md của ý chính Github. Nó không được dùng nữa từ v23 của thư viện Hỗ trợ. Kể từ phiên bản Hỗ trợ v23 (tiến tới AndroidX), có setExpandedphương thức trong AppBarLayout.
Bartek Lipinski

6

Sử dụng mAppBarLayout.setExpanded(true)để mở rộng Thanh công cụ và sử dụng mAppBarLayout.setExpanded(false)để thu gọn Thanh công cụ.

Nếu bạn muốn thay đổi chiều cao CollapsingToolbarLayout theo chương trình thì chỉ cần sử dụng mAppBarLayout.setLayoutParams(params);

Mở rộng:

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
params.height = 3*200; // HEIGHT

mAppBarLayout.setLayoutParams(params);
mAppBarLayout.setExpanded(true);

Sự sụp đổ:

CoordinatorLayout.LayoutParams params =(CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
params.height = 3*80; // HEIGHT

mAppBarLayout.setLayoutParams(params);
mAppBarLayout.setExpanded(false);

1
Điều này đã giúp tôi rất nhiều.
NoName

1
Điều này rất hữu ích. Cảm ơn bạn!
sunlover3

5

cho những người muốn làm việc với onNestedPreScroll và gặp lỗi như tôi. tôi nhận được NullPulumException trong onCreate với dòng này

    CoordinatorLayout coordinator =(CoordinatorLayout)findViewById(R.id.tab_maincontent);
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
    //below line
    params.setBehavior(new AppBarLayout.Behavior() {});

và không hoạt động đúng với điều này. nhưng tôi giải quyết vấn đề này với

trong onCreate:

        scrollToolbarOnDelay();

và ...

    public void scrollToolbarOnDelay() {
            final Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.tab_appbar);
                    CoordinatorLayout coordinator = (CoordinatorLayout) findViewById(R.id.tab_maincontent);
                    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
                    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
         if(behavior!=null)
                    behavior.onNestedPreScroll(coordinator, appBarLayout, null, 0, 100, new int[]{0, 0});
         else
            scrollToolbarOnDelay()
                }
            }, 100);


        }

1

Thử cái này...

Mở rộng

appBarLayout.setExpanded(true, true);

Để thu hồi

appBarLayout.setExpanded(false, true);

0

Điều này có thể giúp mở rộng hoặc sụp đổ:

appBarLayout.setActivated(true);
appBarLayout.setExpanded(true, true);

0

tôi đã sử dụng cái này

 private fun collapseAppbar() {
        scrollView.postDelayed(Runnable {
            scrollView?.smoothScrollTo(50, 50)
        }, 400)
    }

0

Để mở rộng / thu gọn AppBarLayout theo chương trình:

fun expandAppBarLayout(expand: Boolean, isAnimationEnabled: Boolean){
    appBarLayout.setExpanded(expand, isAnimationEnabled);
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.