作成方法Androidページスワイプビューでタブ付きスタイル

Question

このようなタブの例が欲しい

私は検索しましたが、ちょうどこれを得ました。

viewpageindicator

このソースを使用できませんでした。誰かがスライドオプション付きのタブの別の例を教えてもらえますか。
viewpageindicatorは、Google Playタブと同じではないと思います。

Google Playのページをスクロールすると、スクロール中にタブの下の行が移動しますが、viewpageindicatorでは移動しません。

ありがとうございました

Answer 1

この記事 （タブで動作するAndroid Material Design）公開日2015年9月13日タブページを作成します。

たとえば、固定タブの作成

タブの数が限られている場合は、固定タブを使用する必要があります。これらのタブは位置が固定されています。 AndroidデザインサポートライブラリCoordinatorLayout、AppBarLayout、TabLayoutなどの多くの新しい要素が導入されました。カバーしません。これらはすべてこの記事の議題ではないので。

メインアクティビティのレイアウトファイル（_activity_main.xml_）を開き、以下のレイアウトコードを追加します。

_app:tabMode_ –タブレイアウトのモードを定義します。この場合、値は「固定」する必要があります

activity_main.xml

_<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_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />
</Android.support.design.widget.CoordinatorLayout>
_

_MainActivity.Java_を開き、以下の変更を行います。

tabLayout.setupWithViewPager() – ViewPagerをTabLayoutに割り当てます。

setupViewPager() –適切なフラグメントとタブ名を設定して、タブの数を定義します。

ViewPagerAdapter –カスタムアダプタークラスはビューページャーに必要なフラグメントを提供します。 MainActivity.Java

_package info.androidhive.materialtabs.activity;

import Android.os.Bundle;
import Android.support.design.widget.TabLayout;
import Android.support.v4.app.Fragment;
import Android.support.v4.app.FragmentManager;
import Android.support.v4.app.FragmentPagerAdapter;
import Android.support.v4.view.ViewPager;
import Android.support.v7.app.AppCompatActivity;
import Android.support.v7.widget.Toolbar;

import Java.util.ArrayList;
import Java.util.List;

import info.androidhive.materialtabs.R;
import info.androidhive.materialtabs.fragments.OneFragment;
import info.androidhive.materialtabs.fragments.ThreeFragment;
import info.androidhive.materialtabs.fragments.TwoFragment;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

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

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

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

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

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new OneFragment(), "ONE");
        adapter.addFragment(new TwoFragment(), "TWO");
        adapter.addFragment(new ThreeFragment(), "THREE");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

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

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}
_

ここでアプリを実行します。タブ間のスワイプ機能で表示されるタブを確認できるはずです。

Answer 2

まず、viewpagerを使用してxmlレイアウトファイルを作成する必要がありますAndroid.support.v4.view.ViewPager

次に、メインアクティビティでこのレイアウトを拡張し、アクティビティが実装されていることを確認します

Android.support.v7.app.ActionBar.TabListenerたとえば、4つのタブが必要な場合、作成します

4つの異なるフラグメント。に基づいてこれらのフラグメントを容易にする共通アダプターを作成します

選択したタブ。

コードスニペットを使用した簡単な例を次に示します http://www.feelzdroid.com/2014/10/Android-action-bar-tabs-swipe-views.html

注：上記の例は、Android support libでうまく機能します。

以前のバージョンのAndroid電話の互換性

それが役に立てば幸い。

ありがとう

Answer 3

似たようなものを実装したとき、クラスという意味で、もっとうまくやった。 workingというパッケージにアダプターを作成しました。

コードは次のとおりです。

public class TabsPagerAdapter extends FragmentPagerAdapter {

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

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:
          return new WorkingFragment();
        //You can add as many fragments as you wish here by adding the cases and calling the different fragments.
        }      
        return null;
    }

    @Override
    public int getCount() {
        // get item count - equal to number of tabs. 4 is only the number of fragments I had used.
        return 4;
    }
}

次に、この例でWorkingFragmentという新しいクラスを作成する必要があります。きれいなコーディングのために、メインパッケージにこのクラスを作成しました。

以下は、フラグメントのコードです。

public class NewEventFragment extends Fragment {

    View rootView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    //reference the xml file containing the view with all the code here.
    }
}

MainActivityで、あるタブから別のタブに変更する機能を作成する必要があります。私の場合、これをメインパッケージに含めていました。

以下は、MainActivityクラスのコードです。

public class MainActivity extends FragmentActivity implements ActionBar.TabListener {

    private ViewPager ViewPager;
    private TabsPagerAdapter SectionsPagerAdapter;
    private ActionBar actionBar;

    //Include the name for the tabs in this array. Make sure the number of elements in this string matches the number of views you will have in your app. 
    private String[] tabs = {};

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

     // Initialisation
        ViewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        SectionsPagerAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        ViewPager.setAdapter(SectionsPagerAdapter);
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 

     // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name).setTabListener(this));
        }

        ViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, Android.app.FragmentTransaction ft) {

    }

    @Override
    public void onTabSelected(Tab tab, Android.app.FragmentTransaction ft) {
        ViewPager.setCurrentItem(tab.getPosition());

    }

    @Override
    public void onTabUnselected(Tab tab, Android.app.FragmentTransaction ft) {
    }
} 

これがあなたのアプリに必要な機能を達成するのに役立つことを願っています:)

Answer 4

フラグメントタブを操作する簡単な方法

    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

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

作成してから

private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new 
        ViewPagerAdapter(getSupportFragmentManager());        
        adapter.addFrag(new RootDetailFragment(), "TAB 1");
        adapter.addFrag(new ShiftDetailFragment(), "TAB 2");        
        viewPager.setAdapter(adapter);
}


class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

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

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

レイアウトファイルに追加

 <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="#000"
        app:tabGravity="fill"
        app:tabMode="fixed" />
</Android.support.design.widget.AppBarLayout>