Изменить значок стрелки на значок гамбургера [дубликат]

Обратите внимание на класс «MAIN», в который помещается элемент, например

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

. В приведенном выше сценарии объект MAIN, который будет наблюдать jQuery, является «контейнером».

Тогда вы в основном будете иметь имена элементов в контейнере, такие как ul, li и select:

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });
30
задан Antonio 20 March 2017 в 15:09
поделиться

9 ответов

Если я предполагаю, что вы используете android.support.v4.widget.DrawerLayout в своем макете, тогда этот подход может сработать для вас; Я тестировал только API 21, но, учитывая, что в основном это использует библиотеки поддержки, он должен работать (известные последние слова) на более низких или более высоких объектах.

import android.support.v7.app.ActionBarDrawerToggle
import android.support.v4.widget.DrawerLayout

ActionBarDrawerToggle mDrawerToggle;
DrawerLayout drawerLayout;
private boolean mToolBarNavigationListenerIsRegistered = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        // Get DrawerLayout ref from layout
        drawerLayout = (DrawerLayout)findViewById(R.id.drawer);
        // Initialize ActionBarDrawerToggle, which will control toggle of hamburger.
        // You set the values of R.string.open and R.string.close accordingly.
        // Also, you can implement drawer toggle listener if you want.
        mDrawerToggle = new ActionBarDrawerToggle (this, drawerLayout, mToolbar, R.string.open, R.string.close);
        // Setting the actionbarToggle to drawer layout
        drawerLayout.setDrawerListener(mDrawerToggle);
        // Calling sync state is necessary to show your hamburger icon...
        // or so I hear. Doesn't hurt including it even if you find it works
        // without it on your test device(s)
        mDrawerToggle.syncState();
    }

    /**
     * To be semantically or contextually correct, maybe change the name
     * and signature of this function to something like:
     *
     * private void showBackButton(boolean show)
     * Just a suggestion.
     */
    private void enableViews(boolean enable) {

        // To keep states of ActionBar and ActionBarDrawerToggle synchronized,
        // when you enable on one, you disable on the other.
        // And as you may notice, the order for this operation is disable first, then enable - VERY VERY IMPORTANT.
        if(enable) {
//You may not want to open the drawer on swipe from the left in this case  
                      drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
// Remove hamburger
            mDrawerToggle.setDrawerIndicatorEnabled(false);
            // Show back button
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            // when DrawerToggle is disabled i.e. setDrawerIndicatorEnabled(false), navigation icon
            // clicks are disabled i.e. the UP button will not work.
            // We need to add a listener, as in below, so DrawerToggle will forward
            // click events to this listener.
            if(!mToolBarNavigationListenerIsRegistered) {
                mDrawerToggle.setToolbarNavigationClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // Doesn't have to be onBackPressed
                        onBackPressed();
                    }
                });

                mToolBarNavigationListenerIsRegistered = true;
            }

        } else {
//You must regain the power of swipe for the drawer. 
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);

// Remove back button
            getSupportActionBar().setDisplayHomeAsUpEnabled(false);
            // Show hamburger 
            mDrawerToggle.setDrawerIndicatorEnabled(true);
            // Remove the/any drawer toggle listener
            mDrawerToggle.setToolbarNavigationClickListener(null);
            mToolBarNavigationListenerIsRegistered = false;
        }

        // So, one may think "Hmm why not simplify to:
        // .....
        // getSupportActionBar().setDisplayHomeAsUpEnabled(enable);
        // mDrawer.setDrawerIndicatorEnabled(!enable);
        // ......
        // To re-iterate, the order in which you enable and disable views IS important #dontSimplify.
    }

решение использует ActionBarDrawerToggle.setDrawerIndicatorEnabled для переключения видимости значка гамбургера и ActionBar.setDisplayHomeAsUpEnabled для видимости кнопки Up , по существу используя свои соответствующие ресурсы drawable.

Другое предположения

  • Тема вашей деятельности расширяется Theme.AppCompat.Light.NoActionBar.
