一言不合就上图
Android_view.gif
iOS_view.gif
1:安卓
很早以前写过一个类似的效果，不过当时的做法是：
- 在FrameLayout中布局listview和你想要在滑动时显示在顶部的布局并将属性设置为invisible。
- 在代码中动态添加想要悬停的布局为listview头布局(也就是悬停部分写两遍)。
- 监听listview的滚动(滚动时显示在布局中隐藏的部分达到悬停效果)
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (firstVisibleItem >= 1) {
//悬浮布局显示
invis.setVisibility(View.VISIBLE);
} else {
invis.setVisibility(View.GONE);
}
}
缺点：
- 布局不够灵活
- 不能处理事件(如果想要作为多个fragment的滑动指示器不能实现)。
安卓5.0后实现这样的布局就很简单了而且还能处理各种事件
做法：
- layout代码
layout.png
注意点：
- 1：新属性app:layout_scrollFlags的使用，对应的值为：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；也可以在代码中通过setScrollFlags(int)方法使用，app:layout_scrollFlags="scroll"就会跟着一起滚动如果不设置则在滑动的时候会悬停在顶部。
- 2： 下面必须使用RecyclerView。
页面代码
package com.ygxinjian.anhui.test_online.Fragment;
import android.content.Context;
import android.support.design.widget.AppBarLayout;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import com.bigkoo.convenientbanner.ConvenientBanner;
import com.bigkoo.convenientbanner.adapter.CBPageAdapter;
import com.bigkoo.convenientbanner.adapter.CBViewHolderCreator;
import com.bigkoo.convenientbanner.listener.OnItemClickListener;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.ygxinjian.anhui.test_online.Activity.Consult_Test_Activity;
import com.ygxinjian.anhui.test_online.Activity.Consult_Test_intros_Activity;
import com.ygxinjian.anhui.test_online.Controller.NetworkImageHolderView;
import com.ygxinjian.anhui.test_online.Model.JsEntry;
import com.ygxinjian.anhui.test_online.R;
import com.ygxinjian.anhui.test_online.TestOnlineApplication;
import com.ygxinjian.anhui.test_online.View.DividerItemDecoration;
import com.ygxinjian.anhui.test_online.utils.DevUtil;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* Created by handongqiang on 16/12/29.
*/
public class Fragment_Home extends BaseFragment implements View.OnClickListener{
private static final String TAG = "Fragment_Home";
private ConvenientBanner mConvenientBanner;
private RecyclerView mRecyclerView;
private AppBarLayout mAppBarLayout;
private View mLine;
private NewsAdapter mAdapter;
private LinearLayout ll_consult_click,ll_hunying_click,ll_yingyang_click;
List mData;
private String[] images = {"http://img2.imgtn.bdimg.com/it/u=3093785514,1341050958&fm=21&gp=0.jpg",
"http://img2.3lian.com/2014/f2/37/d/40.jpg",
"http://img2.3lian.com/2014/f2/37/d/39.jpg",
"http://f.hiphotos.baidu.com/image/h%3D200/sign=1478eb74d5a20cf45990f9df460b4b0c/d058ccbf6c81800a5422e5fdb43533fa838b4779.jpg",
"http://f.hiphotos.baidu.com/image/pic/item/09fa513d269759ee50f1971ab6fb43166c22dfba.jpg"
};
@Override
public View initView() {
View view = View.inflate(mActivity, R.layout.fragment_home, null);
ll_consult_click = (LinearLayout) view.findViewById(R.id.ll_consult);
ll_hunying_click = (LinearLayout) view.findViewById(R.id.ll_hunyin);
ll_yingyang_click = (LinearLayout) view.findViewById(R.id.ll_yingyang);
ll_consult_click.setOnClickListener(this);
ll_hunying_click.setOnClickListener(this);
ll_yingyang_click.setOnClickListener(this);
mConvenientBanner = (ConvenientBanner) view.findViewById(R.id.banner);
mAppBarLayout = (AppBarLayout) view.findViewById(R.id.appbar_layout);
mLine = view.findViewById(R.id.line_divider);
mRecyclerView = (RecyclerView) view.findViewById(R.id.vertical_recyclerView);
mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL_LIST));
mAdapter = new NewsAdapter(getActivity());
//添加头尾布局
// mAdapter.addHeaderView(getView());
mConvenientBanner.setPages(new CBViewHolderCreator() {
@Override
public NetworkImageHolderView createHolder() {
return new NetworkImageHolderView();
}
}, Arrays.asList(images))
.setPageIndicator(new int[]{R.mipmap.ic_page_indicator, R.mipmap.ic_page_indicator_focused})
.setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.CENTER_HORIZONTAL);
initAdapter();
initBanner();
initLine();
return view;
}
private void initLine() {
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(Math.abs(verticalOffset) >= mAppBarLayout.getTotalScrollRange()){
mLine.setVisibility(View.VISIBLE);
}else{
mLine.setVisibility(View.GONE);
}
}
});
}
private void initBanner() {
mConvenientBanner.startTurning(3000);
// 进入Banner
mConvenientBanner.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(int position) {
DevUtil.showShortInfo(mActivity,"心理咨询师考试");
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.ll_consult:
DevUtil.gotoActivity(mActivity, Consult_Test_Activity.class);
break;
case R.id.ll_hunyin:
DevUtil.gotoActivity(mActivity, Consult_Test_intros_Activity.class);
break;
case R.id.ll_yingyang:
DevUtil.showShortInfo(mActivity,"题库整理中");
break;
}
}
/**
* 模拟首页数据
* @return
*/
private List mockData(){
List data = new ArrayList<>();
JsEntry jsEntry = new JsEntry();
jsEntry.time = "15小时前";
jsEntry.title = "这些情商的技巧，你是不是都掌握了？";
jsEntry.authorName = "JayChou";
jsEntry.cover ="http://upload-images.jianshu.io/upload_images/2785318-5306a632b46a8c27.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1020/q/80";
JsEntry jsEntry2 = new JsEntry();
jsEntry2.time = "10小时前";
jsEntry2.title = "除了阴谋，《锦绣未央》里还有哪些温情？";
jsEntry2.authorName = "菇凉似梦";
jsEntry2.cover = "http://upload-images.jianshu.io/upload_images/2881988-b217e714eb05f88e.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1020/q/80";
for (int i=0;i<20;i++){
if(i % 2 == 0){
data.add(jsEntry);
}else{
data.add(jsEntry2);
}
}
return data;
}
/**
* 设置RecyclerView属性
*/
private void initAdapter() {
mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
mAdapter.openLoadAnimation();
mRecyclerView.setAdapter(mAdapter);//设置adapter
//设置item点击事件
mAdapter.setOnRecyclerViewItemClickListener(new BaseQuickAdapter.OnRecyclerViewItemClickListener() {
@Override
public void onItemClick(View view, int position) {
Toast.makeText(mActivity, ""+position, Toast.LENGTH_SHORT).show();
}
});
}
/**
* RecycleView的adapter
*/
class NewsAdapter extends BaseQuickAdapter {
public NewsAdapter(Context context) {
super(context,R.layout.news_label_item,mockData());
}
@Override
public void convert(BaseViewHolder helper, JsEntry mData) {
helper.setText(R.id.item_content, mData.title)
.setText(R.id.author_name, mData.authorName)
.setText(R.id.publish_time, mData.time);
ImageLoader.getInstance().displayImage(mData.cover, (ImageView) helper.getView(R.id.cover));
}
}
}
至此安卓端这个简单的效果就实现了
2：iOS端实现方法
思路：
- 最底层为UIScrollView，布局上依次添加banner，悬停的UIView布局和Tableview.
- 通过代码判断UIScrollView的滚动实现悬停
核心代码：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
//悬浮框
if (_bottomScrollView.contentOffset.y < self.banner.bounds.size.height) {
_bottomScrollView.delegate = nil;
CGPoint contentOffsetPoint = _bottomScrollView.contentOffset;
_bottomScrollView.contentOffset = contentOffsetPoint;
_bottomScrollView.delegate = self;
m_tabel.scrollEnabled =NO; //设置tableview 不能滚动
}else if(_bottomScrollView.contentOffset.y > self.banner.bounds.size.height){
m_tabel.scrollEnabled =YES;
_bottomScrollView.delegate = nil;
_bottomScrollView.contentOffset = CGPointMake(0, self.banner.bounds.size.height);
_bottomScrollView.delegate = self;
}
}
老规矩-喜欢就点个赞呗 T.T .gif