如何使用Swipe视图实现android TabLayout设计支持libarary

Question

I am going to use android TabLayout design support library but i don't know how to use swipe view.

Here is my Code

XML:

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Java:

TabLayout tabLayout;

tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

Answer 1

A bit late to the party, but to do that you have to use ViewPager class and use fragments for each view (under a tab). then attach ViewPager to your TabLayout instance and bingo! you have your swiping tabLayout.

Here is some working code of mine using two tabs:

MyActivity.java:

super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
// Initializing tab and pager views
TabLayout tabLayout = (TabLayout) findViewById(R.id.my_tab_layout);
final ViewPager viewPager = (ViewPager) findViewById(R.id.my_view_pager);

// Making new tabs and adding to tabLayout
tabLayout.addTab(tabLayout.newTab().setText("First Tab"));
tabLayout.addTab(tabLayout.newTab().setText("Second Tab"));

// Adding fragments to a list
List<Fragment> fragments = new Vector<Fragment>();
fragments.add(Fragment.instantiate(this, MyFirstTabFragment.class.getName()));
fragments.add(Fragment.instantiate(this, MySecondTabFragment.class.getName()));

// Attaching fragments into tabLayout with ViewPager
viewPager.setAdapter(new SectionPagerAdapter(getSupportFragmentManager(), fragments));
tabLayout.setupWithViewPager(viewPager);

SectionPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;


public class SectionPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;

    public SectionPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "First Tab";
            case 1:
            default:
                return "Second Tab";
        }
    }
}

MyFirstTabFragment.java:

public class MyFirstTabFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Declare your first fragment here
        return inflater.inflate(R.layout.my_first_fragment_layout, container, false);
    }
}

MySecondTabFragment.java:

public class MySecondTabFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Declare your second fragment here
        return inflater.inflate(R.layout.my_second_fragment_layout, container, false);
    }
}

main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <!-- Declare android.support.v7.widget.Toolbar or... here -->

    <android.support.design.widget.TabLayout
            android:id="@+id/my_tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    <android.support.v4.view.ViewPager
            android:id="@+id/my_view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/my_tab_layout"/>
</RelativeLayout>

my_first_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent">
    <!-- Declare first tab layout here -->
</RelativeLayout>

my_second_fragment_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent">
    <!-- Declare second tab layout here -->
</RelativeLayout>

NOTE: Here we use ViewPager , Fragment , FragmentManager and FragmentPagerAdapter from support library v4.

Hope it helps.

Answer 2

Add this line to your java code :- tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

Or alternatively you can specify this in your xml code :- app:tabMode="scrollable"