web-dev-qa-db-ja.com

新しいツールバーでタブを使用する（AppCompat v7-21）

SupportActionBarをタブとカスタムActionBarテーマ（ http://jgilfelt.github.io/Android-actionbarstylegenerator/ で作成）で使用し、ユーザーが検索ビューを展開したときにのみタブを表示しました。

public boolean onMenuItemActionExpand(MenuItem item) {
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        return true;
    }
}

ActionBarからツールバーに移行しました。私のアプリは本当にAPI 9をサポートする必要があります。

このコードを使用してタブを追加する方法はありますか？：

Toolbar toolbar = (Toolbar) findViewById(R.id.new_actionbar);
setSupportActionBar(toolbar);
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

可能であれば、カスタムテーマを使用したり、ツールバーのスタイルを設定したりするにはどうすればよいですか？

ドキュメントでは、これは非推奨であり、別のタイプのナビゲーションを使用することを推奨しています。しかし、同じ機能を持つAndroidの他のコンポーネントは知りません。

手助け？

androidtabsandroid-support-libraryandroid-appcompatandroid-actionbar-compat
70
Leandro Hoffmann

API 21では、メソッドsetNavigationMode(ActionBar.NAVIGATION_MODE_TABS)は 非推奨 です。

2019年1月8日更新（Android Material Components）

2018年11月のAndroid Material Componentsの安定リリースにより、Googleは名前空間Android.support.designからcom.google.Android.materialにマテリアルコンポーネントを移動しました。
素材コンポーネントライブラリ （は、Androidのデザインサポートライブラリの代替品です。

依存関係をbuild.gradleに追加します。

dependencies { implementation ‘com.google.Android.material:material:1.0.0’ }

その後、新しい TabLayout を使用できます。

<androidx.constraintlayout.widget.ConstraintLayout>

     <com.google.Android.material.appbar.AppBarLayout   ...>

        <androidx.appcompat.widget.Toolbar  .../>


        <com.google.Android.material.tabs.TabLayout
         ...
         />

     </com.google.Android.material.appbar.AppBarLayout>

     <androidx.viewpager.widget.ViewPager 
        Android:id="@+id/viewpager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.constraintlayout.widget.ConstraintLayout>

コードは簡単です：

TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.setupWithViewPager(pager);

2015年5月29日更新（サポートライブラリ）

新しいDesign Support Libraryを使用すると、新しい TabLayout を使用できます。

この依存関係をbuild.gradleに追加するだけです

compile 'com.Android.support:design:22.2.0'

コードは非常に簡単です。

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

マテリアルデザインの多くの機能を実装するには、 CoordinatorLayout および AppBarLayout 内で使用する必要があります。

このようなもの：

 <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.support.design.widget.AppBarLayout
             Android:layout_height="wrap_content"
             Android:layout_width="match_parent">

         <Android.support.v7.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

         <Android.support.design.widget.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

     </Android.support.design.widget.AppBarLayout>

     <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

 </Android.support.design.widget.CoordinatorLayout>

OLD

別のパターンを使用できます。たとえば、googleio14で見ることができるのと同じ例を使用できます。

SlidingTabLayoutを使用するViewPagerを使用します。

ここで例を見つけることができます （sdkの例にあります）

ここで、Google io14の例を見つけることができます。

157
Gabriele Mariotti

おそらく今この質問に答えるのに少し遅れているが、私は 同様の質問に対する答え を書いていることに気付いた。これはDesign Support Libraryの使用とGoogle I/Oの前の両方をカバーしている。

以下に重要な部分を含めました。

TabLayoutでToolbarを使用することは、Android Design Support Libraryが発表されて以来、カスタムビュークラスをダウンロードする必要がなくなったため、はるかに簡単になりました。

Android Design Support LibraryのAndroid Developers 'Blogspot投稿 ：

タブ：

tabs を介してアプリの異なるビューを切り替えることは、マテリアルデザインの新しい概念ではなく、 トップレベルナビゲーションパターン またはコンテンツの異なるグループ化を整理するのと同じように自宅にありますアプリ内（たとえば、さまざまなジャンルの音楽）。

デザインライブラリの TabLayout は、ビューの幅がすべてのタブで均等に分割される固定タブと、タブが一定のサイズではなく水平にスクロールできるスクロール可能なタブの両方を実装します。タブはプログラムで追加できます。

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

ただし、タブ間の水平ページングに ViewPager を使用している場合、 PagerAdapter の getPageTitle（） から直接タブを作成できます。 setupWithViewPager()を使用して2つを接続します。これにより、タブ選択イベントがViewPagerを更新し、ページ変更が選択したタブを更新することが保証されます。

設計サポートライブラリを使用していない場合は、代わりに以下を実行する必要があります。

1。 GitHub上のGoogleのI/O会議アプリから SlidingTabLayout.Java および SlidingTabStrip.Java ファイルをダウンロードします。これらはタブレイアウトで使用されるビューになるため、「view」と呼ばれる他のJavaアクティビティを含むフォルダーを作成し、そこに配置しました。

2。SlidingTabLayoutを含めるようにレイアウトを編集します。

<LinearLayout
    Android:orientation="vertical"
    ... >

    <!-- This is the Toolbar with the tabs underneath -->
    <LinearLayout
        Android:orientation="vertical"
        ... >

        <include Android:id="@+id/my_toolbar" layout="@layout/toolbar" />

        <com.mycompany.myapp.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 you already should have if you have
        used tabs before) -->
    <Android.support.v4.view.ViewPager
        Android:id="@+id/view_pager"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

    ...

</LinearLayout>

Toolbar（<include Android:id="@+id/detail_toolbar" layout="@layout/toolbar" />）を参照する行は、Toolbarの作成に使用した別のXMLファイルを参照しています。

。パッケージの配置場所に応じて、SlidingTabLayout.JavaおよびSlidingTabStrip.Javaのパッケージ名を変更します。私の場合、これらのファイルの両方にpackage com.mycompany.myapp.view;のようなものを使用しました。使用しているIDEで示されているように、インポートを整理し、必要に応じて追加します。

4。Activity（AppCompatActivityを拡張していた）で、ToolbarメソッドでonCreateをセットアップします。

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

5。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;

6。最後に、以前に呼び出したViewPagerAdapterをセットアップします。これにより、選択されたタブに応じてページが変更されます。次のコードを使用しました。

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;
    }
}

上記で述べたように、これらのソリューションの詳細は ツールバーでスライドタブを使用することに関する別の質問 で入手できます。

14
Farbod Salamat-Zadeh