Android Material Design Libraryシリーズチュートリアル(3)

労働成果を尊重し、転載は出典を明記してください.http://blog.csdn.net/growth58/article/details/48438657新浪微博に注目:@于衛国メールアドレス:[email protected]
Googleは2015 I/O大会でMaterial Design Support Libraryを発表し、これを使ってmaterailアプリケーションを作成することができ、API 19以下で急に容易になった.このシリーズでは、RSSリーダーアプリケーションを使用し、Materialシリーズの基礎アプリケーションに使用し、新しいDesign Support Libraryを完全に使用するように書き換えます.前に基本的なtab barを学びましたが、この文章ではスクロール時にtoolbarを隠して表示することを学びます.
開始前に、既存のコードを書き換えて非常に良い特性を実現することは、JAVAコードを全く必要としないことに注目すべきだと思います.前の文をもう一度読んでください.NO JAVA.
これはdesign support libraryに組み込まれている本当に強力な場所であり、多くの特性を取得して新しいコントロールに構築します.関連付けるだけで、多くの場合、レイアウトで完全に完了することができます.
まず、メインレイアウトファイルを見てみましょう.
res/layout/include_main.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"
  android:id="@+id/main_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:clipToPadding="false"
      android:paddingLeft="@dimen/home_offset"
      app:tabMode="scrollable" />

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

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

いくつかの新しいレイアウトタイプを追加しました.最外層はCoordinatorLayoutです.これは主要な主力がすでに私たちのために多くの仕事をしてくれたので、簡単な配置が必要です.本質的には、外部定義CoordinatorLayout動作をサブViewに適用する信号員である.これは抽象的な概念で、実際に試してみて、このレイアウトの残りの部分をチェックすることで、それをよりよく説明しましょう.
2つ目の新しいレイアウトはAppBarLayoutがToolbarとTabLayoutを包んでいます.AppBarLayoutは、app barsに共通のスクロール動作を定義し、スクロール動作を定義します.私たちはそれを実現したいと思っています.Toolbarに追加された追加のレイアウトパラメータを見ると、2つのscroll flagsが特定の制御動作に適用されることがわかります.scrollはtoolbarのスクロールが他のスクロールイベントに直接関係することを意味し、enterAlwaysは任意の下スクロールイベントにスクロールすることを意味します.言い換えればscrollはこのviewが私たちのスクロールに伴って移動し、enterAlwaysは私たちが下にスクロールするとすぐに戻ることを提供します.
スクロールイベントについてはすでに説明していますが、これらのスクロールイベントがどこから来たのかはまだ議論されていません.ユーザーが現在のViewPagerページの内容をスクロールする動作をした後、toolbarを隠すべきだと考えたら、かなり明らかです.そのため、toolbarをViewPagerの元のスクロールイベントに関連付ける必要があります.ViewPagerに追加したレイアウトパラメータを見てみましょう(これは、親レイアウトによって制御されることを意味します.CoordinatorLayoutは、私たちが実現したい動作を定義しています).
この行為はまったく異なるViewsとCoordinatorLayoutの間の契約が2つのViewsを接続することを担当している.私たちの例では、AppBarLayoutは、Viewから収集されたスクロールイベントを取得してAppBarLayoutに返信するScrolingViewBehaviorという動作を定義しています.AppBarLayoutは次に、これらのスクロールイベントを、各サブビューに基づいて宣言されたスクロールflagsに適用する.
そのため、ViewPager内でスクロールイベントが発生した場合、AppBarLayoutで取得してToolbarに適用し、必要なスクロール動作も取得します.
しかし、それを試してみると役に立たない.これは私を頭が痛いです.すべてが正常に見えるからです.Chris Banes'の優秀なCheesesquareコードを参考にして、これがどのように動作するべきかを確認し、コードの中で何の違いも見えませんでした.私が気づいた唯一の違いは、各ViewPager fragmentでChrisがRecyclerViewを使用し、WebViewを使用したことです.RecyclerViewv 22を見ていました2.0のソースコードは、v 4 support libraryの一部であるNestedScrollingChildというインタフェースを実現していることに気づいた.
それから私はまたこれを見て、私のWebViewのサブクラスでNestedScrollingChildを実装し、NestedScrollingChildHelperを使用してjavadocsが提案した方法に従って実装してみました.しかし、私はまだそれを働かせることができませんでした.
それから私はNestedScrollingChildを実現する他のクラスを見て、v 4 support libraryでNestedScrollViewというViewを送りました.その行為はScrollViewに似ていて、NestedScrollingChildを実現しました.
それを使ってWebViewを包んでみました.
res/layout/fragment_item.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"
  android:id="@+id/main_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
      android:id="@+id/tab_layout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:clipToPadding="false"
      android:paddingLeft="@dimen/home_offset"
      app:tabMode="scrollable" />

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

  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

これから必要なスクロールイベントを生成し、動作を取得した後:

これは多くの新しい情報がありますが、実際には良い行為の変化を得る必要があります.CoordinatorLayoutとAppBarLayout(定義された動作)のため、多くの小さな変更を得ました.
次の記事ではFloating ActionButtonについて学びます.
ソースコードはここからダウンロードできます.
コーヒーを一杯ください.支付宝を使って下のQRコードをスキャンしてください.

原文住所:https://blog.stylingandroid.com/design-library-part-3/