浅谈TabLayout(ViewPager+Tab联动)

google发布了的Android Support Design库中提供了TabLayout

通过TabLayout+ViewPager实现导航栏效果,点击Tab ，ViewPager跟随变化，滑动ViewPager，Tab跟随变化

看效果图：

通过一个Demo来了解TabLayout的简单使用（Android Studio开发）,代码中都有注释了，很简单

1、build.gradle文件中加入

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

2、写Xml文件，注意TabLayout的三个属性

app:tabIndicatorColor="#0f0"                每个tab下方的下划线的颜色

app:tabSelectedTextColor="#00f"             被选中的tab的文本颜色

app:tabTextColor="#f00"                     未被选中的tab的文本颜色

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

     xmlns:app="http://schemas.android.com/apk/res-auto"

     android:layout_height="match_parent"

     android:orientation="vertical"

     tools:context=".MainActivity">

     <android.support.design.widget.TabLayout

         android:id="@+id/tablayout"

         android:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:background="#777"

         app:tabIndicatorColor="#0f0"

         app:tabSelectedTextColor="#00f"

         app:tabTextColor="#f00"

         />

     <android.support.v4.view.ViewPager

         android:id="@+id/viewpager"

         android:layout_width="fill_parent"

         android:layout_height="0dp"

         android:layout_weight="1"

         android:background="#cccc"

         />

 </LinearLayout>

activity_main.xml

3、创建4个fragment

这里只创建一个，其他三个类似

 package com.xqx.com.tablayoutdemo;

 import android.os.Bundle;

 import android.support.v4.app.Fragment;

 import android.view.LayoutInflater;

 import android.view.View;

 import android.view.ViewGroup;

 /**

  * A simple {@link Fragment} subclass.

  */

 public class OneFragment extends Fragment {

     public OneFragment() {

         // Required empty public constructor

     }

     @Override

     public View onCreateView(LayoutInflater inflater, ViewGroup container,

                              Bundle savedInstanceState) {

         // Inflate the layout for this fragment

         return inflater.inflate(R.layout.fragment_one, container, false);

     }

 }

OneFragment

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

     xmlns:tools="http://schemas.android.com/tools"

     android:layout_width="match_parent"

     android:layout_height="match_parent"

     android:orientation="vertical"

     tools:context="com.xqx.com.tablayoutdemo.OneFragment">

     <!-- TODO: Update blank fragment layout -->

     <TextView android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:layout_gravity="center"

         android:gravity="center"

         android:text="第一个fragment界面" />

 </LinearLayout>

fragment_one

4、创建ViewPager的适配器

 package com.xqx.com.tablayoutdemo;

 import android.support.v4.app.Fragment;

 import android.support.v4.app.FragmentManager;

 import android.support.v4.app.FragmentPagerAdapter;

 import java.util.List;

 public class MyAdapter extends FragmentPagerAdapter{

     private List<Fragment> fragments;           //fragment集合

     private List<String> titles;                //tab标题集合

     public MyAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {

         super(fm);

         this.fragments = fragments;

         this.titles = titles;

     }

     @Override

     public Fragment getItem(int position) {

         return fragments.get(position);

     }

     @Override

     public int getCount() {

         int ret = 0;

         if (fragments!=null && fragments.size()!=0){

             ret = fragments.size();

         }

         return ret;

     }

     @Override

     public CharSequence getPageTitle(int position) {

         return titles.get(position);

     }

 }

MyAdapter.java

5、MainActivity.java

 package com.xqx.com.tablayoutdemo;

 import android.support.design.widget.TabLayout;

 import android.support.v4.app.Fragment;

 import android.support.v4.app.FragmentActivity;

 import android.support.v4.view.ViewPager;

 import android.os.Bundle;

 import java.util.ArrayList;

 import java.util.List;

 public class MainActivity extends FragmentActivity {

     private TabLayout tabLayout;

     private ViewPager viewPager;

     //四个fragment

     private OneFragment oneFragment;

     private TwoFragment twoFragment;

     private ThreeFragment threeFragment;

     private FourFragment fourFragment;

     //适配器

     private MyAdapter adapter;

     private List<Fragment> fragments;           //fragment集合

     private List<String> titles;                //tab标题集合

     @Override

     protected void onCreate(Bundle savedInstanceState) {

         super.onCreate(savedInstanceState);

         setContentView(R.layout.activity_main);

         tabLayout = (TabLayout) findViewById(R.id.tablayout);

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

         //创建四个Fragment对象

         oneFragment = new OneFragment();

         twoFragment = new TwoFragment();

         threeFragment = new ThreeFragment();

         fourFragment = new FourFragment();

         //将四个Fragment对象添加到集合中

         fragments = new ArrayList<>();

         fragments.add(oneFragment);

         fragments.add(twoFragment);

         fragments.add(threeFragment);

         fragments.add(fourFragment);

         //给Tab添加标题

         titles = new ArrayList<>();

         titles.add("one");

         titles.add("two");

         titles.add("three");

         titles.add("four");

         //创建适配器

         adapter = new MyAdapter(getSupportFragmentManager(),fragments,titles);

         //viewpager绑定适配器

         viewPager.setAdapter(adapter);

         //tabLayout绑定viewpager

         tabLayout.setupWithViewPager(viewPager);

     }

 }

MainActivity.java

-------------------------------------------------------------------------------------------------

其他相关：

浅谈FloatingActionButton(悬浮按钮)

浅谈DrawerLayout(抽屉效果)

浅谈GridLayout（网格布局）

浅谈RecyclerView(完美替代ListView,GridView)

秒客网

浅谈TabLayout(ViewPager+Tab联动)

相关文章