วิธีใช้ DrawerArrowToggle จากไลบรารี Android appcompat v7 21

Question 1

ตอนนี้ Android 5.0 เปิดตัวแล้วฉันสงสัยว่าจะใช้ไอคอนแถบแอคชั่นแบบเคลื่อนไหวได้อย่างไร

ห้องสมุดนี้ที่นี่ดำเนินการมันที่ดีสำหรับฉัน แต่เนื่องจากห้องสมุด v7 AppCompat มันมีวิธีการที่สามารถจะดำเนินการ?

ไลบรารีอ้างอิงใน 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>

แต่ขัดข้องและระบุข้อผิดพลาดประเภทสีเมื่อทำเช่นนั้น ฉันขาดอะไรไป?

Question 2

อันดับแรกคุณควรทราบว่าตอนนี้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

แอตทริบิวต์นี้เป็นกุญแจสำคัญในการใช้งานแอนิเมชั่นเมนูลูกศร

สาธารณะคง int DrawerArrowToggle_spinBars

ว่าแท่งควรหมุนหรือไม่ระหว่างการเปลี่ยน
ต้องเป็นค่าบูลีนไม่ว่าจะเป็น "จริง" หรือ "เท็จ"

คุณตั้งค่าสิ่งนี้: <item name="spinBars">true</item>.

จากนั้นสามารถนำเสนอภาพเคลื่อนไหว

หวังว่านี่จะช่วยคุณได้

Question 3

หากคุณกำลังใช้ไลบรารีการสนับสนุนที่ให้DrawerLayoutตามที่แนะนำในการฝึกอบรมการสร้างลิ้นชักการนำทางคุณสามารถใช้android.support ที่เพิ่มเข้ามาใหม่ได้ v7 .app.ActionBarDrawerToggle (หมายเหตุ: แตกต่างจากandroid.support ที่เลิกใช้แล้วv4 .app.ActionBarDrawerToggle ):

แสดงไอคอนแฮมเบอร์เกอร์เมื่อปิดลิ้นชักและลูกศรเมื่อลิ้นชักเปิดอยู่ มันเคลื่อนไหวระหว่างสองสถานะนี้เมื่อลิ้นชักเปิดขึ้น

แม้ว่าการฝึกอบรมจะไม่ได้รับการอัปเดตเพื่อพิจารณาการเลิกใช้งาน / คลาสใหม่ แต่คุณควรจะสามารถใช้โค้ดนี้ได้เกือบทั้งหมดข้อแตกต่างเพียงอย่างเดียวในการนำไปใช้คือตัวสร้าง

Question 4

ฉันสร้างแอปพลิเคชันขนาดเล็กที่มีฟังก์ชันการทำงานคล้ายกัน

กิจกรรมหลัก

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>

สไตล์ของฉันในค่า -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>

Question 5

หากต้องการตอบคำถามที่อัปเดตแล้ว: ในการจัดรูปแบบไอคอนลิ้นชัก / ลูกศรคุณมีสองตัวเลือก:

จัดรูปแบบลูกศรเอง

ในการดำเนินการนี้ให้แทนที่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 ควรมีรูปแบบที่สอดคล้องกับลูกศรดังนั้นส่วนใหญ่คุณอาจต้องการตัวเลือกที่สอง:

ธีม ActionBar / Toolbar

แทนที่แอตทริบิวต์android:actionBarTheme( actionBarThemeสำหรับ appcompat) ของธีมแอปพลิเคชันส่วนกลางด้วยธีมของคุณเอง (ซึ่งคุณน่าจะได้มาจาก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แทน ActionBar หุ้นการดำเนินงาน (เช่นถ้าคุณกำลังใช้DrawerLayout- NavigationView- Toolbarคำสั่งผสมเพื่อให้บรรลุผลลิ้นชักวัสดุสไตล์ที่มันมองเห็นภายใต้โปร่งแสงสถานะ) ที่actionBarThemeแอตทริบิวต์ obviosly ไม่ หยิบขึ้นมาโดยอัตโนมัติ (เนื่องจากควรได้รับการดูแลโดย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หรือการแทนที่ของคุณหากคุณตั้งค่าแอตทริบิวต์ในธีมที่ได้รับของคุณ

ป.ล.ข้อคิดเห็นเล็กน้อยเกี่ยวกับการdrawerArrowStyleแทนที่และspinBarsแอตทริบิวต์ซึ่งแหล่งข้อมูลจำนวนมากแนะนำว่าควรตั้งค่าเพื่อtrueให้ได้ภาพเคลื่อนไหวของลิ้นชัก / ลูกศร สิ่งนี้spinBarsเป็นtrue ค่าเริ่มต้นใน AppCompat (ตรวจสอบBase.Widget.AppCompat.DrawerArrowToggle.Commonสไตล์) คุณไม่จำเป็นต้องเขียนทับactionBarThemeเลยเพื่อให้ภาพเคลื่อนไหวทำงานได้ คุณจะได้รับภาพเคลื่อนไหวแม้ว่าคุณจะลบล้างและตั้งค่าแอตทริบิวต์falseเป็นเพียงภาพเคลื่อนไหวที่แตกต่างกันเล็กน้อย สิ่งสำคัญที่นี่คือการใช้ActionBarDrawerToggleมันเป็นสิ่งที่ดึงภาพเคลื่อนไหวแฟนซีที่วาดได้

Question 6

ฉันต้องการแก้ไขโค้ดด้านบนเล็กน้อย

    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"ในเค้าโครงรูทของเนื้อหาลิ้นชัก