Практика: Toolbar

Задание 1. Создание отзывчивого тулбара для поиска

Перед вами стоит задача разработать тулбар для поиска. Требования к нему:

В обычном состоянии в тулбаре отображается некий заголовок, иконка поиска и два пункта меню, скрытые под тремя точками.
При нажатии на иконку поиска в тулбаре появляется поле для ввода текста, стрелка назад, при нажатии по которой тулбар возвращается в исходное состояние, и крестик для очищения введённого пользователем текста.

Рекомендации:

Векторные иконки для тулбара можно найти по ключевым словам search, clear, settings.
Иконки в правой части тулбара сделайте при помощи menu.
Входите и выходите из режима поиска при помощи управления видимостью элементов на экране.

Решение:

strings.xml

<resources>
    <string name="app_name">Toolbar Appliction</string>
    <string name="devcolibri">Devcolibri</string>


    <string name="search_hint">Поиск</string>
    <string name="clear_hint">Очистить</string>
    <string name="help_hint">Помощь</string>
    <string name="settings_hint">Настройки</string>
</resources>

styles.xml

<resources>


    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>


    <style name="Toolbar">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">?attr/actionBarSize</item>
        <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
        <item name="android:background">?attr/colorPrimary</item>
    </style>


</resources>

toolbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">


    <item
        android:id="@+id/action_search"
        app:showAsAction="always"
        app:iconTint="@android:color/white"
        android:icon="@drawable/ic_search_black_24dp"
        android:title="@string/search_hint"/>


    <item
        android:id="@+id/action_clear"
        app:showAsAction="always"
        android:visible="false"
        app:iconTint="@android:color/white"
        android:icon="@drawable/ic_clear_black_24dp"
        android:title="@string/clear_hint"/>


    <item
        android:id="@+id/action_help"
        app:showAsAction="never"
        android:iconTint="@android:color/white"
        android:icon="@drawable/ic_help_black_24dp"
        android:title="@string/help_hint"/>


    <item
        android:id="@+id/action_settings"
        app:showAsAction="never"
        android:iconTint="@android:color/white"
        android:icon="@drawable/ic_settings_black_24dp"
        android:title="@string/settings_hint"/>


</menu>

toolbar_activity_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/Toolbar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <EditText
            android:id="@+id/query_edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginEnd="10dp"
            android:visibility="gone"
            android:background="@null"
            android:maxLines="1"
            android:imeOptions="actionSearch"
            android:inputType="text"
            android:hint="@string/search_hint"/>


    </android.support.v7.widget.Toolbar>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar"/>


</android.support.constraint.ConstraintLayout>

ToolbarActivity.java

public class ToolbarActivity extends AppCompatActivity {


    private Toolbar  toolbar;
    private Menu     menu;
    private EditText queryEditText;


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


        toolbar = findViewById(R.id.toolbar);
        queryEditText = toolbar.findViewById(R.id.query_edit_text);
        queryEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if (actionId == EditorInfo.IME_ACTION_SEARCH) {
                    Toast.makeText(v.getContext(), queryEditText.getText(), Toast.LENGTH_SHORT).show();
                    return true;
                }
                return false;
            }
        });


        setSupportActionBar(toolbar);
        getSupportActionBar().setTitle(R.string.devcolibri);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar_menu, menu);
        this.menu = menu;
        return true;
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_search:
                setSearchMode(true);
                break;
            case R.id.action_help:
                Toast.makeText(this, R.string.help_hint, Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_settings:
                Toast.makeText(this, R.string.settings_hint, Toast.LENGTH_SHORT).show();
                break;
            case R.id.action_clear:
                queryEditText.setText("");
                break;
        }


        return true;
    }


    private void setSearchMode(boolean searchMode) {
        menu.findItem(R.id.action_clear).setVisible(searchMode);
        menu.findItem(R.id.action_search).setVisible(!searchMode);


        queryEditText.setVisibility(searchMode ? View.VISIBLE : View.GONE);


        getSupportActionBar().setDisplayHomeAsUpEnabled(searchMode);
        getSupportActionBar().setDisplayShowHomeEnabled(searchMode);


        if (searchMode) {
            toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    setSearchMode(false);
                }
            });
        }
    }
}

course-android-advanced

УВИДЕТЬ ВСЕ

Добавить заметку

Вы

Добавить ваш комментарий

Авторизация

Задание 1. Создание отзывчивого тулбара для поиска