Android appcompat v7 21ライブラリからDrawerArrowToggleを実装する方法


97

Android 5.0がリリースされた今、私はアニメーションのアクションバーアイコンを実装する方法を考えていました。

このライブラリはここでそれをうまく実装しますが、appcompat v7ライブラリはそれを持っているので、どのように実装できますか?

ライブラリはthemes.xmlでそれを参照します

 <item name="drawerArrowStyle">@style/Widget.AppCompat.DrawerArrowToggle</item>

このスタイルの下で

 <style name="Base.V7.Theme.AppCompat" parent="Platform.AppCompat">

更新

これをv7 DrawerToggleを使用して実装しました。しかし、私はそれをスタイルすることはできません。助けてください

v7のstyles_base.xmlでそのスタイルが見つかりました

<style name="Base.Widget.AppCompat.DrawerArrowToggle" parent="">
    <item name="color">?android:attr/textColorSecondary</item>
    <item name="thickness">2dp</item>
    <item name="barSize">18dp</item>
    <item name="gapBetweenBars">3dp</item>
    <item name="topBottomBarArrowSize">11.31dp</item>
    <item name="middleBarArrowSize">16dp</item>
    <item name="drawableSize">24dp</item>
    <item name="spinBars">true</item>
</style>

これを自分のスタイルに追加したのですが、うまくいきませんでした。私のattr.xmlにも追加されました

<declare-styleable name="DrawerArrowToggle">
    <!-- The drawing color for the bars -->
    <attr name="color" format="color"/>
    <!-- Whether bars should rotate or not during transition -->
    <attr name="spinBars" format="boolean"/>
    <!-- The total size of the drawable -->
    <attr name="drawableSize" format="dimension"/>
    <!-- The max gap between the bars when they are parallel to each other -->
    <attr name="gapBetweenBars" format="dimension"/>
    <!-- The size of the top and bottom bars when they merge to the middle bar to form an arrow -->
    <attr name="topBottomBarArrowSize" format="dimension"/>
    <!-- The size of the middle bar when top and bottom bars merge into middle bar to form an arrow -->
    <attr name="middleBarArrowSize" format="dimension"/>
    <!-- The size of the bars when they are parallel to each other -->
    <attr name="barSize" format="dimension"/>
    <!-- The thickness (stroke size) for the bar paint -->
    <attr name="thickness" format="dimension"/>
</declare-styleable>

しかし、クラッシュすると、カラータイプエラーが表示されます。何が欠けていますか?

回答:


243

まず、これandroid.support.v4.app.ActionBarDrawerToggleが非推奨であることを知っておく必要があります。

これをに置き換える必要がありandroid.support.v7.app.ActionBarDrawerToggleます。

これが私の例です。新しいを使用してToolbarを置き換えますActionBar

MainActivity.java

public class MainActivity extends ActionBarActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
    DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
        this,  mDrawerLayout, mToolbar,
        R.string.navigation_drawer_open, R.string.navigation_drawer_close
    );
    mDrawerLayout.setDrawerListener(mDrawerToggle);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
    mDrawerToggle.syncState();
}

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

AndroidDocument#DrawerArrowToggle_spinBarsでドキュメントを読むことができます

この属性は、メニューから矢印へのアニメーションを実装するためのキーです。

public static int DrawerArrowToggle_spinBars

遷移中にバーを回転させるかどうかを指定し
ます。ブール値( "true"または "false")である必要があります。

したがって、これを設定します<item name="spinBars">true</item>

次に、アニメーションを表示できます。

これがお役に立てば幸いです。


12
ハンバーガーアイコンが表示されない問題が発生しました。呼び出しはmDrawerToggle.syncState();それを修正しました。
aheuermann 2014年

1
私にとってgetSupportActionBar()はnullを返します。理由は何でしょうか?
Ramesh_D 2014

2
Android Studioは言うCannot resolve method setSupportActionBar(android.widget.Toolbar)。私も試しましたandroid.support.v7.toolbar。なぜこれが起こるのか誰か知っていますか?
pez

