CollapsingToolbarLayout subtitle

问题:

Am I able to set the title of a CollapsingToolbarLayout via the setTitle method?

Is there also a way to set a subtitle?

回答1:

If you want the subtitle to go to Toolbar when the AppBar is fully collapsed you should create your custom CoordinatorLayout.Behaviour Like this: Github Guide

But if you just want a smaller text behind the title when the AppBar is expanded you can try this layout:

Notice that here I set the AppBar height as 300dp and the app:expandedTitleMarginBottom is 160dp so the title won't go down and conflict with the out subtitle. In this example you should set CollapsingToolbarTitle dynamically in the runtime with collapsingToolbarTitle.setTitle("My Title"); method.

The result will be something like this:

回答2:

Try something like this, it work for me I have created custom ViewBehavior

@Override public boolean layoutDependsOn(CoordinatorLayout parent, HeaderView child, View dependency) {     return dependency instanceof AppBarLayout; }  @Override public boolean onDependentViewChanged(CoordinatorLayout parent, HeaderView child, View dependency) {     shouldInitProperties(child, dependency);      int maxScroll = ((AppBarLayout) dependency).getTotalScrollRange();     float percentage = Math.abs(dependency.getY()) / (float) maxScroll;      float childPosition = dependency.getHeight()             + dependency.getY()             - child.getHeight()             - (getToolbarHeight() - child.getHeight()) * percentage / 2;       childPosition = childPosition - mStartMarginBottom * (1f - percentage);      CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();     lp.leftMargin = (int) (percentage * mEndMargintLeft) + mStartMarginLeft;     lp.rightMargin = mMarginRight;     child.setLayoutParams(lp);      child.setY(childPosition);      ...     return true; } 

and this my layout

        ...      

ViewHeader layout:

回答3:

Here is the modified version of Harco's implmentation (this) given above which will also change the size of title as we expand and collapse the layout.

ViewBehavior.java

