Android appcompat v7 21 kitaplığından DrawerArrowToggle nasıl uygulanır


97

Artık Android 5.0 piyasaya sürüldüğüne göre, hareketli eylem çubuğu simgelerinin nasıl uygulanacağını merak ediyordum.

Bu kütüphane burada uygular benim için ince ama AppCompat v7 kütüphanesinde beri nasıl uygulanabilir oldu?

Kütüphane buna temalar.xml'de atıfta bulunur

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

Bu tarzın altında

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

GÜNCELLEME

Bunu v7 DrawerToggle kullanarak uyguladım. Ancak onu biçimlendiremiyorum. Lütfen yardım et

Stilini v7 styles_base.xml içinde buldum

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

Bunu stillerime ekledim ve işe yaramadı. Benim attr.xml dosyama da eklendi

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

Ancak çöküyor ve bunu yaparken renk tipi hatası diyor. Neyi kaçırıyorum?

Yanıtlar:


243

İlk olarak, artık android.support.v4.app.ActionBarDrawerTogglekullanımdan kaldırıldığını bilmelisiniz .

Bunu ile değiştirmelisiniz android.support.v7.app.ActionBarDrawerToggle.

İşte benim örneğim ve Toolbaryenisini 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>

Belgeleri AndroidDocument # DrawerArrowToggle_spinBars üzerinde okuyabilirsiniz

Bu özellik, menüden oka animasyonun uygulanmasının anahtarıdır.

public static int DrawerArrowToggle_spinBars

Geçiş sırasında çubukların dönüp dönmeyeceği
"true" veya "false" şeklinde bir boole değeri olmalıdır.

Yani, bu ayarlayın: <item name="spinBars">true</item>.

Ardından animasyon sunulabilir.

Umarım bu size yardımcı olabilir.


12
Hamburger simgesinin görünmesi konusunda sorunlarla karşılaştım. arama mDrawerToggle.syncState();sorunu çözdü.
aheuermann

1
benim için getSupportActionBar () null döndürüyor .. Nedeni ne olabilir?
Ramesh_D

2
Android Studio diyor Cannot resolve method setSupportActionBar(android.widget.Toolbar). Ben de denedim android.support.v7.toolbar. Bunun neden olduğunu bilen var mı?
pez

1
Kullandım setSupportActionBar(mToolbar);ve tanımladım <item name="spinBars">true</item>ama animasyon çalışmıyor
SweetWisher ツ

2
Araç Çubuğunu etkinliğinizin Eylem Çubuğu olarak ayarlıyorsanız ActionBarDrawerToggle (Activity, DrawerLayout, int, int) kullanmalısınız.
Peter Zhao

24

Destek Kitaplığı tarafından sağlanan DrawerLayout'u gezinme çekmecesi oluşturma eğitiminde önerildiği gibi kullanıyorsanız, yeni eklenen android.support'u kullanabilirsiniz. v7 .app.ActionBarDrawerToggle (not: artık kullanımdan kaldırılan android.support. v4 .app.ActionBarDrawerToggle'dan farklı ):

çekmece kapalıyken bir Hamburger simgesi ve çekmece açıkken bir ok gösterir. Çekmece açıldığında bu iki durum arasında hareket eder.

Eğitim, kullanımdan kaldırmayı / yeni sınıfı hesaba katacak şekilde güncellenmemiş olsa da, onu neredeyse tamamen aynı kodla kullanabilmelisiniz - onu uygulamadaki tek fark kurucudur.


Bc uygulamamda v4 kullanıyorum api 15'ten önceki cihazları desteklememe gerek yok. Yani eğer bunun çalışmasını istersem v7 eylem çubuğu çekmecesini kullanmam gerekir mi? Bunu yapsaydım, tüm stillerimi AppCompat'a ve parça aktivitelerini eylem çubuğu aktivitelerine vb. Dönüştürmek zorunda kalmaz mıydım? Veya v7'den sadece Çekmece geçişini uygulayabilir miyim? Şu anda kart görünümleri için v7 kullanıyorum. 15'in altındaki API'yi desteklemiyorsam v4'ü kullanmalı mıyım? Ve sanırım kart görünümleri için v7'ye ihtiyacım var.
Bignadad

Materyal tasarımı için tüm Destek Kitaplığı uyumluluğu v7-appcompat'ta uygulanmıştır ve bu stili <5.0 cihazlarda desteklemek istiyorsanız önerilir. AppCompat yerleşiktir ve v4 gerektirir, bu nedenle AppCompat'ı kullanmak isteyip istemediğinize gerçekten bağlıdır. Zaten FragmentActivity kullanıyorsanız, zaten oldukça yakınsınız - stil farkı artık oldukça küçüktür (çoğunlukla sadece android: nitelikleri isim alanlı olmayan özelliklerle değiştiriyoruz).
ianhanniballake

Bir göz
atmanın

Bu gerçekten stil konusunda tamamen ayrı bir soru. Bu bölümü tamamen başka bir soru olarak göndermenizi öneririm (bağlantı içeren bir yorum eklemekten çekinmeyin).
ianhanniballake

1
@mraviator - yep: XML'i değiştirin, ardından v7.0'ı oluşturun ve ekleyin ActionBarDrawerToggle. Kanonik cevap AppCompat yapımcısı gelen XML yapılandırılmalıdır nasıl tam bir örnek vardır.
ianhanniballake

17

Benzer işlevselliğe sahip küçük bir uygulama oluşturdum

Ana aktivite

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();
    }
}