1
私は使用しsetSupportActionBar(mToolbar);、定義しました<item name="spinBars">true</item>が、アニメーションは機能しません
SweetWisherツヤン

2
ツールバーをアクティビティのActionBarとして設定する場合は、ActionBarDrawerToggle(Activity、DrawerLayout、int、int)を使用する必要があります。
Peter Zhao、

24

ナビゲーションドロワートレーニングの作成で提案されているように、サポートライブラリが提供するDrawerLayoutを使用している場合は、新しく追加されたandroid.supportを使用できますV7 .app.ActionBarDrawerToggle(注:現在は非推奨と異なる。android.support V4 .app.ActionBarDrawerToggle):

は、引き出しが閉じているときのハンバーガーアイコンと、引き出しが開いているときの矢印を示しています。引き出しが開くと、これらの2つの状態の間でアニメーション化されます。

トレーニングは非推奨/新しいクラスを考慮に入れるように更新されていませんが、ほぼ同じコードを使用できるはずです-実装の唯一の違いはコンストラクタです。


私はアプリbcでv4を使用しています。api15より前のデバイスをサポートする必要はありません。これを機能させるには、v7アクションバーの引き出しトグルを使用する必要がありますか?そうした場合、すべてのスタイルをAppCompatに変換し、アクティビティをアクションバーアクティビティなどにフラグメント化する必要はありませんか?または、v7のDrawerトグルのみを実装できますか?現在、カードビューにv7を使用しています。15未満のAPIをサポートしていない場合、v4を使用する必要がありますか?カードの表示にはv7が必要だと思います。
Bignadad 2014年

マテリアルデザインのサポートライブラリの互換性はすべてv7-appcompatに実装されており、5.0未満のデバイスでそのスタイルをサポートする場合に推奨されます。AppCompatはビルドされており、v4を必要とするので、AppCompatを使用するかどうかは、まったく問題ありません。FragmentActivityを既に使用している場合は、もうかなり近いです-スタイルの違いはかなり小さくなりました(ほとんどの場合、android:属性を非名前空間属性に置き換えるだけです)。
ianhanniballake 2014年

ご覧になってよろしければ質問を更新しました
Bignadad 2014年

それは本当にスタイリングに関する全く別の質問です。他の質問全体としてその部分を送信することをお勧めします(リンクを含むコメントを自由に追加してください)。
ianhanniballake 2014年

1
@mraviator-はい、XMLを変更してから、v7を作成してアタッチしActionBarDrawerToggleます。AppCompatのメーカーからの標準的な回答には、XMLの構造化方法の完全な例が含まれています。
ianhanniballake 2014年

17

同様の機能を持つ小さなアプリケーションを作成しました

主な活動

public class MyActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(
                this,
                drawerLayout,
                toolbar,
                R.string.open,
                R.string.close
        )

        {
            public void onDrawerClosed(View view)
            {
                super.onDrawerClosed(view);
                invalidateOptionsMenu();
                syncState();
            }

            public void onDrawerOpened(View drawerView)
            {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
                syncState();
            }
        };
        drawerLayout.setDrawerListener(actionBarDrawerToggle);

        //Set the custom toolbar
        if (toolbar != null){
            setSupportActionBar(toolbar);
        }

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        actionBarDrawerToggle.syncState();
    }
}

そのアクティビティの私のXML

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MyActivity"
    android:id="@+id/drawer"
    >

    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <include layout="@layout/toolbar_custom"/>
    </FrameLayout>
    <!-- The navigation drawer -->
    <ListView
        android:layout_marginTop="?attr/actionBarSize"
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#457C50"/>


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

私のカスタムツールバーXML

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/toolbar"
    android:background="?attr/colorPrimaryDark">
    <TextView android:text="U titel"
        android:textAppearance="@android:style/TextAppearance.Theme"
        android:textColor="@android:color/white"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
</android.support.v7.widget.Toolbar>

私のテーマスタイル

<resources>
    <style name="AppTheme" parent="Base.Theme.AppCompat"/>

    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDarker</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    </style>

    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

    <color name="primary">#457C50</color>
    <color name="primaryDarker">#580C0C</color>
