Android CollapsingToolbarLayout示例-IGI

时间：2020-02-23 14:28:49 　来源:igfitidea点击:

欢迎使用Android CollapsingToolbarLayout示例。
在本教程中，我们将讨论并在应用程序中实现CollapsingToolBarLayout。

Android CollapsingToolbarLayout

Android CollapsingToolbarLayout是Toolbar的包装器，可实现折叠的应用程序列。
它旨在用作AppBarLayout的直接子级。
这种布局通常在Whatsapp应用程序的配置文件屏幕中看到。
此布局包括：

折叠标题：展开布局时，标题较大。
随着布局的折叠和滚动离开屏幕，文本大小会变小。
app：layout_scrollFlags：此布局的滚动标志通常设置为" scroll | exitUntilCollapsed"。
app：collapsedTitleGravity：指定折叠时容器中标题的重力。
app：contentScrim：这要求指定CollapsingToolbarLayouts内容在屏幕外充分滚动后的可绘制或者颜色值。
？attr/colorPrimary。
app：scrimAnimationDuration：指定用于稀松布可见性动画的持续时间。
这需要一个整数值，例如" 100"。

如果您最近更新到最新的SDK，请在创建新项目时选择"滚动活动"类型(它包含CollapsingToolbarLayout的现成实现)。

运行默认的新项目应显示以下输出：

在本教程中，我们将对默认项目进行更改，例如在折叠时显示ImageView，从FAB按钮显示与工具列等效的图标。

Android CollapsingToolbarLayout代码

下面给出了" activity_scrolling.xml"：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  tools:context="com.theitroad.collapsingtoolbarlayout.ScrollingActivity">

  <android.support.design.widget.AppBarLayout
      android:id="@+id/app_bar"
      android:layout_width="match_parent"
      android:layout_height="@dimen/app_bar_height"
      android:fitsSystemWindows="true"
      android:theme="@style/AppTheme.AppBarOverlay">

      <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/expandedImage"
              android:layout_width="match_parent"
              android:layout_height="200dp"
              android:scaleType="centerCrop"
              android:src="@drawable/photo"
              app:layout_collapseMode="parallax"
              app:layout_collapseParallaxMultiplier="0.7" 

          <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>
  </android.support.design.widget.AppBarLayout>

  <include layout="@layout/content_scrolling" 

  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="@dimen/fab_margin"
      app:layout_anchor="@id/app_bar"
      app:layout_anchorGravity="bottom|end"
      app:srcCompat="@android:drawable/ic_dialog_info" 

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

app：layout_anchor和app：layout_anchorGravity将FAB锚定到AppBarLayout的右下角

注意：content_scrolling.xml保留为本教程的默认设置。

menu_scrolling.xml文件的定义如下

<menu xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  tools:context="com.theitroad.collapsingtoolbarlayout.ScrollingActivity">
  <item
      android:id="@+id/action_settings"
      android:orderInCategory="100"
      android:title="@string/action_settings"
      app:showAsAction="never" 

  <item
      android:id="@+id/action_info"
      android:orderInCategory="200"
      android:title="info"
      app:showAsAction="ifRoom"
      android:icon="@android:drawable/ic_dialog_info"

</menu>

下面定义了" ScrollingActivity.java"的代码：

package com.theitroad.collapsingtoolbarlayout;

import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class ScrollingActivity extends AppCompatActivity {

  private Menu menu;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_scrolling);
      final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(mToolbar);

      FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
      fab.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                      .setAction("Action", null).show();
          }
      });

      AppBarLayout mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
      mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
          boolean isShow = false;
          int scrollRange = -1;

          @Override
          public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
              if (scrollRange == -1) {
                  scrollRange = appBarLayout.getTotalScrollRange();
              }
              if (scrollRange + verticalOffset == 0) {
                  isShow = true;
                  showOption(R.id.action_info);
              } else if (isShow) {
                  isShow = false;
                  hideOption(R.id.action_info);
              }
          }
      });
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      //Inflate the menu; this adds items to the action bar if it is present.
      this.menu = menu;
      getMenuInflater().inflate(R.menu.menu_scrolling, menu);
      hideOption(R.id.action_info);
      return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      //Handle action bar item clicks here. The action bar will
      //automatically handle clicks on the Home/Up button, so long
      //as you specify a parent activity in AndroidManifest.xml.
      int id = item.getItemId();

      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
          return true;
      } else if (id == R.id.action_info) {
          return true;
      }

      return super.onOptionsItemSelected(item);
  }

  private void hideOption(int id) {
      MenuItem item = menu.findItem(id);
      item.setVisible(false);
  }

  private void showOption(int id) {
      MenuItem item = menu.findItem(id);
      item.setVisible(true);
  }
}

在上面的代码中，要知道ColapsingToolbarLayout是折叠还是展开，我们在AppBarLayout实例上添加了一个侦听器addOnOffsetChangedListener。
根据其他条件，我们显示或者隐藏工具列信息选项。

Android CollapsingToolbarLayout示例