แสดง CollapsingToolbarLayout หัวเรื่องเฉพาะเมื่อยุบ


145

ฉันได้ลองsetExpandedTitleColorและsetCollapsedTitleColor(เปลี่ยนไปใช้และจากแบบโปร่งใส) โดยไม่มีโชค ฉันไม่เห็นวิธีการในตัวที่จะทำสิ่งที่ฉันกำลังมองหา

ฉันแค่ต้องการแสดงชื่อเมื่อ CollapsingToolbarLayout ถูกยุบอย่างสมบูรณ์มิฉะนั้นฉันต้องการมันซ่อน

คำใบ้ใด ๆ

คำตอบ:


285

คุณสามารถเพิ่ม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;
        }
    }
});

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

1
วิธีนี้ใช้ได้ผลกับ api 23 ขึ้นไป นี่คือทางออกที่ถูกต้องที่สุด
Simon

โปรดทำเครื่องหมายว่านี่เป็นคำตอบที่ถูกต้อง คำตอบจาก @dlohani ที่ถูกทำเครื่องหมายว่าถูกต้องไม่ได้ซ่อนข้อความเพราะคุณสามารถเห็นการเปลี่ยนแปลง
themichaelscott

9
มันใช้งานได้สำหรับฉัน แต่ต้องเปลี่ยน "boolean isShow = false" เป็นจริงเพื่อลบชื่อแอปในแถบเครื่องมือที่ขยายออกเมื่อเริ่มต้นกิจกรรม
DH28

3
@Giuseppe: มันเหมือนกัน ทดสอบกับ 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

คุณต้องใช้โฟลเดอร์ values-v19 สำหรับ SDK> = 19 และโฟลเดอร์ค่าสำหรับ SDK <19 ดูที่นี่เพื่อการอ้างอิง: stackoverflow.com/questions/16624317/ …
Rúben Sousa

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

Happy Coding!


4
สิ่งนี้ทำให้ปัญหาจางหายไปตามที่อ้างอิงในคำตอบอื่น ๆ
themichaelscott

ฉันแค่ต้องการเปลี่ยนสีของชื่อแถบเครื่องมือและมันใช้ได้กับฉันด้วยmCollapsingToolbarLayout.setExpandedTitleColor(Color.argb(255,0,0,0))
kosiara - Bartosz Kosarzycki

@Bartosz Kosarzycki ฉันโชคไม่ดีที่มี mCollapsingToolbarLayout.set ขยายแล้ว TititColor (Color.argb (255,0,0,0)); แต่ mCollapsingToolbarLayout.set ExpandedTitleColor (context.getResources (). getColor (android.R.color.transparent)); ได้งาน แต่แน่นอนที่เกิดขึ้นจากการแก้ปัญหาของคุณ :)
ShayHaned

24

รหัสนี้ใช้ได้กับฉัน: ใช้สี color.parse เพราะหากสีพื้นหลังของคุณแตกต่างจากนั้นให้แทนที่ด้วยสีขาวและชื่อของคุณจะไม่แสดง

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

หรือคุณสามารถใช้เพื่อความโปร่งใส collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);


ไม่มีผู้ฟังพิเศษทำงานตามที่คาดไว้!
Mrityunjay Kumar

19

ฉันเพิ่มมุมมองข้อความที่ซีดจางเรียบร้อยแล้วเพียงเพิ่มมุมมองข้อความในแถบเครื่องมือและการตั้งค่าเป็นอัลฟาโดยยึดตามแนวตั้งออฟเซ็ตในการโทรกลับของแถบแอป

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 (verticalOffset / range); if (alpha> 0.8) {mToolbar.setAlpha (alpha); } else {mToolbar.setAlpha (.0f); }
qinmiao

13

นี่คือทางออกที่ง่ายที่สุดและใช้งานได้กับ api 23:

แอพ: expandTitleTextAppearance จะต้องสืบทอด 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.