发表于 更新于 分类于 Changyan：

一.代码位置

初衷是整理一个可以快速搭建该效果界面的一个框架，利于后期开发。

二.引用

  1. 将JitPack存储库添加到您的构建文件中
    将其添加到存储库末尾的root build.gradle中：

    1
    2
    3
    4
    5
    6
    allprojects {
          repositories {
          ...
          maven { url 'https://jitpack.io' }
          }
    }

  2. 添加依赖项

    1
    2
    3
    4
    dependencies {
          ...
          implementation 'com.github.itemuse:XLib:Tag'
    }

  3. 初始化 Application中init

    1
    2
    3
    4
    5
    6
    7
    import cn.xy.library.XApp;
          ...
    @Override
    public void onCreate() {
          super.onCreate();
          XApp.init(this);
    }

三.代码

  • 非androidx版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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.design.widget.TabLayout;
import java.util.List;

public class XTab {
    public static void addTab(TabLayout tabLayout,
                              ViewPager viewPager,
                              final List<Fragment> fragment,
                              final List<String> title,
                              FragmentManager fragmentManager,
                              int offscreenPageLimit,
                              onPageSelected onPageSelected){
        /**
         * 预加载
         */
        viewPager.setOffscreenPageLimit(offscreenPageLimit);
        viewPager.setAdapter(new FragmentPagerAdapter(fragmentManager) {
            @Override
            public Fragment getItem(int position) {
                return fragment.get(position);
            }
            @Override
            public int getCount() {
                return fragment.size();
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return title.get(position);
            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {}

            @Override
            public void onPageSelected(int i) {
                onPageSelected.onPageSelected(i);}

            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });
        // TabLayout关联ViewPager
        tabLayout.setupWithViewPager(viewPager);
    }
    public interface onPageSelected{
        void onPageSelected(int position);
    }
}

  • androidx版本代码，与非android的仅仅是引用上的差别

1
2
3
4
5
6
7
8
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.tabs.TabLayout;

...

  • 使用

    • 布局
      非androidx：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      ...
          <android.support.design.widget.TabLayout
              android:layout_width="match_parent"
              app:tabGravity="fill"
              app:tabMode="fixed"
              android:layout_height="wrap_content">
          </android.support.design.widget.TabLayout>

          <android.support.v4.view.ViewPager
              android:layout_width="match_parent"
              android:layout_height="match_parent"/>
      ...
      androidx：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      ...
          <com.google.android.material.tabs.TabLayout
              android:layout_width="match_parent"
              app:tabGravity="fill"
              app:tabMode="fixed"
              android:id="@+id/_tab"
              android:layout_height="wrap_content">
          </com.google.android.material.tabs.TabLayout>

          <androidx.viewpager.widget.ViewPager
              android:id="@+id/_vp"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              />
      ...
    • activity中添加
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      private List<Fragment> mFragment;
          private List<String> mTitle;
          private TabLayout mTabLayout;
          private ViewPager mViewPager;
          private void initFragment() {
              mTabLayout = (TabLayout)findViewById(R.id.playview_tab);
              mViewPager = (ViewPager)findViewById(R.id.playview_midd_vp);
              mFragment = new ArrayList<>();
              mFragment.add(new fragment_00());
              mFragment.add(new fragment_11());
              mFragment.add(new fragment_22());
              mFragment.add(new fragment_33());
              mTitle = new ArrayList<>();
              mTitle.add("歌曲");
              mTitle.add("歌词");
              mTitle.add("歌手");
              mTitle.add("专辑");
              XTab.addTab(mTabLayout,
                      mViewPager,
                      mFragment,
                      mTitle,
                      getSupportFragmentManager(),
                      1,
                      new XTab.onPageSelected() {
                  @Override
                  public void onPageSelected(int position) {

                  }
              });
          }

  • 一些方法的讲解

    • viewPager中，viewPager.setOffscreenPageLimit(offscreenPageLimit);是设置应保留在页面两侧的页数，以花更少的时间进行布局
      经过打印可以，当我设置为2时，启动后前三个fragment走到了      onResume      完成了预加载

      1
      2
      3
      com.xy.fragment I/fragment_00.java: [ (fragment_00.java:27)#onResume ] execute
      com.xy.fragment I/fragment_11.java: [ (fragment_11.java:27)#onResume ] execute
      com.xy.fragment I/fragment_22.java: [ (fragment_22.java:28)#onResume ] execute

      而滑动到第四个时，第一个走了onpause

      1
      com.xy.fragment I/fragment_00.java: [ (fragment_00.java:39)#onPause ] execute

    • 而关于viewpager的addOnPageChangeListener方法监听中

onPageScrolled是实时的滑动的距离的绘测

1
2
3
4
5
6
7
8
9
10
/**
 * This method will be invoked when the current page is scrolled, either as part
 * of a programmatically initiated smooth scroll or a user initiated touch scroll.
 *
 * @param position 当前显示的第一页的位置索引。 如果positionOffset不为零，则页面position + 1将可见。
 * @param positionOffset Value from [0, 1) 指示与位置上的页面的偏移量。
 * @param positionOffsetPixels Value 以像素为单位的值，指示与位置的偏移量。
 */
void onPageScrolled(int position, float positionOffset, @Px int positionOffsetPixels);

  - onPageSelected是当前的页面位置
  - onPageScrollStateChanged是滑动状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * Indicates that the pager is in an idle, settled state. The current page
 * is fully in view and no animation is in progress.
 * 空闲状态
 */
public static final int SCROLL_STATE_IDLE = 0;

/**
 * Indicates that the pager is currently being dragged by the user.
 * 滑动状态
 */
public static final int SCROLL_STATE_DRAGGING = 1;

/**
 * Indicates that the pager is in the process of settling to a final position.
 * 滑动完成，自动完成调整状态
 */
public static final int SCROLL_STATE_SETTLING = 2;
  - 在XTab工具类中我仅仅把onPageSelected的position值回传出来

1
2
3
4
5
6
7
8
9
10
11
12
XTab.addTab(mTabLayout, 
                mViewPager,
                mFragment,
                mTitle, 
                getSupportFragmentManager(),
                2,
                new XTab.onPageSelected() {
            @Override
            public void onPageSelected(int position) {
                XToast.getInstance().Text("当前页面位置： "+position).LayoutParamsY(750).show();
            }
        });