安卓开发-SlidingTablayout案例（小白系列）

琢磨了两天，看了各种教程和文章，终于有所领悟，哈哈哈哈，脑子笨我也很无奈

总结下过程：

一、创建布局，<slidingtablayout>和<viewpager>

二、创建要显示在viewpage中的xml文件

三、设置xml对应的fragment类，onCreateView方法中绑定对应的xml文件

四、在Mainactivity中设置，title和要显示的fragment都存入列表，使用Adapter设置要显示标题和内容，使用setViewpager方法绑定标题和下方的viewpage

遇到的坑点：

1、经常遇到Fragment出现红色下划线，看报错信息是需要的Fragment和使用的Fragment不匹配，怀疑是导包错误，一定要导入android.support.v4.app.Fragment之前在学习Tablayout的时候是导入的android.app.Fragment，这点注意

2、效果有了，但是不能通过点击标题切换内容，原因是布局出现问题，viewpage的内容已经覆盖了slidingtablayout的区域

详情如下：

引用当下最火的第三方库：flycotablayout，不做过多介绍，githut地址：

效果图：

案例分析：（仅针对此案例）

1、首先引入第三方库：这里直接在gradle文件中加入以下代码即可：注：如果已经存在的可以不加，不要使用compile关键字

dependencies{
    implementation 'com.android.support:support-v4:27.1.1'
    implementation 'com.nineoldandroids:library:2.4.0'
    implementation 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.0@aar'
}

2、从UI分析，我们需要的是一个上方存放标签，下方存放内容的页面，布局文件如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tl="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    //这里引入的是三方库的标签名，这里存放的是标签
    <com.flyco.tablayout.SlidingTabLayout
    android:id="@+id/sl"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="#6D8FB0"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    tl:tl_indicator_margin_left="2dp"
    tl:tl_indicator_margin_right="2dp"
    tl:tl_indicator_style="BLOCK">
    </com.flyco.tablayout.SlidingTabLayout>
    //这里是存放viewpager的地方，也就是存放下方内容的地方
    <android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/vp">
    </android.support.v4.view.ViewPager>

</LinearLayout>

3、我们现在要把viewpage填充数据，需要使用到fragment，之前学习fragment我们知道，一个fragment是对应一个xml布局文件的，所以我们需要创建两个xml布局文件和两个fragment，项目目录如图所示：

 

fragment1的如下：这里是用来填充的下方内容的，这里简单的就放了一个textview

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tv"
        android:text="123"
        android:gravity="center"/>
</android.support.constraint.ConstraintLayout>

4、编写myFragment：注意导入Fragment包的时候要使用android.support.v4.app.Fragment，而不能使用android.app.Fragment

package com.example.administrator.test_flyco;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class myFragment extends Fragment {
    private String title;
    private String content;
    private Context mCotent;
    private TextView textView;
    //定义onCreate方法，这里不用编写，但一定要有，创建即可
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
       //这里是填充viewpager的方法
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //把fragemen1这个xml布局文件填充到viewpage中    
        View view=inflater.inflate(R.layout.fragmen1,null);
        //找到我们fragment1中的tv标签并写入文字
        TextView tv=view.findViewById(R.id.tv);
        tv.setText("我是fragment页面1");
        return view;
    }
}

5、编写好了fragment我们在进到Mainactivity：

package com.example.administrator.test_flyco;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.example.administrator.test_flyco.utils.ViewFindUtils;
import com.flyco.tablayout.*;
import com.flyco.tablayout.listener.OnTabSelectListener;

import java.util.ArrayList;

//可以不用使用OnTabSelectListener接口
public class MainActivity extends AppCompatActivity implements OnTabSelectListener {
    private TextView textView;
    private ViewPager viewPager;
    //这里是将下方显示的fragment加到一个list当中，然后通过上方的标签来绑定这些内容
    private ArrayList<Fragment> mFragments = new ArrayList<>();
    //设置标题，如果标题有这么多，但是下方内容的fragment只有两个，那么标题也只会显示两个
    private final String[] mTitles = {
            "热门", "iOS", "Android"
            , "前端", "后端", "设计", "工具资源"
    };
    //声明适配器
    private MyAdapter md;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

            //把刚才编写好的fragment加到fragment的list中
            mFragments.add(new myFragment());
            mFragments.add(new myFragment2());
        
        //找到我们刚才在主页存放fragment的viewpager标签，id为vp   
        ViewPager vp=ViewFindUtils.find(view,R.id.vp);
        //获得我们的适配器，参数不能少，固定写法
        md=new MyAdapter(getSupportFragmentManager());
        //viewpage添加我们的适配器
        vp.setAdapter(md);
        //声明我们的标签栏，因为引用的第三方库，不声明的话是没法显示的
        SlidingTabLayout slidingTabLayout=(SlidingTabLayout)findViewById(R.id.sl);
        //把标签和我们的viewpager绑定，这样一个标签就对应了一个内容了
        slidingTabLayout.setViewPager(vp);
    }
    //编写适配器，继承FragmentPagerAdapter，引入父类方法，创建构造函数继承父类方法
    public class MyAdapter extends FragmentPagerAdapter{
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        //取得内容，从fragment的list中取得相应位置的fragment
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return mFragments.size();
        }
        //从mTitle中取得对应位置的title
        public CharSequence getPageTitle(int position){
            return mTitles[position];
        }
    }

    @Override
    //以下两个方法是引入了OnTabSelectListener接口需要编写的方法，没有引用接口可以不写
    public void onTabSelect(int position) {
        Toast.makeText(this,"ggg",Toast.LENGTH_LONG).show();
    }

    @Override
    public void onTabReselect(int position) {
        Toast.makeText(this,"qqq",Toast.LENGTH_LONG).show();
    }
}