之前想实现一下就觉得这里面的关系好复杂,实现之后又理了理关系就觉得不是那么麻烦了…技术这个东西就是会者不难难者不会吧,为了把关系理的更透彻一些,就写这么一篇博客吧,用最简单的实现方式来实现这个东西,然后很感谢https://blog.csdn.net/wuyinlei/article/details/50571500这篇博客,虽然有一些地方有错误,但类和界面展示的顺序很舒服,能顺着一步步理到最后。
compile 'com.android.support:design:26.+'
这里根据每个人的依赖关系,后面的版本应该是不一样的,如果写的不对会直接报错。
我不太清楚最新版本是什么,为了图省事就暂时这么写了,按照AS给的提示这样写是不推荐的…
需要三个以上的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: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.TabLayout android:id="@+id/f_tablayout" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android: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,由于官方提供的类是抽象类,所以需要我们实现并重写其中的两个抽象方法
MainActivity.java
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_tabs); //主Activity加载主界面文件,主界面文件中的fragment通过class的路径找到相应的Fragment类 } }
这里我没有添加太多的变化,按照之前参照的那篇博客复制过来的。
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); } @Override public Fragment getItem(int position) { return mFragments.get(position); } /** * Return the number of views available. * 返回一个可以用的view的个数 * * @return */ @Override public 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 */ @Override public 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 */ @Override public CharSequence getPageTitle(int position) { return titles[position]; } }
这个类是相对逻辑最复杂的一部分了,但同样,实现了后就基本不会再有改动了,套路比较死,这里大多也是参照着之前提到的博客
MainEntry.java
public class MainEntry extends Fragment {//这个类的用途是加载fragment_container.xml //分别对应`fragment_container.xml`中的两个组件 private TabLayout tabLayout; private ViewPager viewPager; //用于装实际的一个个tab private List<Fragment> fragments; //标题 private String[] titles = {"1","2","3"}; //适配器 private FixedPagerAdapter fixedPagerAdapter; @Nullable @Override public 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集合传给adapter fixedPagerAdapter.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绑定ViewPager tabLayout.setupWithViewPager(viewPager); } }
基本没什么变化,这里我稍微简化了一下
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.xml private 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; } @Override public 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; } }