SmartTabLayout+PtrFrameLayout+ViewPager+Fragment简单实现

先来个效果:

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'

你可能感兴趣的:(viewpager,smartTab)