琢磨了两天,看了各种教程和文章,终于有所领悟,哈哈哈哈,脑子笨我也很无奈
总结下过程:
一、创建布局,<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();
}
}