与冠军CollapsingToolbarLayout

Question

我使用CoordinatorLayout得到这个效果添加图标：

下面是布局代码：

<?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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/coordinatorRootLayout" 
    android:background="@android:color/background_light" 
    android:fitsSystemWindows="true" 
    > 


<android.support.design.widget.AppBarLayout 
      android:id="@+id/android_appbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="220dp" 
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsingToolbarLayoutAndroidExample" 
       android:layout_width="match_parent" 
       android:background="#fff" 
       app:collapsedTitleGravity="left" 
       app:expandedTitleTextAppearance="@color/card_outline" 
       android:layout_height="match_parent" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed" 
       android:fitsSystemWindows="true" 
       app:expandedTitleGravity="center_horizontal" 
       app:contentScrim="?attr/colorPrimary" 
       app:statusBarScrim="?attr/colorPrimary" 
       app:expandedTitleMarginStart="32dp" 
       app:expandedTitleMarginEnd="48dp"> 

      <ImageView 
        android:id="@+id/parallax_header_imageview" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:scaleType="fitXY" 
        android:src="@drawable/orange_triangle" 
        app:layout_collapseMode="parallax" 
        app:layout_collapseParallaxMultiplier="0.8"/> 


       <ImageView 
        app:expandedTitleGravity="center_horizontal" 
        android:id="@+id/someImage" 
        android:layout_width="100dp" 
        android:layout_height="100dp" 
        android:src="@drawable/circle" 
        android:layout_gravity="center_horizontal" 
        app:layout_collapseMode="parallax" 
        app:layout_collapseParallaxMultiplier="-1" 
        /> 
       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar_android" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        app:layout_collapseMode="none" 
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> 

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


     </android.support.design.widget.AppBarLayout> 
    <android.support.v4.widget.NestedScrollView 
      android:id="@+id/nested_scroll_view" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fillViewport="true" 
      app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

      <LinearLayout 
       android:id="@+id/linear_layout_android" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:padding="15dp" 
       android:background="@color/off_white" 
       android:layout_gravity="center_horizontal" 
       android:gravity="center_horizontal" 
       android:orientation="vertical"> 

       <GridView 
        android:id="@+id/gridview_parallax_header" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:columnWidth="100dp" 
        android:gravity="center" 
        android:numColumns="auto_fit" 
        android:stretchMode="columnWidth" /> 

      </LinearLayout> 

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


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

这里就是我得到的输出 如何使用带标题文字的图标？

Answer 1

你可以试试下面

Reference for Co-Ordinator Layout

现在你MainActivity.java

private void handleToolbarTitleVisibility(float percentage) { 
    if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) { 

     if(!mIsTheTitleVisible) { 
      startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE); 
      toolbar.setAlpha(0.9f); 
      toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.Primary))); 
      mIsTheTitleVisible = true; 
     } 
    } 
    else { 
     if (mIsTheTitleVisible) { 
      startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE); 
      toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.transparent))); 
      mIsTheTitleVisible = false; 
     } 
    } 
} 

注意里面：保持工具栏背景透明时扩大。

Answer 2

你可以从这个例子需要参考： -

android ParallaxHeaderViewPager

Answer 3

可能是这样解决问题：

您可以定位，无论你想利用这些扩展的标题CollapsingToolbarLayout属性：

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

代码布局文件：

<android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapse_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      android:fitsSystemWindows="true"> 

      <ImageView 
       android:id="@+id/bgheader" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:scaleType="centerCrop" 
       android:fitsSystemWindows="true" 
       android:background="@drawable/sunflowerpic" 
       app:layout_collapseMode="pin" /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/MyToolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="parallax" /> 

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

然后在你的java文件的setTitle：

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

添加图标左上角： 使用app:layout_collapseMode="pin"与ImagView。对于例如

<ImageView 
      android:id="@+id/someImage" 
      android:layout_width="56dp" 
      android:layout_height="wrap_content" 
      android:src="@drawable/someDrawable" 
      android:padding="16dp" 
      android:layout_gravity="top|end" 
      app:layout_collapseMode="pin" 
      /> 

参考这个链接Collapsing Toolbar Example

Answer 4

我建议你尝试Childs and dependencies

 public boolean onDependentViewChanged(
  
     CoordinatorLayout parent, 
     CircleImageView avatar, 
     View dependency) {
  

     modifyAvatarDependingDependencyState(avatar, dependency); 
    } 

    private void modifyAvatarDependingDependencyState(
    CircleImageView avatar, View dependency) { 
     // avatar.setY(dependency.getY()); 
     // avatar.setBlahBlat(dependency.blah/blah); 
    } 

http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html

CollapsingToolbarLayout with a custom view