CollapsingToolbarLayout başlığını yalnızca daraltıldığında göster

150

Şanssız denedim setExpandedTitleColorve setCollapsedTitleColor(şeffaftan ve şeffaftan geçiş yaptım ). Ben de aradığımı yapacak yerleşik yöntemler göremiyorum.

Başlığı yalnızca CollapsingToolbarLayout tamamen daraltıldığında göstermek istiyorum, aksi takdirde gizli olmasına ihtiyacım var.

Herhangi bir ipucu?

android  android-collapsingtoolbarlayout 
— Psest328
kaynak

Yanıtlar:

293

Ekleyebilir OnOffsetChangedListeneriçin AppBarLayoutzaman belirlemek için CollapsingToolbarLayoutgenişletilmiş veya daraltılmış ve 's başlık ayarlanır.

Java

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

Kotlin

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
    }
})
— steven274
kaynak
1
Bu çözüm api 23 ve üstü için çalışır. Bu en doğru çözümdür.
— Simon
Lütfen bunu doğru cevap olarak işaretleyin. Şu anda doğru olarak işaretlenen @ dlohani'den gelen yanıt, geçişi görebildiğiniz için metni gizlemez.
— themichaelscott
9
Benim için çalıştı, ancak etkinlik başlangıcında genişletilmiş araç çubuğundaki uygulama adını kaldırmak için "boolean isShow = false" değerini true olarak değiştirmek zorunda kaldı.
— DH28
3
@Giuseppe: aynı. API 16'da test edildi -> working
— luckyhandler
1
Bu benim için işe yaramadı, bazen günlüklerim setTitle'ın "Başlık" ile çağrıldığını açıkça belirttiğinde bile başlık hiç görünmüyor
— user1354603
47

Dlohani'nin çözümünü denedim, ancak kaybolduğu için beğenmedim. Bu çözüm ile solmayı tamamen ortadan kaldırmış olursunuz.

İşin püf noktası, textSize eşittir 0.1sp veya 0sp (bu, SDK <19'da çöküyor) ve textColor transparent ile yeni bir stil oluşturmaktır:

SDK <19 için

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

SDK> = 19 için

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

Ardından, düzeninizdeki CollapsingToolbarLayout'a uygulayın:

    <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">
— Rúben Sousa
kaynak
Tamam, her zaman olduğu gibi, bu tüm cihazlar için aynı şekilde çalışmayan başka bir çözümdür. Kitkat 0sp'de çalışıyor gibi görünüyor, ancak Jellybean'da uygulamanın çökmesine neden oluyor. 0.1sp Jellybean üzerinde çalışır ancak Kitkat'ta metni titrekleştirir :(
— Rúben Sousa
Bu api seviyesi sınırını stil üzerinde nasıl belirleyebiliriz?
— Mahm00d
SDK> = 19 için değerler-v19 klasörünü ve SDK <19 için değerler klasörünü kullanmanız gerekir. Referans için buna bir göz atın: stackoverflow.com/questions/16624317/…
— Rúben Sousa,
1
@Dlohani'den gelen çözüm işe yaramazken bu N üzerinde çalışıyor
— Tyler Pfaff
1
Sorun devam ediyor: daraltılmış araç çubuğu daraltıldığında metin yavaş yavaş solmaya devam ediyor (bu da gösterilen diğer tüm metinleri kapsayacağı anlamına geliyor).
— Richard
40

Aşağıdaki özelliği xml düzenine ekleyerek istenen efekti elde etmeyi başardım:

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

CollapsingToolbarLayout şuna benziyor

<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">
— Dlohani
kaynak
bu harika :) başlık için biraz animasyon bulmak için herhangi bir neden var mı?
— Lubos Mudrak
7
Bu korkunç, çökerken solduğunu görüyorsunuz. Aksine, son konumunda kaybolur.
— CaptRisky
1
CaptRisky'nin söylediği de aynen. Maalesef bir alternatif olduğunu sanmıyorum :-(
— kenyee
9
Bu, yalnızca android api 22 veya altını kullanıyorsanız işe yarar. 23 veya üzeri için çözüm işe yaramıyor. @ Steven274 çözümünü kullanmanız gerekecek.
— Simon
1
Denediğimde android api 23'te daha da iyi çalışıyor
— dlohani
24

Daha basit bir cevabım var:

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

Mutlu Kodlama!

— Shrini Jaiswal
kaynak
4
Bu, diğer yanıtlarda atıfta bulunulduğu gibi sorunun solmasına neden olur.
— themichaelscott
Yalnızca Araç Çubuğu başlık rengini değiştirmek istedim ve benim için çalıştımCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
— kosiara - Bartosz Kosarzycki
@Bartosz Kosarzycki, mCollapsingToolbarLayout.setExpandedTitleColor (Color.argb (255,0,0,0)) ile şanssızdım; ancak mCollapsingToolbarLayout.setExpandedTitleColor (context.getResources (). getColor (android.R.color.transparent)); işi yaptı, ancak kesinlikle sizin çözümünüzden kaynaklanıyor :)
— ShayHaned
24

Bu kod benim için çalışıyor: color.parse color kullanın çünkü arka plan renginiz farklıysa beyazla değiştirin ve başlığınız görüntülenmiyor 

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

Veya şeffaf için kullanabilirsiniz collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

— Hardik Dudhaiya
kaynak
19

Başarıyla kaybolan bir metin görünümü ekledim, araç çubuğuna bir metin görünümü ekledim ve alfa'yı appbar geri aramasındaki verticalOffset'e göre ayarladım

mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

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

            mTitleTextView.setAlpha(Math.abs(verticalOffset / (float)
                    appBarLayout.getTotalScrollRange()));
        }
    });
— Vishal
kaynak
float range = appBarLayout.getTotalScrollRange (); float alpha = Math.abs (verticalOffset / range); eğer (alfa> 0.8) {mToolbar.setAlpha (alfa); } else {mToolbar.setAlpha (.0f); }
— qinmiao
13

İşte api 23 ile de en basit ve çalışan çözüm:

app: expandedTitleTextAppearance, TextAppearance'ı devralmalıdır.

Yani, styles.xml dosyanıza şu satırları ekleyin:

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

Ardından, CollapsingToolbarLayout'unuzda bu satırı ekleyin.

app:expandedTitleTextAppearance="@style/TransparentText"

Hepsi bu kadar!

— Alecs
kaynak
5

Aşağıdaki çözüm mükemmel çalışıyor.

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("");
                    }
                }
            });
— Parth Patel
kaynak
4

İşte benim çözümüm:

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>
— Shaun
kaynak
2

Benim görüşüme göre biraz daha şık bir çözüm bunun gibi bir şey olurdu.

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

}

Ve kullanım şuna benzer

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

Metni sadece göstermek veya gizlemek yerine solma / kaybolma olasılığı da vardır.

— Blaz
kaynak
2

Bu benim için çalışıyor.

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;
        }
    }
});
— Aistis
kaynak
2

sadece şu kodu ekleyin: 

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

collapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this , android.R.color.transparent));
— AlimItTech
kaynak
0

Bu benim için çalışan kotlin sürümü: 

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
                    }
                }
            })
— Realpranav
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.