TabLayout+ViewPage导航栏

TabLayout+ViewPage导航栏"/>

TabLayout+ViewPage导航栏

一：添加依赖

compile 'com.android.support:design:xx.1.1'

二：布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""xmlns:app=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><android.support.v4.view.ViewPager
        android:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:scrollbars="none"/><android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="50dp"app:tabGravity="fill"app:tabIndicatorHeight="0dp"app:tabMode="fixed"app:tabSelectedTextColor="#FF4081"app:tabTextColor="#000"/></LinearLayout>

三：创建Fragment。例子

public class FragmentOne extends Fragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_one, container, false);return view;}
}

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextView
        android:id="@+id/text"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="12311" />
</LinearLayout>

四：viewpage 设置Adapter（FragmentPageAdapter）

viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {private String[] mTitle = new String[]{"111", "222", "333", "444"};@Overridepublic Fragment getItem(int position) {switch (position) {case 1:return new FragmentTwo();case 2:return new FragmentThree();case 3:return new FragmentFour();}return new FragmentOne();}@Overridepublic int getCount() {return mTitle.length;}@Overridepublic CharSequence getPageTitle(int position) {return mTitle[position];}});

五：tablayout和viewpage进行关联

        tabLayout.setupWithViewPager(viewPager);one = tabLayout.getTabAt(0);two = tabLayout.getTabAt(1);three = tabLayout.getTabAt(2);four = tabLayout.getTabAt(3);one.setIcon(getResources().getDrawable(R.drawable.one));two.setIcon(getResources().getDrawable(R.drawable.one));three.setIcon(getResources().getDrawable(R.drawable.one));four.setIcon(getResources().getDrawable(R.drawable.one));

activity完整：

public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;private ViewPager viewPager;private TabLayout.Tab one, two, three, four;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViews();}private void initViews() {tabLayout = (TabLayout) findViewById(R.id.tabLayout);tabLayout.setTabMode(TabLayout.MODE_FIXED);viewPager = (ViewPager) findViewById(R.id.viewPager);viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {private String[] mTitle = new String[]{"111", "222", "333", "444"};@Overridepublic Fragment getItem(int position) {switch (position) {case 1:return new FragmentTwo();case 2:return new FragmentThree();case 3:return new FragmentFour();}return new FragmentOne();}@Overridepublic int getCount() {return mTitle.length;}@Overridepublic CharSequence getPageTitle(int position) {return mTitle[position];}});tabLayout.setupWithViewPager(viewPager);one = tabLayout.getTabAt(0);two = tabLayout.getTabAt(1);three = tabLayout.getTabAt(2);four = tabLayout.getTabAt(3);one.setIcon(getResources().getDrawable(R.drawable.one));two.setIcon(getResources().getDrawable(R.drawable.one));three.setIcon(getResources().getDrawable(R.drawable.one));four.setIcon(getResources().getDrawable(R.drawable.one));}
}