先来个效果:
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'