折りたたまれている場合にのみCollapsingToolbarLayoutのタイトルを表示する


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 2016年

9
それは私にとってはうまくいきましたが、アクティビティの開始時に展開されたツールバーのアプリ名を削除するには、「boolean isShow = false」をtrueに変更する必要がありました。
DH28

3
@Giuseppe:それは同じです。API 16でテスト->機能
luckyhandler

1
これは私にとってはうまくいきませんでした。ログに
setTitleが

47

ドロハニの解決策を試してみましたが、フェードアウトのため、気に入らなかった。このソリューションを使用すると、フェージングを完全に削除できます。

コツは、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の作品が、:(キットカットのテキストが不安定になり
ルーベン・スーザ

スタイルにそのAPIレベルの制限を設定するにはどうすればよいですか?
Mahm00d

あなたは、参考のためにこれを見てみましょうSDK用SDKのフォルダ> = 19と値<19の値-V19のフォルダを使用する必要があります。stackoverflow.com/questions/16624317/...
ルーベン・スーザ

1
これはNで機能しますが、@ dlohaniの解決策は機能しませんでした
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が言ったことを同上。残念ながら、私には別の方法があるとは思いません:-(
kenyee

9
これは、Android API 22以下を使用している場合にのみ機能します。23以上の場合、ソリューションは機能しません。@ steven274のソリューションを使用する必要があります。
Simon

1
私が試したとき、それはandroid 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 2016年

ツールバーのタイトルの色だけを変更したかったのですが、それはmCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
kosiara-Bartosz Kosarzyckiで2016年

@Bartosz Kosarzycki、私はmCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0)); しかしmCollapsingToolbarLayout.setExpandedTitleColor(context.getResources()。getColor(android.R.color.transparent)); 仕事をしましたが、確かにあなたの解決策から派生します:)
ShayHaned

24

このコードは私にとって機能します:背景色が異なる場合は白に置き換えてタイトルが表示されないため、color.parse colorを使用してください

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

または透明に使用できます collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);


追加のリスナーは期待どおりに動作しません!
Mrityunjay Kumar

19

フェードテキストビューを正常に追加し、ツールバーにテキストビューを追加し、appbarコールバックのverticalOffsetに基づいてアルファを設定しました

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

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

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

float range = appBarLayout.getTotalScrollRange(); float alpha = Math.abs(verticalOffset / range); if(alpha> 0.8){mToolbar.setAlpha(alpha); } else {mToolbar.setAlpha(.0f); }
qinmiao 2017年

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.