</resources>

values-v21の私のスタイル

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>
</resources>

1
これは完璧に動作しますが、タイトルを使用したくないので、これをどのように処理できますか?Theme.AppCompat.Light.NoActionBarを使用すると、getSupportActionBarで
SweetWisherツヤン

上記のコードを使用しました。例外が発生しました:このアクティビティには、setsupportactionbar(toolbar)行のウィンドウ装飾によって提供されるアクションバーがすでにあります。私はgetSupportActionBar()。hide();を使用しました。setContentView(R.layout.activity_main);の前; 今それは働いています。
Thirumalvalavan、2015年

setSupportActionBar(toolbar); またコメントしました。
Thirumalvalavan、2015年

9

質問の更新された部分に答えるには、ドロワーアイコン/矢印をスタイルするために、2つのオプションがあります。

矢印自体にスタイルを設定する

これを行うには、次のようdrawerArrowStyleにテーマでオーバーライドします。

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="drawerArrowStyle">@style/MyTheme.DrawerArrowToggle</item>
</style>
<style name="MyTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/holo_purple</item>
    <!-- ^ this will make the icon purple -->
</style>

ActionBar自体が矢印と一貫したスタイルを持つ必要があるため、これはおそらく望んいることではありません。したがって、おそらく2つのオプションが必要です。

アクションバー/ツールバーのテーマ

次のように、グローバルアプリケーションテーマのandroid:actionBarThemeactionBarThemeappcompatの)属性を、独自のテーマ(おそらくから派生するものThemeOverlay.Material.ActionBar/ThemeOverlay.AppCompat.ActionBar)でオーバーライドします。

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarTheme">@style/MyTheme.ActionBar</item>
</style>
<style name="MyTheme.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="android:textColorPrimary">@android:color/white</item>
    <!-- ^ this will make text and arrow white -->
    <!-- you can also override drawerArrowStyle here -->
</style>

重要な注意点はここでカスタムレイアウトを使用した場合ということですToolbar(あなたが使用している場合などを代わりに株式アクションバーの実装DrawerLayout- - NavigationViewToolbarそれは半透明のステータスバーの下に見えるのマテリアルスタイルの引き出し効果を達成するためにコンボを)actionBarTheme属性がobvioslyではありません自動的に選択されます(AppCompatActivityデフォルトでによって処理されることを意図しているためActionBar)。したがって、カスタムのToolbar場合は、テーマを手動で適用することを忘れないでください。

<!--inside your custom layout with DrawerLayout
and NavigationView or whatever -->
<android.support.v7.widget.Toolbar
        ...
        app:theme="?actionBarTheme">

- ThemeOverlay.AppCompat.ActionBar派生テーマに属性を設定した場合、これはAppCompatのデフォルトまたはオーバーライドに解決されます。

PSdrawerArrowStyleオーバーライドとspinBars属性についての小さなコメント-多くのソースが示唆しtrueているように、ドロワー/矢印アニメーションを取得するために設定する必要があります。事は、spinBarsそれはtrue デフォルトでAppCompat(Base.Widget.AppCompat.DrawerArrowToggle.Commonスタイルをチェックする)にありactionBarTheme、アニメーションを機能させるためにオーバーライドする必要はまったくありません。オーバーライドして属性をfalseに設定しても、アニメーションは取得されますが、それは単なる別の、より渦巻きの少ないアニメーションです。ここで重要なのはを使用することですActionBarDrawerToggle。これが、派手なアニメーションドローアブルを引き込むものです。


2

上記のコードを少し修正したい

    public class MainActivity extends ActionBarActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(
            this,  mDrawerLayout, mToolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close
        );
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    }

他のすべてのものは同じままです...

Drawerlayoutツールバーのオーバーレイに問題がある人のために

android:layout_marginTop="?attr/actionBarSize"ドロワーコンテンツのルートレイアウトに追加


getSupportActionBar()延長するだけでどう使うのActivity
wzieba 14

単純にできません。拡張する必要がありますActionBarActivity
Nitin Misra
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.