效果图:
这里的标题指示器引用的是GitHub上火爆的项目 :PagerSlidingTabStrip, 这里根据最新的项目需求实现根据listview的上下滑动,收起和显示出标题指示器
布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/fragment_recommend_list_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/fragment_recommend_list_tabs"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#FFFFFF"
android:overScrollMode="never"
android:textColor="@color/gray_979799_80"
android:textSize="16dp"
app:pstsDividerColor="@android:color/transparent"
app:pstsIndicatorColor="@color/red2"
app:pstsIndicatorHeight="0dp"
app:pstsSelectColor="@color/red2"
app:pstsTabBackground="@android:color/transparent"
app:pstsTabPaddingLeftRight="16dp"
app:pstsUnderlineColor="@android:color/transparent"
app:pstsUnderlineHeight="0.5dp" />
</RelativeLayout>
</RelativeLayout>
代码:
package com.miu.apps.miss.fragment;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ScrollView;
import com.astuetz.PagerSlidingTabStrip;
import com.miu.apps.miss.R;
import com.miu.apps.miss.views.RecommendView;
import com.yt.utils.DensityUtil;
/**
* yt make
* Created by Administrator on 2016/12/03.
* 图文推荐
*/
public class FragmentRecommend extends Fragment {
private Context mContext;
private ViewPager mViewPager;
public PagerSlidingTabStrip tabs;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_recommend_list, null);
mContext = getContext();
initData();
initView(view);
return view;
}
private void initView(View view) {
mViewPager = (ViewPager) view.findViewById(R.id.fragment_recommend_list_viewpager);
mViewPager.setOffscreenPageLimit(3);//设置缓存view 的个数(实际有3个,缓存2个+正在显示的1个)
RecommendLListViewPagerAdapter adapter = new RecommendLListViewPagerAdapter();
mViewPager.setAdapter(adapter);
// Bind the tabs to the ViewPager
tabs = (PagerSlidingTabStrip) view.findViewById(R.id.fragment_recommend_list_tabs);
tabs.setViewPager(mViewPager);
}
//精选,时尚,美妆,生活,剧情,音乐,创意
private String[] CLASSIFY = new String[]{CLASSIFY_CHOICENESS, CLASSIFY_FASHION, CLASSIFY_BEAUTY, CLASSIFY_LIVE, CLASSIFY_MUSIC, CLASSIFY_AUTHENTICATE, CLASSIFY_UNIQUE};
private static String CLASSIFY_CHOICENESS = " 每日精选 ";
private static String CLASSIFY_FASHION = " 风向 ";
private static String CLASSIFY_BEAUTY = " 美妆 ";
private static String CLASSIFY_LIVE = " 态度 ";
private static String CLASSIFY_MUSIC = " 榜样 ";
private static String CLASSIFY_AUTHENTICATE = " 鉴定 ";
private static String CLASSIFY_UNIQUE = " 别致 ";
private void initData() {
}
/**
* Viewpager adapter
*/
class RecommendLListViewPagerAdapter extends PagerAdapter {
@Override
public CharSequence getPageTitle(int position) {
return CLASSIFY[position];
}
@Override
public int getCount() {
return CLASSIFY.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
final RecommendView recommendView = new RecommendView(mContext, CLASSIFY[position]);
recommendView.mListview.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:// 按下
// 获取按下的时候的XY轴的位置
mDownX = event.getX();
mDownY = event.getY();
break;
case MotionEvent.ACTION_MOVE:// 移动
float moveY = event.getY();
float diffY = mDownY - moveY;// 计算Y轴滚动偏移量
float moveX = event.getX();
float diffX = mDownX - moveX;// 计算X轴滚动偏移量
if (diffX > diffY) {
if (isYetGliet) {
tabGlide(true);
}
} else if (diffY > diffX) {
if (diffY > 2) {
if (isYetUpgliet) {
tabGlide(false);
}
} else if (diffY < -2) {
if (isYetGliet) {
tabGlide(true);
}
}
}
// 更新DownXY的位置:
mDownY = moveY;
mDownX = moveX;
break;
case MotionEvent.ACTION_UP:// 抬起
break;
}
return false;
}
});
container.addView(recommendView);
return recommendView;
}
}
/**
* viewpager TAB 是否下滑还是上滑
*
* @param isGlide true 下滑 flase 上滑
*/
private void tabGlide(boolean isGlide) {
if (isGlide) {
ObjectAnimator animator = ObjectAnimator.ofFloat(tabs, "translationY", -DensityUtil.dip2px(mContext, 40), 0);
animator.setDuration(300);
animator.start();
isYetGliet = false;
isYetUpgliet = true;
} else {
ObjectAnimator animator = ObjectAnimator.ofFloat(tabs, "translationY", 0, -DensityUtil.dip2px(mContext, 40));
animator.setDuration(300);
animator.start();
isYetUpgliet = false;
isYetGliet = true;
}
}
private boolean isYetUpgliet = true;
private boolean isYetGliet = true;
private float mDownX;
private float mDownY;
}