Android_TabLyout的使用详解

//根据版本添加

//添加导包  com.android.support:design:26.0.0-alpha1

//Mainactivity内容

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<String> datas = new ArrayList<String>();
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//获取控件
        tabLayout = (TabLayout) findViewById(R.id.tas);
        viewPager = (ViewPager) findViewById(R.id.vp);
//横向滑动的集合
        datas.add("推荐");
        datas.add("要闻");
        datas.add("娱乐");
        datas.add("科技");
        datas.add("汽车");
        datas.add("体育");
        datas.add("图片");
        datas.add("动漫");
        datas.add("社会");
        datas.add("游戏");
//适配器
        vpsp vpsp = new vpsp(getSupportFragmentManager());
        viewPager.setAdapter(vpsp);
//进行关联
        tabLayout.setupWithViewPager(viewPager);  
 }    

	class vpsp extends FragmentPagerAdapter{
	//有参数的构造        
	public vpsp(FragmentManager fm) {   
	         super(fm);        
		}
	//返回选项卡的文本 ，，，添加选项卡
        @Override        
	public CharSequence getPageTitle(int position) {            
	return datas.get(position);        
		}
	//创建fragment对象并返回
        @Override        
	public Fragment getItem(int position) {            
		content content = new content();            
		Bundle bundle = new Bundle();            
		bundle.putString("name",datas.get(position));            
		content.setArguments(bundle);            
		return content;        }
	//返回数量
        @Override
        public int getCount() {
            return datas.size();
        }
    }
}

//Main的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.example.chenxu20171014.MainActivity">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/tas"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabTextColor="@color/colorPrimary"
        >

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp"
        android:layout_below="@+id/tas"
        >
    </android.support.v4.view.ViewPager>

</LinearLayout>

//介绍一下常用的tablayout中的XML用到的几个属性

        //底部tab条的颜色
        app:tabIndicatorColor="#a05"
        //底部条的高度
        app:tabIndicatorHeight="4dp"
        //滑动到对应tab的文字颜色
        app:tabSelectedTextColor="#000"
        //为滑动到tab的文字颜色
        app:tabTextColor="#fff9"

//content的内容这是一个frament

public class content extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View inflate = View.inflate(getActivity(), R.layout.contentlayout, null);
        TextView cte = inflate.findViewById(R.id.cte);
        Bundle arguments = getArguments();
        String name = arguments.getString("name");
        Log.e("chen", "onCreateView: ------"+name );
        cte.setText(name);
        return inflate;
    }
}

//contentlayout的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/cte"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="dfxcvnxcv"
        android:textColor="@color/colorAccent"/>
</LinearLayout>