1

начал изучать android разработку недавно. Писал небольшое приложение на android и в нем нужно сделать боковое меню . Я пробовал сделать с шаблоном из Android Studio, Navigation Drawer Activity, но раз я обращаюсь к вам, понятно, что у меня ничего не получилось. Я много гуглил свой вопрос, но нигде не нахожу подходящего туториала(единственное исключение, наверное является эта шикарная статья с Хабра, но вот зараза, здесь написано на Kotlin, а мне нужно на Java), пожалуйста расскажите ПОШАГОВО, как создать боковое меню в Android Studio?

2 ответа 2

13

Вот инструкция как добавить в приложение нужный вам макет. Будем рассматривать ситуацию, когда вы будете создавать новое приложение, учитывая приведенную информацию в вопросе. При создании нового проекта вы можете выбрать Drawer activity как вы уже пробовали и дальше студия все сделает за вас. Будут созданы все необходимые классы для поддержки, разметка (которую можно будет кастомизировать по вашему усмотрению), ресурсы для меню и тому подобное. Разобраться что для чего в таком варианте совсем несложно. Есть второй вариант - создавать приложение на основе пустой активности (Empty activity) и дальше все делать вручную. Для начала нужно создать проект и перейти в файл разметки activity_main.xml и добавить соответствующий код:

<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
      <!-- The main content view -->
     <FrameLayout
             android:id="@+id/content_frame"
             android:layout_width="match_parent"
              android:layout_height="match_parent" />
      <!-- The navigation drawer -->
        <ListView 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="#111"/>
</android.support.v4.widget.DrawerLayout>

Дальше вам нужно добавить пункты меню которые будут отображаться, для этого переходим в файл строковых ресурсов и добавляем массив со своими данными:

<string-array name="screen_array">
        <item>Screen 1</item>
        <item>Screen 2</item>
        <item>Screen 3</item>
   </string-array>

Следующим шагом будет создание разметки пункта меню, поэтому создаем файл drawer_list_item.xml:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/activated_background"
    android:gravity="center_vertical"
    android:minHeight="?attr/listPreferredItemHeightSmall"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="#fff" />

После создания разметки пункта меню, нужно подумать над тем как будет отображаться нажатия и отмечание выбранного пункта меню, поэтому создаем в папке drawable файл activated_background.xml :

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/blue" android:state_activated="true"/>
    <item android:drawable="@color/blue" android:state_selected="true"/>
    <item android:drawable="@color/blue" android:state_pressed="true"/>
    <item android:drawable="@color/blue" android:state_checked="true"/>
    <item android:drawable="@android:color/transparent"/>

</selector>

и в ресурсах цвета добавляем нужный цвет:

<item name="blue" type="color">#FF33B5E5</item>

После того как с оформлением закончено нужно подумать над логикой поведения нашего меню, вот активность:

public class MainActivity extends ActionBarActivity {

    private String[] mScreenTitles;
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;

    private ActionBarDrawerToggle mDrawerToggle;
    private CharSequence mDrawerTitle;
    private CharSequence mTitle;

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

        mTitle = mDrawerTitle = getTitle();
        mScreenTitles = getResources().getStringArray(R.array.screen_array);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        // Set the adapter for the list view
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mScreenTitles));
        // Set the list's click listener
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

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

        mDrawerToggle = new ActionBarDrawerToggle(
                this, /* host Activity */
                mDrawerLayout, /* DrawerLayout object */
                R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
                R.string.drawer_open, /* "open drawer" description */
                R.string.drawer_close /* "close drawer" description */
                ) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getSupportActionBar().setTitle(mTitle);
                supportInvalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getSupportActionBar().setTitle(mDrawerTitle);
                supportInvalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        // Initialize the first fragment when the application first loads.
        if (savedInstanceState == null) {
            selectItem(0);
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu;
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    /* Called whenever we call invalidateOptionsMenu() */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_search).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
         // Handle action buttons
        switch(item.getItemId()) {
        case R.id.action_search:
            // Show toast about click.
            Toast.makeText(this, R.string.action_search, Toast.LENGTH_SHORT).show();
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }

     /* The click listener for ListView in the navigation drawer */
    private class DrawerItemClickListener implements ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    }

    /** Swaps fragments in the main content view */
    private void selectItem(int position) {
        // Update the main content by replacing fragments
        Fragment fragment = null;
        switch (position) {
        case 0:
            fragment = new ScreenOne();
            break;
        case 1:
            fragment = new ScreenTwo();
            break;
        case 2:
            fragment = new ScreenThree();
            break;
        default:
            break;
        }

        // Insert the fragment by replacing any existing fragment
        if (fragment != null) {
            FragmentManager fragmentManager = getSupportFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.content_frame, fragment).commit();

            // Highlight the selected item, update the title, and close the drawer
            mDrawerList.setItemChecked(position, true);
            setTitle(mScreenTitles[position]);
            mDrawerLayout.closeDrawer(mDrawerList);
        } else {
            // Error
            Log.e(this.getClass().getName(), "Error. Fragment is not created");
        }
    }

    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        getSupportActionBar().setTitle(mTitle);
    }

    /**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggles
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

}

ну и для корректной работы вам нужно создать необходимое кол-во фрагментов, которые будут показывать пользователю какие-то данные:

public class ScreenOne extends Fragment {

    public ScreenOne() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.screen_first, container,
                false);

        return rootView;
    }

}

на каждом фрагменте можно сделать свою разметку. Вот туториал.

1
  • можете написать подробнее что в какой файл писать? 31 окт 2019 в 19:49
1

Не будет вам тут пошагового решения. Читайте правила сообщества, оно не любит таких подходов. Тут помогают решить конкретную проблему, а не пишут мануалы под заказ.

но раз я обращаюсь к вам, понятно, что у меня ничего не получилось

Раз не получилось - значит что-то вы сделали не так. Все шаблоны студии работают из коробки, проверено уже даже не одним поколением программеров. Если он не заработал у вас - создайте новый вопрос, где укажите что именно не так: какую ошибку выдает при запуске, например. А вот такие вопросы будут довольно шустро минусоваться и удаляться.

3
  • уже когда дописывал ответ вы написали)) стирать было жалко, но вообще вы правы такие вопросы чаще всего закрывают. Студия в таких процессах помогает лучше чем туториал :)
    – Andrew
    30 окт 2019 в 14:01
  • А я вот поленился, так что респект за усидчивость =) 30 окт 2019 в 14:02
  • все с чего-то начинают, нужно относится с пониманием к таким мелким проблемам)) но вы тоже по своему правы))
    – Andrew
    30 окт 2019 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.