Question

我的CollapsingToolbarLayout标题为Toolbar。由于标题太长，它的结尾被三个点代替。问题是当CollapsingToolbarLayout折叠并且Toolbar具有CollapsingToolbarLayout's标题时，仍然有三个点。如果它很长，我想要Toolbar autoscroll的标题。

我的XML：

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/recyclerview_background"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="190dp"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorAppPrimary"
        app:expandedTitleMarginEnd="8dp"
        app:expandedTitleMarginStart="36dp"
        app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <RelativeLayout
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="190dp"
            android:fitsSystemWindows="true">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/material_bg_3"
                app:layout_collapseMode="parallax" />

            <ImageView
                android:id="@+id/imageViewPhoto"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_collapseMode="parallax" />

            <TextView
                android:id="@+id/textViewName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="false"
                android:layout_below="@+id/imageViewPhoto"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="5dp"
                android:text=""
                android:textColor="@color/white"
                android:textSize="16sp" />

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:ellipsize="marquee"
            android:fitsSystemWindows="true"
            android:gravity="top"
            app:layout_collapseMode="pin">

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="marquee"
                android:gravity="center"
                android:textColor="@color/white"
                android:textSize="20dp"
                android:textStyle="bold"
                android:visibility="gone" />
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/AppTheme.TabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/white"
            app:tabIndicatorColor="@color/colorAppPrimary"
            app:tabMode="scrollable" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_alignParentBottom="true"
            android:layout_below="@id/tabs" />

    </RelativeLayout>
</android.support.v4.widget.NestedScrollView>

扩展CollapsingToolbarLayout：

Toolbar：

Answer 1

我测试了它并且它正在工作。看看它是否适合您的需要。

在工具栏视图中添加此文字

<TextView
        android:id="@+id/toolbar_title"
        android:text="This will run the marquee animation forever"
        android:textSize="@dimen/abc_text_size_title_material_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true" />

然后在你的活动类中，在

之后添加这行代码

setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(null);

我的完整代码如下。

布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.inducesmile.toolbartesting.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:scrollHorizontally="true"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

    <TextView
        android:id="@+id/toolbar_title"
        android:text="This will run the marquee animation forever"
        android:textSize="@dimen/abc_text_size_title_material_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:singleLine="true" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_main" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

和Activity类

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(null);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}
}

此解决方案部分来自here

更新

我已将addOnOffsetChangedListener添加到AppBarLayout，以检测CollapsingToolbarLayout何时展开或折叠。

首先实例化AppBarLayout

private AppBarLayout mAppBarLayout;
private TextView toolBarText;

内部onCreate方法

toolBarText = (TextView)findViewById(R.id.toolbar_title);
    mAppBarLayout = (AppBarLayout)findViewById(R.id.app_bar);
    mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            Toast.makeText(MainActivity.this, "Vert " + verticalOffset, Toast.LENGTH_LONG).show();
            if(verticalOffset == 0){
                // Expanded
                toolBarText.setText("");                    
            }else{
                //collapsed
            }
        }
    });

检查它是否适合你

Answer 2

在展开Toolbar时删除CollapsingToolbarLayout的标题添加此代码段：

final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout)
            findViewById(R.id.collapsing_toolbar_layout);

mAppBar.addOnOffsetChangedListener(new OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

            if (collapsingToolbar.getHeight() + verticalOffset <
                    2 * ViewCompat.getMinimumHeight(collapsingToolbar)) {
                mTitleTV.setVisibility(View.VISIBLE);
                mTitleTV.animate().alpha(1).setDuration(600);
            } else {
                mTitleTV.animate().alpha(0).setDuration(600);
            }
        }
    });

使用CollapsingToolbarLayout时自动滚动工具栏文本

2 个答案: