web-dev-qa-db-ja.com

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

Android 5.0がリリースされたので、アニメーション化されたアクションバーアイコンを実装する方法を知りたいと思いました。

このライブラリ here はそれをうまく実装していますが、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>

ただし、そうするとクラッシュし、色の種類のエラーが表示されます。何が欠けていますか？

androidandroid-actionbarandroid-5.0-lollipopandroid-appcompatdrawertoggle
96
Bignadad

まず、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>。

その後、アニメーションを表示できます。

これがあなたのお役に立てば幸いです。

242
Yong

提供されているサポートライブラリ DrawerLayout で提案されているように ナビゲーションドロワートレーニングの作成 を使用している場合、新しく追加された Android.support。v7。app.ActionBarDrawerToggle （注：現在非推奨となっているものとは異なります Android.support。v4。app.ActionBarDrawerToggle ）：

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

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

24
ianhanniballake

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

主な活動

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>
17
tim

質問の更新された部分に回答するには、引き出しアイコン/矢印のスタイルを設定するには、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>

これはおそらくあなたが望むものではありません、なぜならアクションバー自体は矢印と一貫したスタイルを持っているはずなので、おそらく、オプション2が必要です：

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

グローバルアプリケーションテーマのAndroid:actionBarTheme（appcompatの場合はactionBarTheme）属性を、次のように独自のテーマ（おそらく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>

ここで重要な点は、ストックActionBar実装の代わりにToolbarでカスタムレイアウトを使用する場合（たとえば、DrawerLayout--NavigationView--Toolbarコンボを使用して、半透明のステータスバーの下に表示されるマテリアルスタイルの引き出し効果を達成する場合） actionBarTheme属性は明らかに自動的に選択されません（デフォルトのAppCompatActivityのActionBarによって処理されるため）。したがって、カスタムToolbarの場合は、テーマを手動で適用することを忘れないでください。

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

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

PSdrawerArrowStyleオーバーライドとspinBars属性に関する小さなコメント-多くのソースが、trueに設定して、引き出し/矢印アニメーション。つまり、spinBarsはAppCompatのデフォルトではtrueです（Base.Widget.AppCompat.DrawerArrowToggle.Commonスタイルを確認してください）。アニメーションを機能させるためにactionBarThemeをオーバーライドする必要はまったくありません。アニメーションをオーバーライドして属性をfalseに設定した場合でも、アニメーションを取得できます。これは、異なる、より少ない回転のアニメーションです。ここで重要なのは、ActionBarDrawerToggleを使用することです。これは、ファンシーなアニメーションドロウアブルを取り込むものです。

9
Ivan Bartsov

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

    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"をドロワーコンテンツのルートレイアウトに追加する

2
Nitin Misra