web-dev-qa-db-ja.com

Android L連絡先アプリはどのようにツールバーを折りたたみますか?

リストビューをスクロールすると、バージョン5.0の連絡先アプリがツールバーを折りたたむ方法を再現しようとしています。

目的のインタラクションを示すスクリーンショットのギャラリー ツールバーが段階的に折りたたまれていることに注意してください。ツールバーには、検索+最後の連絡先の表示、最後の連絡先のフェード、最後の連絡先の折りたたみ、検索の折りたたみ、タブのみが表示されます。

これまでのところ、LinearLayoutのrecyclerviewの上にツールバーがあり、ツールバーはスタンドアロンではなくアクションバーとして使用されています。

Recyclerviewのタッチイベントをインターセプトしてツールバーを縮小し、スクロールイベントをrecyclerviewに戻す方法がわかりません。スクロールビューにすべてを表示しようとしましたが、その後、リサイクラービューはその高さを適切に計算できず、コンテンツを表示しませんでした。 recyclerviewでonscrollをオーバーライドしようとしましたが、スクロールイベントが開始されたときにのみ通知され、最初に表示されるカードIDが提供されます。

正しいように見えますが、私は私の人生のために働くことができません、これは次のとおりです。

getSupportActionBar().setHideOnContentScrollEnabled(true);

返されるもの:

 Caused by: Java.lang.UnsupportedOperationException: Hide on content scroll is not supported in this action bar configuration.

従来のアクションバーを使用し、その下にツールバーを配置し、hideoncontentscrollenabledを設定しても機能しませんでした。スクロールしてもアクションバーの非表示メソッドはトリガーされませんでした。

-編集-従来のアクションバーを使用してリストビューでhideOnContentScrollEnabledを動作させることができましたが、動作は連絡先アプリとは異なります。これは明らかに彼らが使用した方法ではありません-リストビューでflingイベントが発生するとアクションバーで.hide()をトリガーするだけです。これは、スクロールイベントとともにツールバーをドラッグする連絡先アプリとは特に異なります。 -/編集-

そのため、そのルートを放棄し、fill_parentをカードビューの高さに配置し、ツールバーの崩壊をアニメーション化しました。しかし、タッチイベントに続いてタッチイベントをrecyclerviewに返すようにトリガーするにはどうすればよいですか?

activity_main.xml

<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical"
    >

    <Android.support.v7.widget.Toolbar
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:minHeight="?android:attr/actionBarSize"
        Android:background="@color/colorPrimary"
        />

    <fragment Android:name="me.myapplication.FragmentTab"
          Android:id="@+id/tab_fragment"
          Android:layout_width="match_parent"
          Android:layout_height="wrap_content" />
</LinearLayout>

fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:gravity="center_horizontal"
    Android:orientation="vertical"
    Android:padding="8dp"
    Android:background="#eeeeee"
    >

    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/recycler_view"
        Android:layout_width="match_parent"
        Android:layout_height="fill_parent"
        />

</LinearLayout>

styles.xml

...
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...

MainActivity.Java

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);

// Disable the logo in the actionbar, as per material guidelines
toolbar.getMenu().clear();
toolbar.setTitle("My toolbar");
setSupportActionBar(toolbar);
33
Preston

私はまだソースコードを調査していませんが、この男は人生を楽にし、啓発したようです。

https://github.com/ksoichiro/Android-ObservableScrollView

[〜#〜] edit [〜#〜]

Googleがリリースしたばかりの Android Design Library 。ツールバーを折りたたむなどのすべての効果が含まれているので、ご覧ください。

17
humblerookie

まあ、彼らがそれをどのように行うのか分かりませんが、...ソースコードを覗いてみませんか?幸運なことに、連絡先アプリはAndroid L(他の人はLで動作しなくなったMailなどの連絡先、またはキーボード、独自のGoogleキーボードの発売以降、更新を停止しました)。

とにかく、ここにあなたが見るべきだと思うソースコードがあります: https://github.com/Android/platform_packages_apps_contacts/blob/master/src%2Fcom%2Fandroid%2Fcontacts%2Factivities%2FActionBarAdapter.Java

update(boolean skipAnimation)(行437)を呼び出す行311のメソッドanimateTabHeightChange(int start, int end)に注意してください。

私の推測では、すべての魔法がそこで起こる;-)

3
jrub

サードパーティのライブラリは必要ありません!Androidはライブラリを正式に提供しています。微調整。

これを確認してください Android-developerのブログ

build.gradleファイルにこの依存関係を追加することを忘れないでください。

compile 'com.Android.support:design:22.2.0'

2
Apurva

2015年6月の時点で、新しいデザインサポートライブラリのいわゆる CollapsingToolbarLayout を使用して、目的の効果を実現できます。

サンプルコードに基づいて here 、私はそれを考えています:

  • 検索カードビューはツールバーの子です
  • 不在着信カードビューは、collapseMode属性がpinに設定されたcollapsingtoolbarに属します
