一.源码传送门（点击末尾阅读原文）
初衷是整理一个可以快速搭建该效果界面的一个框架，利于后期开发。
- 工具类XTab
- 测试代码androidxfragment tab viewpager
- 项目中使用非androidx版本XMusic
二.效果图
三.代码
非androidx版本
代码语言：javascript复制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的仅仅是引用上的差别
代码语言：javascript复制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：
...
<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：
代码语言：javascript复制...
<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中添加
代码语言：javascript复制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完成了预加载
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
代码语言：javascript复制com.xy.fragment I/fragment_00.java: [ (fragment_00.java:39)#onPause ] execute而关于viewpager的addOnPageChangeListener方法监听中
onPageScrolled是实时的滑动的距离的绘测
代码语言：javascript复制/**
* 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是滑动状态
/**
* 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值回传出来
代码语言：javascript复制XTab.addTab(mTabLayout,
mViewPager,
mFragment,
mTitle,
getSupportFragmentManager(),
2,
new XTab.onPageSelected() {
@Override
public void onPageSelected(int position) {
XToast.getInstance().Text("当前页面位置：" position).LayoutParamsY(750).show();
}
});