80
ответ дан Prateek 19 August 2018 в 04:17
поделиться
  • 1
    Удивительно, @ Ade.Akinyede! Это именно то, что я искал. Вы выполнили все мои требования к подаче, дали хорошее объяснение и хороший пример, также вы сделали хороший анализ и предложения. Вы заработали щедрость – Antonio 18 April 2016 в 13:43
  • 2
    Рад слышать это :) – ade.akinyede 18 April 2016 в 21:31
  • 3
    @ ade.akinyede Спасибо за ответ, мой следующий вопрос заключается в том, как я мог бы АНИМАТЬ этих кнопок в процессе перехода туда и обратно к значкам гамбургера и обратно? – burglarhobbit 26 January 2017 в 09:26
  • 4
    Ты спасаешь мой день! Хорошее решение! Я создаю его в своем приложении с фрагментами, и все работает отлично! Отличная работа! +1 – Trancer 1 February 2017 в 21:56
  • 5
    отлично, есть способ, которым я могу сделать переход? Это значительно улучшит работу пользователя – dfi 18 November 2017 в 21:50

Я нашел гибкие решения в Android-приложении Google I / O 2017 .

public Toolbar getToolbar() {
    if (mToolbar == null) {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        if (mToolbar != null) {
            setSupportActionBar(mToolbar);
            mToolbar.setNavigationContentDescription(R.string.navdrawer_description_a11y);
            mToolbarTitle = (TextView) mToolbar.findViewById(R.id.toolbar_title);
            if (mToolbarTitle != null) {
                int titleId = getNavigationTitleId();
                if (titleId != 0) {
                    mToolbarTitle.setText(titleId);
                }
            }

            // We use our own toolbar title, so hide the default one
            getSupportActionBar().setDisplayShowTitleEnabled(false);
        }
    }
    return mToolbar;
}

/**
 * @param clickListener The {@link android.view.View.OnClickListener} for the navigation icon of
 *                      the toolbar.
 */
protected void setToolbarAsUp(View.OnClickListener clickListener) {
    // Initialise the toolbar
    getToolbar();
    if (mToolbar != null) {
        mToolbar.setNavigationIcon(R.drawable.ic_up);
        mToolbar.setNavigationContentDescription(R.string.close_and_go_back);
        mToolbar.setNavigationOnClickListener(clickListener);
    }
}

Таким образом, использование действительно просто.

setToolbarAsUp(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // onBackPressed();
        // or navigate to parent or some other intent
    }
});
1
ответ дан Anton Pelykh 19 August 2018 в 04:17
поделиться

Попробуйте добавить к вашему activity's theme/style.xml код ниже style AppTheme, чтобы ваш hamburger icon был back icon с animation.

Условие, если вы используете значок гамбургера с NavigationDrawer и AppCompatActivity/ActionBarActivity

<style name="AppTheme" parent="Theme.AppCompat.Light">
            <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>

Надеюсь, это поможет! или вам просто нужно сделать это только с возможностью рисования.

Проверьте эту ссылку

0
ответ дан Community 19 August 2018 в 04:17
поделиться
 final Toolbar toolbar = (Toolbar) findViewById(R.id.actionbar);
      toolbar.setTitle(Html.fromHtml("<font color=#ffffff>" +     getString(R.string.print_s) + "</font>"));
      toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.menu_icon));
     toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
             DetailActivity.this.finish();
        }
    });
    toolbar.inflateMenu(R.menu.fav);
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener()     {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
              item.setIcon(R.drawable.back_icon)
              return true;
            }
            return false;
        }
    });
0
ответ дан Dinesh 19 August 2018 в 04:17
поделиться
  • 1
    Спасибо за ваш ответ, @Dinesh. Вы прочитали мое описание щедрости? – Antonio 15 April 2016 в 14:23
  • 2
    Нет, но я попробовал свой ответ, поскольку знаю любую проблему – Dinesh 15 April 2016 в 14:35

вы можете изменить кнопку панели действий с помощью:

        getSupportActionBar().setHomeAsUpIndicator(R.drawable.back_button);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
1
ответ дан Martín Huergo 19 August 2018 в 04:17
поделиться
  • 1
    Спасибо за ваш ответ, @ Martín Huergo. Я ожидаю, что не предоставим ярлык, если только он не является родным для Android. – Antonio 12 April 2016 в 21:15
  • 2
    это полезно для недвижущихся выбиваемых иконок. – cweitat 28 November 2017 в 17:41