<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="112dp"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:minHeight="?attr/actionBarSize"
        Android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            Android:fitsSystemWindows="false"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways">

            <!-- Search layout -->
            <Android.support.v7.widget.CardView   
            </Android.support.v7.widget.CardView>

        </Android.support.v7.widget.Toolbar>

        <!-- Last call card view-->
        <Android.support.v7.widget.CardView
            app:layout_collapseMode="pin">               
        </Android.support.v7.widget.CardView>

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

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

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="48dp"
        Android:background="@color/primary_color"
        app:layout_scrollFlags="scroll"/>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" />

</LinearLayout>
2
appoll

私はあなたが探していることをするように見えるこのライブラリを見つけました: https://github.com/kmshack/Android-ParallaxHeaderViewPager そしてこれ https://github.com/flavienlaurent/NotBoringActionBar

ビデオを再生して動作を確認できます。 https://www.youtube.com/watch?v=sCP-b0a1x5Y

これは、ToolBarを使用した「新しい」標準的な方法ではないかもしれませんが、コードを調べることでアイデアが得られる場合があります。 OnScrollListenerをスクロールコンテンツにアタッチし、バーのサイズの変更をトリガーするようです。

1

Androidの連絡先アプリには、独自のアプリで使用できる簡単なプラグアンドプレイソリューションがありません。

完全に実装され、基本的にゼロから実装する場合と同じ方法で実行されます。コンテキストについては、コードを見る前に、ビューのレイアウト方法に留意してください。

https://github.com/Android/platform_packages_apps_contacts/blob/Lollipop-release/res/layout/quickcontact_activity.xml

MultiShrinkScrollerはスクロール動作を仲介するFrameLayoutですが、主なものはLinearLayoutにあるため、高いビューの高さを減らすと、低いビューが上に「スクロール」されます。

実装のキーファイルは次のとおりです。

https://github.com/Android/platform_packages_apps_contacts/blob/Lollipop-release/src/com/Android/contacts/widget/MultiShrinkScroller.Java

_public void scrollTo(int x, int y) {
    final int delta = y - getScroll();
    boolean wasFullscreen = getScrollNeededToBeFullScreen() <= 0;
    if (delta > 0) {
        scrollUp(delta);
    } else {
        scrollDown(delta);
    }
    updatePhotoTintAndDropShadow();
    updateHeaderTextSizeAndMargin();
    //... other stuff
}

private void scrollUp(int delta) {

    // Collapse higher views first
    if (getTransparentViewHeight() != 0) {
        final int originalValue = getTransparentViewHeight();
        setTransparentViewHeight(getTransparentViewHeight() - delta);
        setTransparentViewHeight(Math.max(0, getTransparentViewHeight()));
        delta -= originalValue - getTransparentViewHeight();
    }

    // Shrink toolbar as needed
    final ViewGroup.LayoutParams toolbarLayoutParams
            = mToolbar.getLayoutParams();
    if (toolbarLayoutParams.height > getFullyCompressedHeaderHeight()) {
        final int originalValue = toolbarLayoutParams.height;
        toolbarLayoutParams.height -= delta;
        toolbarLayoutParams.height = Math.max(toolbarLayoutParams.height,
                getFullyCompressedHeaderHeight());
        mToolbar.setLayoutParams(toolbarLayoutParams);
        delta -= originalValue - toolbarLayoutParams.height;
    }

    // Finally, scroll content if nothing left to shrink
    mScrollView.scrollBy(0, delta);
}
_

updatePhotoTintAndDropShadow();およびupdateHeaderTextSizeAndMargin();は、通常のActionBar/ToolBarのルックアンドフィールになるように、色合いとテキストが折りたたまれたときの変化を処理します。

MultiShrinkScrollerファイル自体を取得し、自分の用途に合わせて調整することもできますが、最近ではおそらくより簡単な実装があります(Androidのデザインライブラリからの実装を含む)。

0
David Liu

私にとっては https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling%28part3%29/ が役に立ちました。ソースコードはここにあります: https://github.com/mzgreen/HideOnScrollExample/tree/master/app/src/main

レイアウトのRecycleViewは次のようになります。

<Android.support.v7.widget.RecyclerView
    Android:id="@+id/recyclerView"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

アプリケーションを開始すると、2つのツールバー(アクションバーとツールバー)が表示されます。そのため、activity.Javaで次のように記述する必要があります。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Hide ActionBar.
    supportRequestWindowFeature(WindowCompat.FEATURE_ACTION_BAR);
    getSupportActionBar().hide();
    setContentView(R.layout.your_activity_layout);
    ...

ツールバーは、次のようにカスタマイズされます: https://stackoverflow.com/a/26548766/291414 。つまり、タイトルやその他の要素なしで表示されるため、レイアウトに追加できます。

0
CoolMind