web-dev-qa-db-ja.com

折りたたみ時にのみCollapsingToolbarLayoutタイトルを表示

タイトルはそれをすべて言います。私はsetExpandedTitleColorとsetCollapsedTitleColor（透明との切り替え）を試してみましたが、うまくいきませんでした。私が探していることを実行するような組み込みメソッドも見当たりません。

CollapsingToolbarLayoutが完全に折りたたまれているときだけタイトルを表示したいのですが、そうでない場合は非表示にする必要があります。

何かヒントは？

androidandroid-collapsingtoolbarlayout
130
Psest328

OnOffsetChangedListenerをAppBarLayoutに追加して、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;
        }
    }
});
255
steven274

私はdlohaniの解決策を試しましたが、フェードアウトのために好きではありませんでした。この解決策では、フェージングを完全に取り除きます。

トリックは、textSizeが0.1spまたは0sp（これはSDK <19でクラッシュする）およびtextColor transparentに等しい新しいスタイルを作成することです。

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">
40
Rúben Sousa

以下のプロパティを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">
34
dlohani

もっと簡単な答えがあります。

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

ハッピーコーディング！

23
Shrini Jaiswal

このコードは私のために働きます：あなたの背景色が異なるならばcolor.parse colorを使ってください、そしてそれから白であなたのタイトルを表示しないで置き換え

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

透明なcollapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);にも使えます

17
Hardik Dudhaiya

私はフェージングテキストビューをうまく追加しました、それはとても単純でした。誰もこれを思い付かなかったとは思えない。ツールバーにテキストビューを追加し、それをappbarコールバックのverticalOffsetに基づいてアルファに設定する

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

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

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

ここでも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"

それはすべての人です！

11
Alecs

これが私の解決策です：

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>
4
Shaun

以下の解決策は完璧に機能します。

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("");
                    }
                }
            });
3
Parth Patel

これは私のために働きます。

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;
        }
    }
});
1
Aistis

私の意見では、もう少しエレガントな解決策はこのようなものです。

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"
        ...>

単に表示または非表示にするのではなく、テキストをフェードアウト/インすることもできます。

1
Blaz