O Etkinliğin XML'im

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

Özel Araç Çubuğu XML'im

<?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>

Tema Stilim

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

Değerlerimdeki Stillerim-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
Bu mükemmel çalışıyor ama Title'ı kullanmak istemiyorum, bu yüzden bunu nasıl halledebilirim? Çünkü Theme.AppCompat.Light.NoActionBar'ı kullanırsam , getSupportActionBar
SweetWisher'da

Yukarıdaki kodu kullandım. İstisnam var: Bu Aktivite zaten setupportactionbar (araç çubuğu) satırında pencere dekoru tarafından sağlanan bir eylem çubuğuna sahip. GetSupportActionBar (). Hide (); SetContentView (R.layout.activity_main) öncesinde; Şimdi çalışıyor.
Thirumalvalavan

setSupportActionBar (araç çubuğu); ayrıca yorum yaptı.
Thirumalvalavan

9

Sorunuzun güncellenmiş bölümünü cevaplamak için: çekmece simgesinin / okunun stilini belirlemek için iki seçeneğiniz vardır:

Okun stilini belirleyin

Bunu yapmak drawerArrowStyleiçin, temanızı şu şekilde geçersiz kılın :

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

Muhtemelen istediğiniz bu değildir , çünkü ActionBar'ın kendisi okla tutarlı bir stile sahip olmalıdır, bu nedenle büyük olasılıkla ikinci seçeneği istersiniz:

ActionBar / Araç Çubuğu Teması

Global uygulama temasının android:actionBarTheme( actionBarThemefor appcompat) özniteliğini kendi temanızla (muhtemelen türetmeniz gereken ThemeOverlay.Material.ActionBar/ThemeOverlay.AppCompat.ActionBar) şu şekilde geçersiz kılın :

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

Burada önemli bir not Toolbar, hisse senedi yerine ActionBar uygulamasıyla özel bir düzen kullanırken (örneğin , yarı saydam durum çubuğu altında göründüğü Materyal tarzı çekmece efektini elde etmek için DrawerLayout- NavigationView- Toolbarkombinasyonunu kullanıyorsanız ), actionBarThemeözniteliğin açıkça görülmemesidir. otomatik olarak alındı ​​(çünkü AppCompatActivityvarsayılan olarak tarafından halledilmesi gerekiyorduActionBar ), bu nedenle özel Toolbartemanız için temanızı manuel olarak uygulamayı unutmayın:

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

- bu, AppCompat'ın varsayılanına çözümlenecektir ThemeOverlay.AppCompat.ActionBar türetilmiş özniteliği ayarlarsanız, veya geçersiz .

PSdrawerArrowStyle geçersiz kılma ve spinBarsöznitelik hakkında küçük bir yorum - birçok kaynağın önerdiği true, çekmece / ok animasyonunu elde etmek için ayarlanmalıdır . Şey, spinBarsöyle true varsayılan olarak (kontrol AppCompat içinde Base.Widget.AppCompat.DrawerArrowToggle.Commonstili), geçersiz kılmak gerekmez actionBarThemeanimasyon çalışma almak için hiç. Onu geçersiz kılıp niteliği olarak ayarlasanız bile animasyonu elde edersiniz false, bu sadece farklı, daha az kıvrımlı bir animasyondur. Burada önemli olan şey kullanmaktır ActionBarDrawerToggle, süslü animasyonlu çekmeceyi çeken şey budur.


2

Yukarıdaki kodu biraz düzeltmek istiyorum

    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);
    }

ve diğer her şey aynı kalacak ...

Sorun yaşayanlar için DrawerlayoutAraç çubuğunu yerleştirmede

android:layout_marginTop="?attr/actionBarSize"çekmece içeriğinin kök düzenine ekle


getSupportActionBar()sadece uzatırken nasıl kullanıyorsun Activity?
wzieba

basitçe yapamazsınız, uzatmanız gerekirActionBarActivity
Nitin Misra
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.