Используйте этот параметр

getSupportActionBar().setDisplayShowHomeEnabled(true);
0
ответ дан Ram Prakash Bhat 19 August 2018 в 04:17
поделиться

Для меня я хотел изменить значок Burger с помощью значка Back Arrow в левой части ActionBar Fragment, так как я использую Navigation Drawer. Кроме того, добавление меню с правой стороны.

В главной операции он уже установлен - по умолчанию, когда Android Studio создает ящик навигации для меня - вот так:

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open,
                R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();

Проблема заключается в том, как настроить ActionBar в Fragment, поэтому, когда я перехожу к Fragment, он покажет мне настроенный ActionBar и когда Стрелка назад , он должен оставить фрагмент, а ActionBar должен вернуться в первое состояние.

В фрагменте ( Полная реализация ):

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setHasOptionsMenu(true); // To show the menu options
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState){
    super.onViewCreated(view, savedInstanceState);
    showActionBar(); // the method to change ActionBar
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    // inflate the customized menu which already created in XML
    getActivity().getMenuInflater().inflate(R.menu.fragment_menu, menu);
    super.onCreateOptionsMenu(menu, inflater);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // add implementation when user select an item from the menu
    switch (item.getItemId()) {
        case R.id.option1:
            // do something
            return true;
        case R.id.option2:
            // do something
            return true;
        case R.id.option3:
            // do something
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

private void showActionBar() {
    // get the ToolBar from Main Activity
    final Toolbar toolbar = getActivity().findViewById(R.id.toolbar);
    // get the ActionBar from Main Activity
    final ActionBar actionBar = ((AppCompatActivity)getActivity()).getSupportActionBar();
    // inflate the customized Action Bar View
    LayoutInflater inflater = (LayoutInflater) getActivity()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View v = inflater.inflate(R.layout.fragment_actionbar, null);

    if (actionBar != null) {
        // enable the customized view and disable title
        actionBar.setDisplayShowCustomEnabled(true);
        actionBar.setDisplayShowTitleEnabled(false);

        actionBar.setCustomView(v);
        // remove Burger Icon
        toolbar.setNavigationIcon(null);

        // add click listener to the back arrow icon
        v.findViewById(R.id.back).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // reverse back the show
                actionBar.setDisplayShowCustomEnabled(false);
                actionBar.setDisplayShowTitleEnabled(true);
                //get the Drawer and DrawerToggle from Main Activity
                // set them back as normal
                DrawerLayout drawer = getActivity().findViewById(R.id.drawer_layout);
                ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                        getActivity(), drawer, toolbar, R.string.navigation_drawer_open,
                        R.string.navigation_drawer_close);
                // All that to re-synchronize the Drawer State
                toggle.syncState();
                // Implement Back Arrow Icon 
                // so it goes back to previous Fragment
                getActivity().onBackPressed();
            }
        });
    }
}

fragment_actionbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_horizontal" >

    <ImageView
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:src="@drawable/ic_menu_back"
        android:layout_marginLeft="@dimen/_5sdp"
        android:layout_alignParentStart="true"
        android:layout_marginStart="@dimen/_5sdp" />

</RelativeLayout>

ic_menu_back.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="459"
    android:viewportWidth="459">
    <path
        android:fillColor="#ffffff"
        android:pathData="M178.5,140.25v-102L0,216.75l178.5,178.5V290.7c127.5,0,216.75,40.8,280.5,130.05C433.5,293.25,357,165.75,178.5,140.25z"/>
</vector>

fragment_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/border_shadow">

    <item
        android:id="@+id/option1"
        android:title="@string/show_profile"
        app:showAsAction="never"/>
    <item
        android:id="@+id/option2"
        android:title="@string/report_pic"
        app:showAsAction="never"/>
    <item
        android:id="@+id/option3"
        android:title="@string/delete_pic"
        app:showAsAction="never"/>
</menu>

0
ответ дан Yahya 19 August 2018 в 04:17
поделиться
0
ответ дан alexscmar 30 October 2018 в 16:07
поделиться
0
ответ дан Hardik Dudhaiya 30 October 2018 в 16:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: