Анимированный Toolbar: фичи Design Support Library

admin0

Сегодня мы поговорим об анимированом Toolbar. Для реализации мы будем использовать стандартную библиотеку Design Support Library.

Для начала нужно добавить некоторые зависимости в файл build.gradle на уровне приложения:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
    compile 'com.android.support:palette-v7:22.2.0'
}

Далее нужно добавить некоторые строки и массивы строк в «строковые ресурсы» (файл strings.xml из папки /res/values/):

<resources>
    <string name="app_name">ToolbarAnimation</string>
    <string name="one">One</string>
    <string name="two">Two</string>
    <string name="three">Three</string>
    <string name="four">Four</string>
    <string name="five">Five</string>
    <string name="six">Six</string>
    <string name="seven">Seven</string>
    <string name="eight">Eight</string>
    <string name="nine">Nine</string>
    <string name="ten">Ten</string>
    <string name="eleven">Eleven</string>
    <string name="twelve">Twelve</string>
    <string name="numbers">Numbers</string>
    <string-array name="numbers">
        <item>@string/one</item>
        <item>@string/two</item>
        <item>@string/three</item>
        <item>@string/four</item>
        <item>@string/five</item>
        <item>@string/six</item>
        <item>@string/seven</item>
        <item>@string/eight</item>
        <item>@string/nine</item>
        <item>@string/ten</item>
        <item>@string/eleven</item>
        <item>@string/twelve</item>
    </string-array>
</resources>

Также не забываем обновить файл с разметкой для своего MainActivity:

<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

В этом исходном коде мы используем CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout.

CoordinatorLayout
CoordinatorLayout — это новый «прокачанный» FrameLayout.

AppBarLayout
AppBarLayout представляет собой вертикальный LinearLayout, который реализует многие из особенностей материальной концепции дизайна приложения, а именно жесты прокрутки и поведение с определенными параметрами.

CollapsingToolbarLayout
CollapsingToolbarLayout является оболочкой для Toolbar, которая реализует «схлопывание» Toolbar. Он предназначен для использования в качестве прямого потомка в AppBarLayout.

Далее нужно обновить код для класса MainActivity:

public class MainActivity extends AppCompatActivity {
    private Toolbar mToolbar;
    private CollapsingToolbarLayout mCollapsingToolbar;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.anim_toolbar);
        setSupportActionBar(mToolbar);
        mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        mCollapsingToolbar.setTitle(getString(R.string.numbers));
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.header);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                int mutedColor = palette.getLightMutedColor(R.attr.colorPrimary);
                mCollapsingToolbar.setContentScrimColor(mutedColor);
            }
        });
    }
}

Также обновляем наши стили, нужно добавить primaryColorDark в файле colors.xml в папке /res/values/:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primaryColorDark">#1976D2</color>
</resources>

После этого,  нужно обновить стиль для всего приложения, для этого необходимо обновить файл styles.xml в папке /res/values/

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimaryDark">@color/primaryColorDark</item>
</style>

Для использования recylcerView необходимо использовать адаптер с элементами. Во-первых, нужно добавить макет элемента view для повторного использования. Для него необходимо добавить разметку в папку /res/layout/. В моем случае этот файл называется «item.xml«, исходный код для этого файла ниже:

Для использования recylcerView необходимо использовать адаптер с элементами. Во-первых, нужно добавить макет элемента view для повторного использования. Для него необходимо добавить разметку в папку /res/layout/. В моем случае этот файл называется «item.xml«, исходный код для этого файла ниже:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView"
        android:textSize="22sp"
        android:layout_marginRight="12dp"
        android:layout_marginLeft="12dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Следующим шагом является создание адаптера для просмотра с повторным использованием view элементов. Для него необходимо создать класс Java. В моем случае этот файл называется «RecyclerViewAdapter.java«:

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
    private String[] mList;
    public RecyclerViewAdapter(String[] list) {
        this.mList = list;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View itemView = inflater.inflate(R.layout.item, parent, false);
        return new ViewHolder(itemView);
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.titleTextView.setText(mList[position]);
    }
    @Override
    public int getItemCount() {
        return mList.length;
    }
    public static class ViewHolder extends RecyclerView.ViewHolder {
        private TextView titleTextView;
        public ViewHolder(View itemView) {
            super(itemView);
            titleTextView = (TextView)itemView.findViewById(R.id.textView);
            itemView.setTag(itemView);
        }
    }
}

Не забываем обновить наш MainActivity для работы с recyclerview и отображения информации:

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
mGridLayoutManager = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL);
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
mRecyclerView.setLayoutManager(mGridLayoutManager);
mAdapter = new RecyclerViewAdapter(getResources().getStringArray(R.array.numbers));
mRecyclerView.setAdapter(mAdapter);

Полный код класса MainActivity должен выглядеть так:

public class MainActivity extends AppCompatActivity {
    private Toolbar mToolbar;
    private RecyclerView mRecyclerView;
    private RecyclerViewAdapter mAdapter;
    private CollapsingToolbarLayout mCollapsingToolbar;
    private StaggeredGridLayoutManager mGridLayoutManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.anim_toolbar);
        setSupportActionBar(mToolbar);
        mCollapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
        mCollapsingToolbar.setTitle(getString(R.string.numbers));
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        mGridLayoutManager = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mRecyclerView.setLayoutManager(mGridLayoutManager);
        mAdapter = new RecyclerViewAdapter(getResources().getStringArray(R.array.numbers));
        mRecyclerView.setAdapter(mAdapter);
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.header);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                int mutedColor = palette.getLightMutedColor(R.attr.colorPrimary);
                mCollapsingToolbar.setContentScrimColor(mutedColor);
            }
        });
    }
}

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

Источник: Animated toolbar: Android design support library

Просмотров: 5 359

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Ваш комментарий будет опубликован после модерации