Использование раздвижных вкладок с панелью инструментов - программирование

Использование раздвижных вкладок с панелью инструментов

Я начал меняться от использования ActionBarActivity до AppCompatActivity, но я также начал использовать Toolbar, а не стандартный ActionBar.

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

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

Хотя я рассмотрел некоторые другие ответы на Qaru относительно этого, есть ли какой-либо встроенный способ его изменения для поддержки с помощью Toolbar. Если да, не могли бы вы точно объяснить, как я буду менять его? Как изменились бы устаревшие методы, такие как onTabSelected?

Кроме того, я заметил, что приложение Google Play Music имеет то, что выглядит как расширенная панель инструментов/раздел под вкладками (см. это изображение для того, что я есть говоря о). Как я смогу иметь такой тип макета?

Спасибо заранее.

4b9b3361

Ответ 1

Итак, после нескольких дней много исследований и просмотра GitHub я, наконец, смог решить мою проблему.

Шаги по обновлению вкладок ActionBar на вкладках панели инструментов с помощью AppCompatActivity:


ОБНОВЛЕНИЕ: после пятницы 29 мая 2015 года:

К счастью, использование TabLayout с Toolbar стало намного проще после объявления библиотеки поддержки дизайна Android в Google I/O 2015.
Нам больше не нужно загружать пользовательские классы просмотра, и это то, что Google действительно должен был сделать давно.

Из Опубликовать блог разработчиков Android в блоге поддержки дизайна Android:

Вкладки:

Переключение между различными видами в приложении через tabs не является новой концепцией материального дизайна, и они одинаково дома как верхний навигационный шаблон или для организации различных группировок контента в вашем приложении (скажем, разных жанров музыки).

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

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

Однако, если вы используете ViewPager для горизонтального подкачки между вкладками, вы можете создавать вкладки непосредственно из PagerAdapter s getPageTitle(), а затем соедините их вместе, используя setupWithViewPager(). Это гарантирует, что события выбора табуляции обновят ViewPager и изменения страницы обновят выбранную вкладку.


До ввода/вывода Google 2015:

Во-первых, я загрузил SlidingTabLayout.java и SlidingTabStrip.java из приложения Google I/O Conference на GitHub. Это будут представления, которые будут использоваться в макете вкладок, поэтому я создал папку с другими моими действиями Java под названием "view" и разместил их там.

Затем я редактировал макет своей деятельности .xml, чтобы немного походить на это:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mycompany.myapp.MyActivity" >

    <!-- This is the Toolbar with the tabs underneath -->
    <LinearLayout android:id="@+id/detail_headerBar"
        style="@style/HeaderBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include android:id="@+id/detail_toolbar" layout="@layout/toolbar" />

        <com.mycompany.myapp.view.SlidingTabLayout
            android:id="@+id/sliding_tabs"
            android:background="?attr/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <!-- This is the ViewPager (which I had used before) and 
         it would be responsible for the swiping to change layouts -->
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/detail_headerBar"
        android:layout_above="@+id/detail_adView" />

    <!-- I also had an AdView in my layout,
         but this is not necessary for creating tab layouts -->
    <com.google.android.gms.ads.AdView
        android:id="@+id/detail_adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/banner_ad_unit_id" >
    </com.google.android.gms.ads.AdView>

</RelativeLayout>

Строка, которая ссылается на Toolbar (<include android:id="@+id/detail_toolbar" layout="@layout/toolbar" />), ссылается на следующий макет (для тех, кто еще не знает, как использовать Toolbar):

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

И в обоих файлах макета .xml выше, ?attr/colorPrimary, относится к основному цвету моего приложения (которое я определил в стиле).

Кроме того, в первом макете стиль, который я упомянул как @style/HeaderBar, относится к следующему:

<style name="HeaderBar">
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
    <!-- You may have to override this in a v21 version of this file -->
</style>

Прежде чем приступить к настройке макетов в Java, я должен был обязательно изменить имена пакетов в SlidingTabLayout.java и SlidingTabStrip.java, соответствующие тому, где они были размещены. В моем случае я использовал: package com.mycompany.myapp.view; в обоих этих файлах.

Теперь, в моем Activity (который расширялся AppCompatActivity), я сначала добавил следующее в методе onCreate:

Toolbar toolbar = (Toolbar) findViewById(R.id.detail_toolbar);
setSupportActionBar(toolbar);

Это было бы неприемлемо для отображения Toolbar.

Затем я настраиваю части ViewPager и SlidingTabLayout:

mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_line));   
mSlidingTabLayout.setDistributeEvenly(true);
mSlidingTabLayout.setViewPager(mViewPager);

Цвет "tab_line" был цветом, который я обозначил в color.xml, который будет цветом индикатора строки вкладок. Также обратите внимание, что перечисленные выше переменные были глобальными, которые я определил ранее в этом действии:

SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;

Последнее, что нужно сделать, это настроить ViewPagerAdapter, который я назвал eariler. Это будет зависеть от изменения страницы в зависимости от выбранной вкладки. Я использовал следующее:

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getCount() {
        // Returns the number of tabs
        return 3;
    }

    @Override
    public Fragment getItem(int position) {
        // Returns a new instance of the fragment
        switch (position) {
            case 0:
                return new FragmentOne();
            case 1:
                return new FragmentTwo();
            case 2:
                return new FragmentThree();
        }
        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Locale l = Locale.getDefault();
        switch (position) {
            case 0:
                return getString(R.string.title_section1).toUpperCase(l);
            case 1:
                return getString(R.string.title_section2).toUpperCase(l);
            case 2:
                return getString(R.string.title_section3).toUpperCase(l);
        }
        return null;
    }
}

Надеюсь, это был достаточно полный ответ для тех, кто испытывает те же проблемы, что и я, при переключении с ActionBarActivity на AppCompatActivity и начиная с Toolbar вместо ActionBar. Если есть что-то непонятное, не стесняйтесь комментировать ниже.