CollapsingAvatarToolbar

介绍:

一个演示了如何添加一个带头像的 Collapsible Toolbar 到app中的库 ,头像的移动与扩展类似于Telegram app 。这个库只有一个唯一的view,使用的是Design Support Library。

运行效果:

使用说明:

Gradle

dependencies {
    compile 'com.sloydev:collapsingavatartoolbar:1.0.0'
}

把com.sloydev.collapsingavatartoolbar.CollapsingAvatarToolbar添加到布局:

<com.sloydev.collapsingavatartoolbar.CollapsingAvatarToolbar
  android:layout_width="wrap_content"
  android:layout_height="?attr/actionBarSize"
  app:collapsedPadding="@dimen/collapsedPadding"
  app:expandedPadding="@dimen/expandedPadding"
  app:collapsedImageSize="@dimen/collapsedImageSize"
  app:expandedImageSize="@dimen/expandedImageSize"
  app:collapsedTextSize="@dimen/collapsedTextSize"
  app:expandedTextSize="@dimen/expandedTextSize"
  >

它必须与Toolbar一起被包含在一个CollapsingToolbarLayout 中,如下:

<android.support.design.widget.CoordinatorLayout
  ...
  >
    <android.support.design.widget.AppBarLayout
      ...
      android:layout_height="@dimen/expanded_toolbar_height"
      >
        <android.support.design.widget.CollapsingToolbarLayout
          ...
          app:contentScrim="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|exitUntilCollapsed"
          >
            <android.support.v7.widget.Toolbar
              ...
              app:layout_collapseMode="pin"
              />
            <com.sloydev.collapsingavatartoolbar.CollapsingAvatarToolbar
              ...
              >
                <de.hdodenhof.circleimageview.CircleImageView
                  android:id="@id/cat_avatar"
                  ...
                  />
                <TextView 
                  android:id="@id/cat_title"
                  ...
                  />
            </com.sloydev.collapsingavatartoolbar.CollapsingAvatarToolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!-- The rest of your activity layout -->
    ...
</android.support.design.widget.CoordinatorLayout>

重点

  • CollapsingAvatarToolbar必须在AppBarLayout里面,被CollapsingToolbarLayout包裹。查询Android Design Support library 获取更多信息。

  • CollapsingAvatarToolbar必须有个Toolbar伴随,如果你不想使用Toolbar,我们可以讨论讨论。

  • 扩展高度(Expanded height) 取决于AppBarLayout的高度。

  • 折叠高度(Collapsed height )取决于Toolbar的高度。

  • 你必须在CollapsingAvatarToolbar里面设置头像(avatar)和标题视图( title view),且id必须喝上面演示的完全一致。这些id事library里面的。(所以是@而不是@+)。

  • 你可以使用任意TextView作为title,以及任意view作为头像,我这里的例子用的是hdodenhof的CircleImageView ,但是这取决于你自己。

  • 你也可以添加更多view到CollapsingAvatarToolbar里面。

  • 所有的自定义属性都是可选的,如果没有提供就使用默认的 。

外部Library

已下载
0