image - 带有透明工具栏和折叠滚动的 Android L 活动标题图像

Question

我有一个新的 KitKat 应用程序，我试图在我的活动中重现您可以在新的 Play 商店应用程序活动或 Google+ 个人资料活动中找到的布局。我想要实现的是拥有一个透明的工具栏和一个将在滚动时折叠的“活动标题”图像：

为了达到这个结果，是否有任何新的 appcompat 小部件或模式可以遵循？

Answer 1

您可能会发现https://github.com/ManuelPeinado/FadingActionBar很有用。另请参阅https://plus.google.com/106514622630861903655/posts/Y5iBqpzP4T9以使用新的工具栏。

Answer 2

你会想使用CollapsingToolbarLayout。

Android 设计支持库拥有您需要的一切。

Answer 3

有一个由 roman nurik 编写的示例代码，你可以从那里学习https://github.com/google/iosched

Answer 4

只需复制以下xml文件

<?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="false"
    tools:context="com.example.YourActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">
    <!--android:theme="@style/AppTheme.AppBarOverlay"-->

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

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

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


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


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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab_favorite"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_icon2"
    android:layout_marginRight="16dp"/>


<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="@drawable/ic_icon" />


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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="4dp"
        android:layout_margin="4dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bea"
                android:textAppearance="?android:attr/textAppearanceSmall"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Abs"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/black87"/>

        </LinearLayout>


    </android.support.v7.widget.CardView>


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

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

添加状态栏的半透明样式

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

<style name="AppTheme.NoStatusBar" parent="AppTheme.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

并修改您的清单

<activity
            android:name=".YourActivity"
            android:label="@string/title"
            android:theme="@style/AppTheme.NoStatusBar">
        </activity>

Answer 5

它帮助了我。注意ImageView：

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/toolbar_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    >
  <ImageView
      android:id="@+id/header"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@drawable/movie_cover"
      android:fitsSystemWindows="true"
      android:scaleType="centerCrop"
      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/AppTheme.PopupOverlay"
      />

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