如何在摺疊工具欄中將文本視圖轉換爲標題？

Question

我有一個CollapsingToolbarLayout包含TextView和下TextView一個RatingBar。有可能讓TextView過渡到標題？

我目前的佈局是這樣的：

我想要的「標題」過渡了作爲工具欄崩潰。還會有一個後退按鈕，那麼我如何確保textview轉換到正確的位置（到後退按鈕的右側）？

編輯：這是我的XML

<android.support.design.widget.CoordinatorLayout 
android:id="@+id/main_content" 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true"> 

<android.support.design.widget.AppBarLayout 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/detail_view_app_bar_height" 
    android:fitsSystemWindows="true" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsing_toolbar_layout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <ImageView 
      android:id="@+id/image" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax"/> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" 
      android:layout_marginLeft="@dimen/double_margin" 
      android:gravity="center_vertical" 
      android:orientation="vertical" 
      app:layout_collapseMode="parallax"> 

      <TextView 
       android:id="@+id/title" 
       fontPath="fonts/OpenSans-Bold.ttf" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Title" 
       android:textColor="@android:color/white" 
       android:textSize="@dimen/large_text"/> 

      <RatingBar 
       android:id="@+id/rating_bar" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"/> 

     </LinearLayout> 

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

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

Answer 1

解決的辦法是：不要使用TextView。

您可以定位，無論你想通過使用這些CollapsingToolbarLayout屬性展開的標題：我假設你使用的是NoActionBar主題，這就是爲什麼你與TextView爲題開始了

app:expandedTitleGravity  default is bottom|left -or- bottom|start 
app:expandedTitleMargin 
app:expandedTitleMarginBottom 
app:expandedTitleMarginStart 
app:expandedTitleMarginEnd 

。

因此，這裏是你的佈局，固定爲使用CollapsingToolbarLayout標題：

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/detail_view_app_bar_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle" 
      app:expandedTitleMarginBottom="64dp" 
      app:expandedTitleMarginStart="16dp" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 
      <!-- 
       set the expandedTitleMarginBottom to a value 
       that positions the expanded title above the rating bar 
       --> 

      <ImageView 
       android:id="@+id/image" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       app:layout_collapseMode="parallax" /> 

      <RatingBar 
       android:id="@+id/rating_bar" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="bottom" 
       android:layout_marginLeft="16dp" 
       app:layout_collapseMode="parallax" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> 

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

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

然後在你的代碼，設置標題上CollapsingToolbarLayout：

 CollapsingToolbarLayout collapsingToolbar = 
       (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout); 
     collapsingToolbar.setTitle("Title");