当前位置: 代码迷 >> 综合 >> Android开发:TabLayout+Fragment+ViewPager实现总结
  详细解决方案

Android开发:TabLayout+Fragment+ViewPager实现总结

热度:14   发布时间:2024-01-09 15:34:46.0

  • 第一步:添加依赖
  • 第二部:准备layout
    • 主界面
    • “容器”
    • 其他界面
  • 第二步:类的实现
    • Activity类
    • Adapter类
    • 容器Fragment类
    • Fragment类
  • 注意问题

之前想实现一下就觉得这里面的关系好复杂,实现之后又理了理关系就觉得不是那么麻烦了…技术这个东西就是会者不难难者不会吧,为了把关系理的更透彻一些,就写这么一篇博客吧,用最简单的实现方式来实现这个东西,然后很感谢https://blog.csdn.net/wuyinlei/article/details/50571500这篇博客,虽然有一些地方有错误,但类和界面展示的顺序很舒服,能顺着一步步理到最后。

第一步:添加依赖

compile 'com.android.support:design:26.+'

这里根据每个人的依赖关系,后面的版本应该是不一样的,如果写的不对会直接报错。

我不太清楚最新版本是什么,为了图省事就暂时这么写了,按照AS给的提示这样写是不推荐的…

第二部:准备layout

需要三个以上的layout,其中一个是主界面用于加载“容器”(我自己起的名,Android素养不够..好多技术说不出实际的名字),一个用于做fragment的容器,并”被主界面加载”,剩下的为fragment容器装载用到的界面,相当于一个个tab页的内容

主界面

layout_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"><FrameLayout  android:layout_width="match_parent"android:layout_height="match_parent"><fragment  android:id="@+id/fragment_id" android:layout_width="match_parent"android:layout_height="match_parent"class="com.sailist.secondary.activitys.MainEntry"/></FrameLayout></LinearLayout>

“容器”

fragment_container.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/background_gray"><android.support.design.widget.TabLayoutandroid:id="@+id/f_tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPagerandroid:id="@+id/f_viewpager"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"></android.support.v4.view.ViewPager>
</LinearLayout>

其他界面

这里暂时用一个界面文件a.xml代替

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"><TextView  android:layout_width="wrap_content"android:layout_height="wrap_content" android:text="hello world"/>
</LinearLayout>

第二步:类的实现

类则需要三个,有三个是用于界面加载的,可以认为这三个类分别对应上述的三个界面,一个Activity类(主界面),一个Fragment类(被主界面加载的容器类),剩下的同样为Fragment类(被之前的容器Fragment类加载)

以及还有一个Adapter类,用于在容器类中处理/管理各个fragment,由于官方提供的类是抽象类,所以需要我们实现并重写其中的两个抽象方法

Activity类

MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_tabs);//主Activity加载主界面文件,主界面文件中的fragment通过class的路径找到相应的Fragment类}
}

Adapter类

这里我没有添加太多的变化,按照之前参照的那篇博客复制过来的。

FixedPagerAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.ViewGroup;import java.util.List;/*** Created by 若兰 on 2016/1/23.* 一个懂得了编程乐趣的小白,希望自己* 能够在这个道路上走的很远,也希望自己学习到的* 知识可以帮助更多的人,分享就是学习的一种乐趣* QQ:1069584784* csdn:http://blog.csdn.net/wuyinlei*/public class FixedPagerAdapter extends FragmentStatePagerAdapter {
    private String[] titles;/*** 设置标题** @param titles*/public void setTitles(String[] titles) {this.titles = titles;}private List<Fragment> mFragments;/*** 这个是在继承FragmentStatePagerAdapter会强制写入的** @param fm*/public FixedPagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {return mFragments.get(position);}/*** Return the number of views available.* 返回一个可以用的view的个数** @return*/@Overridepublic int getCount() {return mFragments.size();}/*** Create the page for the given position. The adapter is responsible for* adding the view to the container given here,* although it only must ensure this is done by the time it returns from finishUpdate(ViewGroup).* 这个同destroyItem()相反,是对于给定的位置创建视图,适配器往container中添加** @param container* @param position* @return*/@Overridepublic Object instantiateItem(ViewGroup container, int position) {Fragment fragment = null;fragment = (Fragment) super.instantiateItem(container,position);return fragment;}public List<Fragment> getFragments() {return mFragments;}public void setFragments(List<Fragment> fragments) {mFragments = fragments;}/*** 得到滑动页面的Title** @param position* @return*/@Overridepublic CharSequence getPageTitle(int position) {return titles[position];}
}

容器Fragment类

这个类是相对逻辑最复杂的一部分了,但同样,实现了后就基本不会再有改动了,套路比较死,这里大多也是参照着之前提到的博客

MainEntry.java

public class MainEntry extends Fragment {
    //这个类的用途是加载fragment_container.xml//分别对应`fragment_container.xml`中的两个组件private TabLayout tabLayout;private ViewPager viewPager;//用于装实际的一个个tabprivate List<Fragment> fragments;//标题private String[] titles = {
   "1","2","3"};//适配器private FixedPagerAdapter fixedPagerAdapter;@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view = inflater.inflate(R.layout.fragment_container,null);tabLayout = view.findViewById(R.id.f_tablayout);viewPager = view.findViewById(R.id.f_viewpager);initData();return view;}private void initData() {fixedPagerAdapter = new FixedPagerAdapter(getChildFragmentManager());fixedPagerAdapter.setTitles(titles);//标题fragments = new ArrayList<>();for (int i = 0; i < titles.length; i++) {fragments.add(PageFragment.newInstance(titles[i]));}//把要显示的fragment集合传给adapterfixedPagerAdapter.setFragments(fragments);/*** 设置tablayout的模式* 模式一:MODE_SCROLLABLE 可以滑动,显示很多个tab中的几个展示出来* 模式二:MODE_FIXED Fixed tabs display all tabs concurrently 展示出所有的,适合三四个tab*/tabLayout.setTabMode(TabLayout.MODE_FIXED);//给viewPager设置适配器viewPager.setAdapter(fixedPagerAdapter);//TabLayout绑定ViewPagertabLayout.setupWithViewPager(viewPager);}}

Fragment类

基本没什么变化,这里我稍微简化了一下

PageFragment.java

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;import com.sailist.secondary.R;public class PageFragment extends Fragment {
    //这个类的用途是加载a.xmlprivate static final String KEY = "EXTRA";private View mView;private String title;/*** 在这里我们提供一个静态的方法来实例化PageFragment* 在这里我们传入一个参数,用来得到title,然后我们拿到这个title设置给内容** @param extra* @return*/public static PageFragment  newInstance(String extra){//利用bundle传值Bundle bundle = new Bundle();bundle.putString(KEY,extra);//实例化PageFragment fragment = new PageFragment();fragment.setArguments(bundle);return fragment;}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {Bundle bundle = getArguments();if (bundle != null) {title = bundle.getString(KEY);}if (mView == null) {mView = inflater.inflate(R.layout.a, container, false);}return mView;} 
}

注意问题

容器中fragment必须加id,否则会报错

android Caused by: java.lang.IllegalArgumentException: Binary XML file line #7: Must specify unique
  相关解决方案