TabLayout实现标题栏viewpager与Fragment联动，标题栏下面有指示器（小横线）

首先这是第三工具，比上次的HorizontalScrollView＋viewpager 实现新闻客户端头条简单的多

1：首先导入一个jar包 com.android.support:design:25.2.0

2：主页面布局

1. app:tabIndicatorColor="@color/white"                 // 下方滚动的下划线颜色  
2. app:tabSelectedTextColor="@color/gray"               // tab被选中后，文字的颜色  
3. app:tabTextColor="@color/white"                      // tab默认的文字颜色  

< LinearLayout

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

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

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

android :id= "@+id/activity_main"

android :layout_width= "match_parent"

android :layout_height= "match_parent"

android :orientation= "vertical"

>

< android.support.design.widget.TabLayout

android :id= "@+id/tablayout"

android :layout_width= "match_parent"

android :layout_height= "wrap_content"

app :tabIndicatorColor= "@color/white"

app :tabSelectedTextColor= "@color/black"

app :tabTextColor= "@color/white"

android :background= "#ba1010" ></ android.support.design.widget.TabLayout >

< android.support.v4.view.ViewPager

android :id= "@+id/Fragment_pager"

android :layout_width= "match_parent"

android :layout_height= "wrap_content" >

< FrameLayout

android :id= "@+id/myframent"

android :layout_width= "match_parent"

android :layout_height= "wrap_content" ></ FrameLayout >

</ android.support.v4.view.ViewPager >

</ LinearLayout >

3：主页面调用

package com.example.demotablayout;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.ViewPager;

import android.os.Bundle;

public class MainActivity extends FragmentActivity {

private TabLayout mTabLayout ;

private ViewPager mVp ;

// 标题数组

private String[] title = new String[]{ " 今日 " , " 明星 " , " 新闻 " , " 啦啦 " ,

" 图片 " , " 科技 " , " 汽车 " , " 体育 " , " 头条 " };

//Fragment 数组

private String[] ffArray = new String[]{ "gj" , "ss" , "cj" , "kj" ,

"js" , "ty" , "yl" , "gn" , "shehui" };

@Override

protected void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);

setContentView(R.layout. activity_main );

initview(); // 找控件

setListener(); // 设置监听

}

private void setListener() {

// 实例化适配器

MyPageradapter adapter = new MyPageradapter(getSupportFragmentManager(), title , ffArray );

// 给 viewpager 设置适配器

mVp .setAdapter(adapter);

// 设置 TabLayout 的模式

mTabLayout .setTabMode(TabLayout. MODE_FIXED );

// 联动，设置 tablayout 与 viewpager 联动

mTabLayout .setupWithViewPager( mVp );

}

// 初始化控间

private void initview() {

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

mVp = (ViewPager) findViewById(R.id. Fragment_pager );

}

}

4：fragment

package com.example.demotablayout;

import android.os.Bundle;

import android.support.annotation.Nullable ;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

public class NewsFragment extends Fragment {

@Override

public void onCreate( @Nullable Bundle savedInstanceState) {

super .onCreate(savedInstanceState);

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

// 自定义控件，用来测试数据

TextView textView = new TextView(getActivity());

// 得到内容

Bundle bundle = getArguments();

// 得到绑定的数据（ key 值）

String title = bundle.getString( "title" );

// 设置给 textview

textView.setText(title);

return textView;

}

// 定义静态方法用来传值

public static NewsFragment getInstance(String title){

NewsFragment newsFragment = new NewsFragment();

// 实例化 bundle ，用 bundle 传值

Bundle bundle= new Bundle();

// 绑定数据

bundle.putString( "title" ,title);

// 设置内容，参数是 bundle ，

newsFragment.setArguments(bundle);

return newsFragment;

}

}

5：适配器

package com.example.demotablayout;

import android.content.Context;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

public class MyPageradapter extends FragmentPagerAdapter {

// 传过来的标题数组

private String[] title ;

// 传过来的 frament 数组

private String[] ffArray ;

// 构造器

public MyPageradapter(FragmentManager fm, String[] title, String[] ffArray) {

super (fm);

this . title = title;

this . ffArray = ffArray;

}

@Override

public Fragment getItem( int position) {

return NewsFragment. getInstance ( ffArray [position]);

}

@Override

public int getCount() {

return ffArray . length ;

}

//CharSequence ：字符序列 ；用来设置当前选中标题

@Override

public CharSequence getPageTitle( int position) {

return title [position];

}

}