SmartTabLayout+PtrFrameLayout+ViewPager+Fragment简单实现

来源：互联网发布：知乎运营模式编辑：程序博客网时间：2024/05/22 13:44

先来个效果：
这里写图片描述
1.引入相关layout
//下拉刷新
compile ‘in.srain.cube:ultra-ptr:1.0.11’
//Tab切换
compile ‘com.ogaclejapan.smarttablayout:library:1.6.0@aar’
compile ‘com.ogaclejapan.smarttablayout:utils-v4:1.6.0@aar’
地址分别是：
https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh
https://github.com/ogaclejapan/SmartTabLayout

2.属性分析

SmartTabLayout：

属性描述 stl_indicatorAlwaysInCenter 如果设置为true，选中的标签总是显示在中心（如报刊亭的谷歌应用程序），默认为false stl_indicatorWithoutPadding 如果设置为真，画出没有填充标签的指标，默认为假 stl_indicatorInFront 在前面的下划线，默认的假画 stl_indicatorInterpolation 指标的行为：: ‘linear’ or ‘smart’ stl_indicatorGravity 指示器的位置: ‘bottom’ or ‘top’ or ‘center’, default ‘bottom’ stl_indicatorColor 指示剂颜色 stl_indicatorColors 该指标的多个颜色，可以设置每个标签的颜色 stl_indicatorThickness 指标的厚度 stl_indicatorWidth 指标的宽度(width), default ‘auto’ stl_indicatorCornerRadius 圆角半径的指示器 stl_overlineColor 顶线的颜色 stl_overlineThickness 顶线厚度 stl_underlineColor 底线的颜色 stl_underlineThickness 底线的厚度 stl_dividerColor 标签的颜色之间的分隔 stl_dividerColors 制表符分隔的多个颜色，可以设置每个标签的颜色 stl_dividerThickness 间隔(divider)的厚度 stl_defaultTabBackground 背景中每个选项卡。一般来说，设置statelistdrawable stl_defaultTabTextAllCaps 如果设置为真，所有标签的标题将是大写的，default true stl_defaultTabTextColor 默认的选项卡的文本颜色 stl_defaultTabTextSize 默认的选项卡的文本大小 stl_defaultTabTextHorizontalPadding 默认情况下包含的选项卡的文本布局填充 stl_defaultTabTextMinWidth tab最小宽度 stl_customTabTextLayoutId 布局标识自定义选项卡。如果不指定布局，使用默认选项卡 stl_customTabTextViewId 自定义选项卡布局中的文本视图标识。如果你不确定customtabtextlayoutid，不工作 stl_distributeEvenly 如果设置为真，每个标签都有相同的权重, default false stl_clickable 如果设置为假，请禁用选项卡的选择, default true stl_titleOffset 如果设置为“auto_center，滑块位置的标签中会不断向中心。如果指定一个维度将它从左边偏移，默认24dp stl_drawDecorationAfterTab Draw the decoration(indicator and lines) after drawing of tab, default false 绘制标签后的装饰（指标和线）

PtrFrameLayout:
有6个参数可配置:
阻尼系数
cube_ptr:ptr_resistance=”1.7”
默认: 1.7f，越大，感觉下拉时越吃力。

触发刷新时移动的位置比例
cube_ptr:ptr_ratio_of_header_height_to_refresh=”1.2”
默认，1.2f，移动达到头部高度1.2倍时可触发刷新操作。

回弹延时
cube_ptr:ptr_duration_to_close=”300”
默认 200ms，回弹到刷新高度所用时间

头部回弹时间
cube_ptr:ptr_duration_to_close_header=”2000”
默认1000ms

刷新是否保持头部
cube_ptr:ptr_keep_header_when_refresh=”true”
默认值 true.

下拉刷新 / 释放刷新
cube_ptr:ptr_pull_to_fresh=”false”
默认为false释放刷新

也可以在java代码中配置

// the following are default settings
mPtrFrame.setResistance(1.7f);
mPtrFrame.setRatioOfHeaderHeightToRefresh(1.2f);
mPtrFrame.setDurationToClose(200);
mPtrFrame.setDurationToCloseHeader(1000);
// default is false
mPtrFrame.setPullToRefresh(false);
// default is true
mPtrFrame.setKeepHeaderWhenRefresh(true);

实现：

主Acitity