public class ViewBehavior extends CoordinatorLayout.Behavior {      private static final float MAX_SCALE = 0.5f;      private Context mContext;      private int mStartMarginLeft;     private int mEndMargintLeft;     private int mMarginRight;     private int mStartMarginBottom;     private boolean isHide;      public ViewBehavior(Context context, AttributeSet attrs) {         mContext = context;     }      @Override     public boolean layoutDependsOn(CoordinatorLayout parent, HeaderView child, View dependency) {         return dependency instanceof AppBarLayout;     }      @Override     public boolean onDependentViewChanged(CoordinatorLayout parent, HeaderView child, View dependency) {         shouldInitProperties(child, dependency);          int maxScroll = ((AppBarLayout) dependency).getTotalScrollRange();         float percentage = Math.abs(dependency.getY()) / (float) maxScroll;          // Set scale for the title         float size = ((1 - percentage) * MAX_SCALE) + 1;         child.setScaleXTitle(size);         child.setScaleYTitle(size);          // Set position for the header view         float childPosition = dependency.getHeight()                 + dependency.getY()                 - child.getHeight()                 - (getToolbarHeight() - child.getHeight()) * percentage / 2;          childPosition = childPosition - mStartMarginBottom * (1f - percentage);          CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();         lp.leftMargin = (int) (percentage * mEndMargintLeft) + mStartMarginLeft;         lp.rightMargin = mMarginRight;         child.setLayoutParams(lp);          child.setY(childPosition);          if (Build.VERSION.SDK_INT 

HeaderView.java

public class HeaderView extends LinearLayout {      @Bind(R.id.header_view_title)     TextView title;      @Bind(R.id.header_view_sub_title)     TextView subTitle;      public HeaderView(Context context) {         super(context);     }      public HeaderView(Context context, AttributeSet attrs) {         super(context, attrs);     }      public HeaderView(Context context, AttributeSet attrs, int defStyleAttr) {         super(context, attrs, defStyleAttr);     }      @TargetApi(Build.VERSION_CODES.LOLLIPOP)     public HeaderView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {         super(context, attrs, defStyleAttr, defStyleRes);     }      @Override     protected void onFinishInflate() {         super.onFinishInflate();         ButterKnife.bind(this);     }      public void bindTo(String title) {         bindTo(title, "");     }      public void bindTo(String title, String subTitle) {         hideOrSetText(this.title, title);         hideOrSetText(this.subTitle, subTitle);     }      private void hideOrSetText(TextView tv, String text) {         if (text == null || text.equals(""))             tv.setVisibility(GONE);         else             tv.setText(text);     }      public void setScaleXTitle(float scaleXTitle) {         title.setScaleX(scaleXTitle);         title.setPivotX(0);     }      public void setScaleYTitle(float scaleYTitle) {         title.setScaleY(scaleYTitle);         title.setPivotY(30);     } } 

回答4:

Subtitle support in a CollapsingToolbarLayout is a feature that I also long for, so I created a library collapsingtoolbarlayout-subtitle:

Use it like you would on any CollapsingToolbarLayout, just add subtitle attribute on it:

回答5:

I also had the same issue. In the end I made a LinearLayout that contains the title and subtitle and then set the expandedTitleTextAppearance to be transparent - effectively hiding the Toolbar title when the Layout is expanded. Using this approach the toolbar collapses over the LinearLayout and in the end only shows the title in the collapsed state.

The full xml is here:

Make sure that your style also extends TextAppearance or the app will crash if your Design Support Library is v22.2.0 :

This bug appears to be fixed in v22.2.1 (https://code.google.com/p/android/issues/detail?id=178674):

回答6:

Here is the modified version of Harco's implmentation (this) with title and subtitle set in center when expended.

activity_main.xml

dimens.xml

16dp16dp56dp14dp14dp

header_view.xml

HeaderView.java

public class HeaderView extends RelativeLayout {      @Bind(R.id.header_view_title)     TextView title;      @Bind(R.id.header_view_sub_title)     TextView subTitle;      Context context;      public HeaderView(Context context) {         super(context);         this.context = context;     }      public HeaderView(Context context, AttributeSet attrs) {         super(context, attrs);         this.context = context;     }      public HeaderView(Context context, AttributeSet attrs, int defStyleAttr) {         super(context, attrs, defStyleAttr);         this.context = context;     }      @TargetApi(Build.VERSION_CODES.LOLLIPOP)     public HeaderView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {         super(context, attrs, defStyleAttr, defStyleRes);         this.context = context;     }      @Override     protected void onFinishInflate() {         super.onFinishInflate();         ButterKnife.bind(this);     }      public void bindTo(String title) {         bindTo(title, "");     }      public void bindTo(String title, String subTitle) {         hideOrSetText(this.title, title);         hideOrSetText(this.subTitle, subTitle);     }      private void hideOrSetText(TextView tv, String text) {         if (text == null || text.equals(""))             tv.setVisibility(GONE);         else             tv.setText(text);     }      public void setScaleXTitle(float scaleXTitle) {         title.setScaleX(scaleXTitle);         title.setPivotX(0);     }      public void setScaleYTitle(float scaleYTitle) {         title.setScaleY(scaleYTitle);         title.setPivotY(30);     }      public TextView getTitle() {         return title;     }      public TextView getSubTitle() {         return subTitle;     } } 

and ViewBehavior.java

public class ViewBehavior extends CoordinatorLayout.Behavior {      private static final float MAX_SCALE = 0.5f;      private Context mContext;      private int mStartMarginLeftTitle;     private int mStartMarginLeftSubTitle;     private int mEndMargintLeft;     private int mMarginRight;     private int mStartMarginBottom;     private boolean isHide;      public ViewBehavior(Context context, AttributeSet attrs) {         mContext = context;     }      @Override     public boolean layoutDependsOn(CoordinatorLayout parent, HeaderView child, View dependency) {         return dependency instanceof AppBarLayout;     }      @Override     public boolean onDependentViewChanged(CoordinatorLayout parent, HeaderView child, View dependency) {         shouldInitProperties(child, dependency);          int maxScroll = ((AppBarLayout) dependency).getTotalScrollRange();         float percentage = Math.abs(dependency.getY()) / (float) maxScroll;          // Set scale for the title         float size = ((1 - percentage) * MAX_SCALE) + 1;         child.setScaleXTitle(size);         child.setScaleYTitle(size);          // Set position for the header view         float childPosition = dependency.getHeight()                 + dependency.getY()                 - child.getHeight()                 - (getToolbarHeight() - child.getHeight()) * percentage / 2;          childPosition = childPosition - mStartMarginBottom * (1f - percentage);         child.setY(childPosition);          // Set Margin for title         RelativeLayout.LayoutParams lpTitle = (RelativeLayout.LayoutParams) child.getTitle().getLayoutParams();         lpTitle.leftMargin = (int) ((mStartMarginLeftTitle) - (percentage * (mStartMarginLeftTitle - mEndMargintLeft)));          if (lpTitle.leftMargin 

文章来源: CollapsingToolbarLayout subtitle