축소 된 경우에만 축소 도구 모음 레이아웃 제목 표시


145

나는 운없이 시도 setExpandedTitleColor하고 setCollapsedTitleColor투명하게 전환했다. 내가 찾고있는 것을 할 수있는 내장 된 메소드를 볼 수 없습니다.

CollapsingToolbarLayout이 완전히 축소 된 경우에만 제목을 표시하고 싶습니다. 그렇지 않으면 숨겨야합니다.

힌트가 있습니까?

답변:


285

당신은 추가 할 수 있습니다 OnOffsetChangedListenerAppBarLayout시기를 결정하는 CollapsingToolbarLayout축소 또는 확대 그것의 제목을 설정한다.

자바

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isShow = true;
    int scrollRange = -1;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
            collapsingToolbarLayout.setTitle("Title");
            isShow = true;
        } else if(isShow) {
            collapsingToolbarLayout.setTitle(" ");//careful there should a space between double quote otherwise it wont work 
            isShow = false;
        }
    }
});

코 틀린

var isShow = true
var scrollRange = -1
appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { barLayout, verticalOffset ->
    if (scrollRange == -1){
        scrollRange = barLayout?.totalScrollRange!!
    }
    if (scrollRange + verticalOffset == 0){
        collapsingToolbarLayout.title = "Title Collapse"
        isShow = true
    } else if (isShow){
        collapsingToolbarLayout.title = " " //careful there should a space between double quote otherwise it wont work
        isShow = false
    }
})

1
이 솔루션은 API 23 이상에서 작동합니다. 이것이 가장 올바른 해결책입니다.
Simon

이것을 정답으로 표시하십시오. 현재 올바른 것으로 표시된 @dlohani의 답변은 텍스트가 전환되는 것을 볼 수 있으므로 텍스트를 숨기지 않습니다.
themichaelscott

9
그것은 나를 위해 일했지만 활동 시작시 확장 된 도구 모음에서 응용 프로그램 이름을 제거하려면 "boolean isShow = false"를 true로 변경해야했습니다.
DH28

3
@ 주세페 : 동일합니다. API 16에서 테스트-> 작동
luckyhandler

1
이 때로는 제목이 전혀 표시되지 않습니다, 나를 위해 일을하지 않았다하더라도 내 로그 setTitle이라는이 "제목"로 불리는 것을 명확하게 상태
user1354603

47

dlohani의 솔루션을 시도했지만 페이딩 아웃으로 인해 마음에 들지 않았습니다. 이 솔루션을 사용하면 페이딩을 완전히 제거 할 수 있습니다.

비결은 textSize가 0.1sp 또는 0sp (SDK <19에서 충돌)와 같고 textColor가 투명한 새 스타일을 만드는 것입니다.

SDK <19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0.1sp</item>
</style>

SDK> = 19

<style name="CollapsingToolbarLayoutExpandedTextStyle" parent="AppTheme">
    <item name="android:textColor">@android:color/transparent</item>
    <item name="android:textSize">0sp</item>
</style>

그런 다음 레이아웃의 CollapsingToolbarLayout에 적용하십시오.

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

항상 그렇듯이 이것은 모든 장치에서 동일하게 작동하지 않는 또 다른 솔루션입니다. Kitkat 0sp에서는 작동하는 것 같지만 Jellybean에서는 앱이 중단됩니다. 0.1sp는 Jellybean에서 작동하지만 Kitkat에서 텍스트가 흔들립니다 :(
Rúben Sousa

스타일에 대한 API 레벨 제한을 어떻게 설정할 수 있습니까?
Mahm00d

SDK> = 19의 경우 values-v19 폴더와 SDK <19의 values ​​폴더를 사용해야합니다. stackoverflow.com/questions/16624317/…
Rúben Sousa

1
@dlohani의 솔루션은 그렇지 않았지만 N에서 작동합니다.
Tyler Pfaff

1
이것이 가장 간단하고 최상의 솔루션입니다. 정말 고맙습니다.
Vikash Parajuli

38

xml 레이아웃에 다음 속성을 추가하여 원하는 효과를 얻을 수있었습니다.

app:expandedTitleTextAppearance="@android:color/transparent"

CollapsingToolbarLayout은 다음과 같습니다.

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

이것은 굉장합니다 :) 제목에 애니메이션이 나오면 어떨까요?
Lubos Mudrak

7
이것은 끔찍합니다. 붕괴로 사라지는 것을 볼 수 있습니다. 오히려 최종 위치에서 사라집니다.
CaptRisky

1
CaptRisky가 말한 것을 Ditto. 불행히도, 나는 대안이 있다고 생각하지 않습니다 :-(
kenyee

9
이것은 안드로이드 API 22 이하를 사용하는 경우에만 작동합니다. 23 이상에서는 솔루션이 작동하지 않습니다. @ steven274의 솔루션을 사용해야합니다.
Simon

1
내가 시도했을 때 안드로이드 API 23에서 더 잘 작동합니다
dlohani

24

더 간단한 답변이 있습니다.

final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);

collapsingToolbarLayout.setTitle("Your Title");
collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.transperent)); // transperent color = #00000000
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.rgb(0, 0, 0)); //Color of your title

행복한 코딩!


4
이것은 다른 답변에서 참조 된 것과 같은 문제의 페이드를 유발합니다.
themichaelscott