package com.demo.zx.zxokhttpfinal.ui.activity;import android.os.Bundle;import android.support.v4.view.ViewPager;import com.demo.zx.zxokhttpfinal.R;import com.demo.zx.zxokhttpfinal.base.BaseActivity;import com.demo.zx.zxokhttpfinal.ui.widget.fragment.PageFragment;import com.demo.zx.zxokhttpfinal.ui.widget.fragment.PageRecyclerFragment;import com.ogaclejapan.smarttablayout.SmartTabLayout;import com.ogaclejapan.smarttablayout.utils.v4.FragmentPagerItemAdapter;import com.ogaclejapan.smarttablayout.utils.v4.FragmentPagerItems;import butterknife.Bind;import butterknife.ButterKnife;import in.srain.cube.views.ptr.header.StoreHouseHeader;public class UltraPullActivity extends BaseActivity implements ViewPager.OnPageChangeListener{    public static final String TAG = UltraPullActivity.class.getSimpleName();    @Bind(R.id.viewpagertab)    SmartTabLayout viewpagertab;    @Bind(R.id.viewpager)    ViewPager viewpager;    private String mTitlePre;    private StoreHouseHeader header;    private FragmentPagerItemAdapter adapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_ultra_pull);        ButterKnife.bind(this);        initSmartTab();    }    private void initSmartTab() {        FragmentPagerItems.Creator creator = FragmentPagerItems.with(this);        creator.add("tile1", PageFragment1.class)                .add("tile2", PageFragment2.class);        adapter = new FragmentPagerItemAdapter(getSupportFragmentManager(), creator.create());        viewpager.setAdapter(adapter);        viewpagertab.setViewPager(viewpager);        viewpagertab.setOnPageChangeListener(this);    }    @Override    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    }    @Override    public void onPageSelected(int position) {    }    @Override    public void onPageScrollStateChanged(int state) {    }}

两个fragment：

public class PageFragment1 extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View root = inflater.inflate(R.layout.fragment_page, container, false);        ButterKnife.bind(this, root);        return root;}

public class PageFragment2 extends Fragment {    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,                             Bundle savedInstanceState) {        View root = inflater.inflate(R.layout.fragment_page, container, false);        ButterKnife.bind(this, root);        return root;}

activity_ultra_pull.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <com.ogaclejapan.smarttablayout.SmartTabLayout        android:id="@+id/viewpagertab"        android:layout_width="match_parent"        android:layout_height="48dp"        app:stl_indicatorAlwaysInCenter="true"        app:stl_indicatorWithoutPadding="false"        app:stl_indicatorInFront="false"        app:stl_indicatorInterpolation="smart"        app:stl_indicatorGravity="bottom"        app:stl_indicatorColor="#40C4FF"        app:stl_indicatorThickness="4dp"        app:stl_indicatorWidth="auto"        app:stl_indicatorCornerRadius="2dp"        app:stl_overlineColor="#4D000000"        app:stl_overlineThickness="0dp"        app:stl_underlineColor="#4D000000"        app:stl_underlineThickness="1dp"        app:stl_dividerColor="#4D000000"        app:stl_dividerThickness="1dp"        app:stl_defaultTabBackground="?attr/selectableItemBackground"        app:stl_defaultTabTextAllCaps="true"        app:stl_defaultTabTextColor="#FC000000"        app:stl_defaultTabTextSize="12sp"        app:stl_defaultTabTextHorizontalPadding="16dp"        app:stl_defaultTabTextMinWidth="0dp"        app:stl_distributeEvenly="false"        app:stl_clickable="true"        app:stl_titleOffset="24dp"        app:stl_drawDecorationAfterTab="false"        />            <android.support.v4.view.ViewPager                android:id="@+id/viewpager"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:layout_below="@id/viewpagertab"                /></LinearLayout>

fragment_page1.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.demo.zx.zxokhttpfinal.ui.widget.fragment.PageFragment">    <in.srain.cube.views.ptr.PtrFrameLayout        android:id="@+id/store_house_ptr_frame"        xmlns:cube_ptr="http://schemas.android.com/apk/res-auto"        android:layout_width="match_parent"        android:layout_height="match_parent"        cube_ptr:ptr_resistance="1.7"        cube_ptr:ptr_ratio_of_header_height_to_refresh="1.2"        cube_ptr:ptr_duration_to_close="300"        cube_ptr:ptr_duration_to_close_header="2000"        cube_ptr:ptr_keep_header_when_refresh="true"        cube_ptr:ptr_pull_to_fresh="false" >        <GridView            android:id="@+id/gv_game"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layoutAnimation="@anim/anim_layout"            android:numColumns="2"            />    </in.srain.cube.views.ptr.PtrFrameLayout></FrameLayout>

fragment_page2.xml 同page1
build.gradle

    //下拉刷新    compile 'in.srain.cube:ultra-ptr:1.0.11'    //Tab切换    compile 'com.ogaclejapan.smarttablayout:library:1.6.0@aar'    compile 'com.ogaclejapan.smarttablayout:utils-v4:1.6.0@aar'    //compile 'com.ogaclejapan.smarttablayout:utils-v13:1.6.0@aar'    compile 'cn.finalteam:okhttpfinal-dm:1.2.2'    compile 'com.jakewharton:butterknife:7.0.1'

1 0