툴바 제목 색상 만 변경하고 싶었습니다.mCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
kosiara-Bartosz Kosarzycki

@Bartosz Kosarzycki, 나는 mCollapsingToolbarLayout.setExpandedTitleColor (Color.argb (255,0,0,0)); 하지만 mCollapsingToolbarLayout.setExpandedTitleColor (context.getResources (). getColor (android.R.color.transparent)); 일을했지만 확실히 솔루션에서 파생됩니다 :)
ShayHaned

24

이 코드는 저에게 효과적입니다. 배경색이 다른 경우 흰색으로 바꾸고 제목이 표시되지 않기 때문에 color.parse 색상을 사용하십시오

collapsingToolbarLayout.setExpandedTitleColor(Color.parseColor("#00FFFFFF"));

또는 투명하게 사용할 수 있습니다 collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);


예상대로 추가 청취자가 작동하지 않습니다!
Mrityunjay Kumar

19

페이딩 텍스트 뷰를 성공적으로 추가하고 툴바에 텍스트 뷰를 추가하고 앱바 콜백의 verticalOffset을 기반으로 알파로 설정

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
                    appBarLayout.getTotalScrollRange()));
        }
    });

부동 범위 = appBarLayout.getTotalScrollRange (); float alpha = Math.abs (세로 오프셋 / 범위); if (알파> 0.8) {mToolbar.setAlpha (알파); } else {mToolbar.setAlpha (.0f); }
qinmiao

13

api 23을 사용하는 가장 간단하고 효과적인 솔루션은 다음과 같습니다.

app : expandedTitleTextAppearance는 TextAppearance를 상속해야합니다.

따라서 styles.xml에 다음 행을 추가하십시오.

<style name="TransparentText" parent="@android:style/TextAppearance">
   <item name="android:textColor">#00000000</item>
</style>

그런 다음 CollapsingToolbarLayout에서이 행을 추가하십시오.

app:expandedTitleTextAppearance="@style/TransparentText"

그게 다야!


5

아래 솔루션은 완벽하게 작동합니다.

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                    if (Math.abs(verticalOffset)-appBarLayout.getTotalScrollRange() == 0)
                    {
                        // Collapsed
                        setTitle("Title To Show");
                    }
                    else
                    {
                        // Expanded
                        setTitle("");
                    }
                }
            });

4

내 해결책은 다음과 같습니다.

collapsingToolbar.setCollapsedTitleTextAppearance(R.style.personal_collapsed_title);
collapsingToolbar.setExpandedTitleTextAppearance(R.style.personal_expanded_title);

<style name="personal_collapsed_title">
     <item name="android:textSize">18sp</item>
     <item name="android:textColor">@color/black</item>
</style>

<style name="personal_expanded_title">
     <item name="android:textSize">0sp</item>
</style>

2

내 의견으로는 조금 더 우아한 해결책은 다음과 같습니다.

public class MyCollapsingToolbarLayout extends CollapsingToolbarLayout {

    private final int toolbarId;
    @Nullable private Toolbar toolbar;

    public MyCollapsingToolbarLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        setTitleEnabled(false);

        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.CollapsingToolbarLayout, 0,
                R.style.Widget_Design_CollapsingToolbar);

        toolbarId = a.getResourceId(android.support.design.R.styleable.CollapsingToolbarLayout_toolbarId, -1);

        a.recycle();

    }

    @Override public void setScrimsShown(boolean shown, boolean animate) {
        super.setScrimsShown(shown, animate);

        findToolbar();
        if (toolbar != null) {
            toolbar.setTitleTextColor(shown ? Color.WHITE : Color.TRANSPARENT);
        }
    }

    private void findToolbar() {
        if (toolbar == null) {
            toolbar = (Toolbar) findViewById(toolbarId);
        }
    }

}

사용법은 다음과 같습니다

<butter.droid.widget.BurtterCollapsingToolbarLayout
        app:toolbarId="@+id/toolbar"
        ...>

텍스트를 표시하거나 숨기는 대신 텍스트를 페이드 아웃 / 페이드 아웃 할 수도 있습니다.


2

이것은 나를 위해 작동합니다.

final Toolbar tool = (Toolbar)findViewById(R.id.toolbar);
CollapsingToolbarLayout c = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
AppBarLayout appbar = (AppBarLayout)findViewById(R.id.app_bar_layout);
tool.setTitle("");
setSupportActionBar(tool);
c.setTitleEnabled(false);

appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    boolean isVisible = true;
    int scrollRange = -1;
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (scrollRange == -1) {
            scrollRange = appBarLayout.getTotalScrollRange();
        }
        if (scrollRange + verticalOffset == 0) {
           tool.setTitle("Title");
            isVisible = true;
        } else if(isVisible) {
            tool.setTitle("");
            isVisible = false;
        }
    }
});

0

이것은 나를 위해 작동하는 kotlin 버전입니다.

appbar.addOnOffsetChangedListener(object : OnOffsetChangedListener {
                var isShow = true
                var scrollRange = -1
                override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
                    if (scrollRange == -1) scrollRange = appBarLayout.totalScrollRange

                    if (scrollRange + verticalOffset == 0) {
                        toolbarLayout.title = "Title"
                        isShow = true
                    } else if (isShow) {
                        toolbarLayout.title = " " //These quote " " with _ space is intended 
                        isShow = false
                    }
                }
            })

0

이 코드를 추가하십시오.

     CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collaps_main);

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.