www.bifa88.com 10

footer定位页面底部【www.bifa88.com】

话非常少说,请看代码:

  • 千古的二日,在项目中,放弃了ListView, 想试一试RecyclerView,
    在用的进程中,遭遇了部分主题材料,比方:如何为RecyclerView增多Header和Footer?
    怎么着为RecyclerView增加分割线?怎么着为RecyclerView增多下拉刷新和上拉加载?
    在此后的一段时间里,笔者会针对那多少个难点,通过写简书的办法挨个讲述,
    明日为大家带来的是第多少个难题的缓和方法,怎么样为RecyclerView增添Header和Footer?在那在此以前,作者想分享一下本人对RecyclerView的认知:

类别地址:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>footer定位</title>
<style>
  *{
    margin:0;
    padding: 0;
  }
  .box{
    width: 100%;
    height:300px;
    background: pink;
    margin-bottom: 30px;
  }
  .footer{
    background: red;
    width: 100%;
    height:30px;
  }
</style>
</head>
<body>
<div class="main">
<!--头部开始-->
  <div class="box">
  </div>
</div>
<!--底部-->
<div class="footer">
</div>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
</body>
</html>
<script>
$(document).ready(function () {
  var theWindow = $(window);
  function resized() {
    var windowSize=window.devicePixelRatio;
  if(windowSize==1){ 
    var hg2 = $(window).height();
    var main = $('.main').outerHeight();
    var hg4 = $('.footer').outerHeight();
    var hg=hg2-hg4
      if( hg > main){
        $('.footer').css({"position":'fixed','bottom':0,'left':0,"z-index":999,"width":"100%"});
      }else{
        $('.footer').css({"position":'static'});
      }
  }else{
    $('.footer').css({"position":'static'});
  }
  }
  theWindow.resize(function () {
    resized();
  }).trigger('resize');
});
</script>

www.bifa88.com 1PullRecyclerView

以上正是本文的全部内容,希望本文的剧情对我们的读书也许办事能带动一定的支援,同期也意在多多协理脚本之家!

  • 千古的这一两年,
    RecyclerView的进一步引起了我们Android开拓人士的小心,乃至好多少人都说:ListView,
    GridView已经逐步被RecyclerView代替,
    最爱护的原故便是RecyclerView的狡滑,
    还应该有质量上的晋升。那么可能有许多少人会问:RecyclerView和ListView,
    GridView到底是怎么着关系啊?通过Android官方文书档案的一组截图告诉你:

    www.bifa88.com 2ListView的家门谱

RecyclerView已经出来两年多了,但直至二零一九年五月份,大家的类别里才开首逐年将原来的ListView替换为RecyclerView,当时项目里选择的是PullToRefresh这几个开源里面的XListView,不难实用地达成了ListView的下拉刷新和上拉加载,不会引进其余多余的代码,相同的时间包容使用base-adapter-helper这一个项目提供的adapter及其辅助类,使得ListView的选择更为简约,代码特别简明。所以那时候交替的时候,小编的笔触正是索要找到二个跟XListView一样独自可利用的包裹了下拉和上拉的RecyclerView控件,并且最CANON够保留当前以此好用的adapter,以使替换的职业量降到最低。当时在github上看了好些个但皆认为不太惬意,有的是功效太多,需求引进太多无关的代码,有的是效果不满意自己的预想。加之当时听了Stay大神的学科,看到她对RecyclerView的大概包装,所以就以Stay的源码为雏形,结合本人项目中实际上利用的内需,重新包装了二个PullRecyclerView,Stay关于封装RecyclerView的代码github上也是有,想学习的能够去瞅瞅,不但能够看到对于RecyclerView的卷入,还足以看来什么封装一些好用的Base类。同十分候还借鉴了别的三个档期的顺序BaseRecyclerViewAdapterHelper,当时以此类型还只有不到1千个star,短短多少个月,已经快达到5千个star,而且以此体系一向在密切尊崇中,未来的代码跟本身那会儿见到的代码比起来进行了无数更改和优化,它的宗旨是提供三个“Powerful
and flexible
RecyclerAdapter”,全数有关的意义(下拉、上拉、header、footer、空页面等)都是透过它提供的adapter来完成的,未有对RecyclerView自己做其余的包裹。其实不用封装RecyclerView确实完全能够直达别的须求,因为RecyclerView的下拉刷新没有需要它自身达成,而是经过合法提供的SwipeRefreshLayout来兑现的,而上拉、header、footer和空页面那么些效率,则只经过adapter的操作就足以完全达成。但对于作者来说,封装也许有实益的,将SwipeRefreshLayout和RecyclerView组合成三个控件能够让大家运用起来特别从简和惠及,其余对于加载更加多的功力,个人感到通过RecyclerView的滚动来触发比通过adapter来触发在效力上进一步自然。所以最终本人从不间接选拔BaseRecyclerViewAdapterHelper项目,而是借鉴了部分它里面前遇到于adapter的包装和平运动用,本人进行了越来越简明精小的卷入。作者只进入了最基本和最常用的法力封装:1.下拉刷新和上拉加载更加多(支持一般列表和Grid列表,暂不协助瀑布流);2.增多Header和Footer;3.设置列表无数据时须求出示的空页面4.格外好用的BaseRecyclerAdapter和BaseViewHolder;5.只扶助上拉加载越来越多的LoadMoreRecyclerView(直接接轨自RecyclerView,适用于须要将SwipeRefreshLayout和RecyclerView分开使用的风貌)。从七月份加盟大家集团的品种于今,已经历经了八个本子和多量用户的考验,所以想要使用的话是能够一向用来实际项指标。招待感兴趣的童鞋们star笔者的PullRecyclerView,也欢迎你们建议难题和建议!

您或许感兴趣的篇章:

  • 懒加载完毕的分页&&网址footer自适应
  • 如何为RecyclerView添加Header和Footer
  • Android
    ListView中动态显示和隐藏Header&Footer的措施
  • jQuery
    mobile的header和footer在点击显示器的时候未有的消除办法
  • 使用RecyclerView添加Header和Footer的方法
  • 详解Nginx服务器的nginx-http-footer-filter模块配置
  • Repeater的FooterTemplate显示某列总结思路与代码
  • Repeater的FooterTemplate中央调节件内容设置格局

www.bifa88.com 3RecyclerView的家门谱

1.初步化,跟RecyclerView的是使用方法一样

* RecyclerView的家族谱*

mPullRecyclerView = (PullRecyclerView) findViewById(R.id.pull_recycler_view);// 设置LayoutManager(这里需要使用lib里面提供的XLinearLayoutManager或XGridLayoutManager,默认为XLinearLayoutManager)mPullRecyclerView.setLayoutManager(new XLinearLayoutManager;// 创建adapter,adapter的使用方法看后面mAdapter = new CommonListAdapter(this, R.layout.list_item, mDataList);// 设置adaptermPullRecyclerView.setAdapter;// 设置下拉刷新的旋转圆圈的颜色(根据自己的需求设置)mPullRecyclerView.setColorSchemeResources(R.color.colorAccent); // 设置ItemDecoration,可选mPullRecyclerView.addItemDecoration;// 设置当数据全部加载完成时,是否在列表底部展示提示语,可选,默认无提示mPullRecyclerView.enableLoadDoneTip(true, R.string.load_done_tip);
  • 经过上边的四个图能够开采,
    ListView承接自:AbsListView。(GirdView也是),
    RecyclerView直接继承了ViewGroup ,
    最终得出结论:RecyclerView是ListView的祖父辈,
    也便是RecyclerView是ListView的二爷,
    所以从包装的层系上得出了为什么RecyclerView品质比ListView越来越好的缘由,
    因为包装的层系越高,查询实践的进程相对非常的慢,当然还也许有三个原因,RecyclerView中自带的Adapter中参加了Holder,强制供给开荒人士使用,在ListView中,许多少人都不懂使用Holder,
    那也致使了使用ListView质量相比差。那也是RecyclerView质量提高的多个关键原因,
    当然,封装的层越高越灵活,相对使用起来也相对难,繁多方法都以透过友好去封装的,比如ListView中有addHeaderView(View
    view), addFooterView(View view)去丰富本人的Header 和Footer,
    不过在RecyclerView中一直不,下边小编将详细介绍:

2.下拉刷新

透过下边简书的两张图,令你认知Header和Footer

 // 开启下拉刷新,默认即为true,可不用设置mPullRecyclerView.enablePullRefresh;// 下拉刷新成功后更新UI,结束下拉刷新mPullRecyclerView.stopRefresh();

www.bifa88.com 4带Header的图

3.上拉加载越来越多

带Header的图

 // 开启上拉加载更多,默认为false,当前有更多数据需要加载时需开启mPullRecyclerView.enableLoadMore;// 上拉加载成功后更新UI,结束上拉加载mPullRecyclerView.stopLoadMore();

www.bifa88.com 5带Footer的图

4.上拉、下拉风云监听

带Footer的图

mPullRecyclerView.setOnRecyclerRefreshListener(new PullRecyclerView.OnRecyclerRefreshListener() { @Override public void onPullRefresh() { // 下拉刷新事件被触发 } @Override public void onLoadMore() { // 上拉加载更多事件被触发 }});
  • 由此地方的两张图,能够看来,Header和Footer许多情景下是接济效能的,例如Header平常用于做广告,而Footer越多的是为着显示下拉加载越多作为一个可视化组件来体现加载境况,进步用户体验。

5.代码触发列表刷新

RecyclerView的采纳和ListView的采纳差不离,无非正是那三步:第一,初步化RecyclerView;第二,初阶化数据,并且将数据经过Adapter装在到View中;第三,通过set艾达pter方法,将Adapter绑定到RecyclerView中。上面直接上代码:通过代码注释的章程来上课加多Header和Footer:
主布局layout_www.bifa88.com,main.xml: 只是增多了三个RecyclerView而已

// 触发PullRecyclerView的下拉刷新,会展示下拉旋转圆圈mPullRecyclerView.postRefreshing();// 直接刷新列表(回调监听事件中的onPullRefresh方法),不展示下拉旋转圆圈mPullRecyclerView.refreshNoPull();
<?xml version="1.0" encoding="utf-8"?> <RelativeLayoutxmlns:andro xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.study.wnw.recyclerviewheaderfooter.MainActivity"> <android.support.v7.widget.RecyclerView android: android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>

6.item点击事件监听

RecyclerView中ListView的Item布局list_Item.xml: 只是增添了二个TextView

// 通过adapter设置item的点击事件mAdapter.setOnRecyclerItemClickListener(new BaseRecyclerAdapter.OnRecyclerItemClickListener() { @Override public void onItemClick(View view, int position) { }});// 通过adapter设置item的长按事件mAdapter.setOnRecyclerItemLongClickListener(new BaseRecyclerAdapter.OnRecyclerItemLongClickListener() { @Override public boolean onItemLongClick(View view, int position) { return false; }});
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:andro android:orientation="vertical" android:layout_width="match_parent" android:layout_height="50dp"> <TextView android: android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="20sp" android:textColor="@color/colorAccent" android:gravity="center" android:background="#08e630"/> </LinearLayout>

增多header和footer成效是因而BaseRecyclerAdapter类完结的,所以最终会调用到BaseRecycler艾达pter中的方法,不过为了方便,笔者在PullRecyclerView中也加多了同一的方式,瞩目利用PullRecyclerView中的增添Header和Footer的点卯时,必须在给PullRecyclerView设置了adapter之后再拓展调用

HeaderView和FooterView的布局文件,也是多个TextView,
这里只贴出了HeaderView的布局,FooterView的布局文件和FooterView的平等:

1.添加Header

HeaderView的布局文件: header.xml:

// 添加header,传入header对应的ViewmPullRecyclerView.addHeaderView;// 添加header,传入header对应的布局资源文件mPullRecyclerView.addHeaderView(R.layout.layout_list_header);
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro android:orientation="vertical" android:layout_width="match_parent" android:layout_height="100dp"> <TextView android: android:layout_width="match_parent" android:layout_height="match_parent" android:text="我是Header" android:textSize="30sp" android:textColor="#fde70b0b" android:background="#f9777979" android:gravity="center"/> </LinearLayout>

2.增多Footer(增加了Footer,上拉加载的效果就不再可用)

好了, 布局文件到那边大家曾经弄好了,
上边我们直接看MainActivity中的内容: MainActivity.java中的内容为:

// 添加footer,传入footer对应的ViewmPullRecyclerView.addFooterView(footerView);// 添加footer,传入footer对应的布局资源文件mPullRecyclerView.addFooterView(R.layout.layout_list_footer);
package com.study.wnw.recyclerviewheaderfooter; import android.app.Activity;import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import java.util.ArrayList;import java.util.List; public class MainActivity extends Activity { private RecyclerView mRecyclerView; private MyAdapter mMyAdapter; private List<String> mList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //RecyclerView三部曲+LayoutManager mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview); LinearLayoutManager linearLayoutManager = new LinearLayoutManager; mRecyclerView.setLayoutManager(linearLayoutManager); initData(); mMyAdapter = new MyAdapter; mRecyclerView.setAdapter(mMyAdapter); //为RecyclerView添加HeaderView和FooterView setHeaderView(mRecyclerView); setFooterView(mRecyclerView); } //初始化RecyclerView中每个item的数据 private void initData(){ mList = new ArrayList<String>(); for (int i = 0; i < 20; i++){ mList.add("item" + i); } } private void setHeaderView(RecyclerView view){ View header = LayoutInflater.from.inflate(R.layout.header, view, false); mMyAdapter.setHeaderView; } private void setFooterView(RecyclerView view){ View footer = LayoutInflater.from.inflate(R.layout.footer, view, false); mMyAdapter.setFooterView; } }

www.bifa88.com 6添加了Footer的效果

  • 从上面包车型地铁代码中,大家得以看看,我们在MainActivity中做了两件事,五个是初叶化RecyclerView相关的View,
    Adapter, data;
    另一个是由此大家自定义的艾达pter的setHeaderView()和setFooterView()方法为RecyclerView加多HeaderView和FooterView,
    到这里,大家曾经迫在眉睫的想清楚MyAdapter中到底有何样事物,
    直接上代码 My艾达pter.java的代码

空页面的贯彻原理跟增添header和footer是均等的,所以一律在意运用PullRecyclerView中的设置空页面包车型大巴章程时,必须在给PullRecyclerView设置了adapter之后再拓展调用

1.无多少且无Header时呈现空页面

package com.study.wnw.recyclerviewheaderfooter;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import java.util.List;/** * Created by wnw on 16-5-20. */public class MyAdapter extendsRecyclerView.Adapter<RecyclerView.ViewHolder> { public static final int TYPE_HEADER = 0; //说明是带有Header的 public static final int TYPE_FOOTER = 1; //说明是带有Footer的 public static final int TYPE_NORMAL = 2; //说明是不带有header和footer的 //获取从Activity中传递过来每个item的数据集合 private List<String> mDatas; //HeaderView, FooterView private View mHeaderView; private View mFooterView; //构造函数 public MyAdapter(List<String> list){ this.mDatas = list; } //HeaderView和FooterView的get和set函数 public View getHeaderView() { return mHeaderView; } public void setHeaderView(View headerView) { mHeaderView = headerView; notifyItemInserted; } public View getFooterView() { return mFooterView; } public void setFooterView(View footerView) { mFooterView = footerView; notifyItemInserted(getItemCount; } /** 重写这个方法,很重要,是加入Header和Footer的关键,我们通过判断item的类型,从而绑定不同的view * */ @Override public int getItemViewType(int position) { if (mHeaderView == null && mFooterView == null){ return TYPE_NORMAL; } if (position == 0){ //第一个item应该加载Header return TYPE_HEADER; } if (position == getItemCount{ //最后一个,应该加载Footer return TYPE_FOOTER; } return TYPE_NORMAL; } //创建View,如果是HeaderView或者是FooterView,直接在Holder中返回 @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if(mHeaderView != null && viewType == TYPE_HEADER) { return new ListHolder(mHeaderView); } if(mFooterView != null && viewType == TYPE_FOOTER){ return new ListHolder(mFooterView); } View layout = LayoutInflater.from(parent.getContext.inflate(R.layout.list_item, parent, false); return new ListHolder; } //绑定View,这里是根据返回的这个position的类型,从而进行绑定的, HeaderView和FooterView, 就不同绑定了 @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if(getItemViewType == TYPE_NORMAL){ if(holder instanceof ListHolder) { //这里加载数据的时候要注意,是从position-1开始,因为position==0已经被header占用了 ((ListHolder) holder).tv.setText(mDatas.get(position-1)); return; } return; }else if(getItemViewType == TYPE_HEADER){ return; }else{ return; } } //在这里面加载ListView中的每个item的布局 class ListHolder extends RecyclerView.ViewHolder{ TextView tv; public ListHolder(View itemView) { super; //如果是headerview或者是footerview,直接返回 if (itemView == mHeaderView){ return; } if (itemView == mFooterView){ return; } tv = itemView.findViewById(R.id.item); } } //返回View中Item的个数,这个时候,总的个数应该是ListView中Item的个数加上HeaderView和FooterView @Override public int getItemCount() { if(mHeaderView == null && mFooterView == null){ return mDatas.size(); }else if(mHeaderView == null && mFooterView != null){ return mDatas.size() + 1; }else if (mHeaderView != null && mFooterView == null){ return mDatas.size() + 1; }else { return mDatas.size() + 2; } }}
mPullRecyclerView.setEmptyView(emptyView);mPullRecyclerView.setEmptyView(R.layout.layout_empty_view);
  • 从地点的MyAdapter类中,有setHeaderView()和setFooterView()八个章程,我们就算经过这八个措施从Activity将headerView和footerView传递过来的,
    在Adapter中的onCreateViewHolder()方法中,利用getItemViewType()再次回到Item的档期的顺序(你这些Item是否Header家的?还是Footer家的?只怕是ListView家的?)依照分歧的连串,大家创立不一致的Item的View。大约的笔触正是那样子,越多细节请看代码注释,上面是运作截图(由于不驾驭Linux下有何好的GIF生成工具,只可以截静态图,大家领略的话,能够引入给本身,感谢各位大神):

www.bifa88.com 7

www.bifa88.com 8headerwww.bifa88.com 9footer

2.有Header时也呈现的空页面

  • 到头来写完了,须要稳步消化摄取和接到,那只是一种实现HeaderView和FooterView的方法,大家从那边看看,HeaderView和FooterView是一向从Activity中传送过Adapter的,大家也能够像ListView同样,大家只传递HeaderView和FooterView的数额过Adapter中,然后在Adapter的内部再新建不一样的HeaderHolder和FooterHolder,
    依照重临Item的种类,加载不一样的Holder就可以,具体的兑现本身就非常的少说了,咱们能够去贯彻一下。通过截图,你会意识,RecyclerView中,每一种Item之间以至未有分割线,而且RecyclerView中也绝非setDivider()那样的不二秘技去设置分割线,因为RecyclerView灵活啊,所以也是要自定义的,其实很粗大略,下一篇文章笔者会带来怎么着为RecyclerView加多分割线,那篇就到此结束了,有不足之处,望大家多多指教,谢谢了。RecyclerView中增添分隔线已经落实,RecyclerView种类之:为RecyclerView增多分隔线,多谢协理。
// 第一个参数为true表示有Header时也显示空页面,不设置默认为falsemPullRecyclerView.setEmptyView(true, emptyView);mPullRecyclerView.setEmptyView(true, R.layout.layout_empty_view);

www.bifa88.com 10

BaseRecyclerAdapter相当好用,它三番九回于RecyclerView.艾达pter,配套BaseViewHolder,当大家需求三个adapter时,只必要继续它,达成其抽象方法convert,然后大家无非必要关注什么在这么些办法中填充View的剧情就够了,别的的都没有必要操心。

public class CommonListAdapter extends BaseRecyclerAdapter<CheesesItem> { public CommonListAdapter(Context context, int layoutResId, List<CheesesItem> data) { super(context, layoutResId, data); } @Override protected void convert(final BaseViewHolder holder, final CheesesItem item) { ImageView avatarView = holder.getView(R.id.avatar); Glide.with .load(item.avatar) .fitCenter() .into(avatarView); holder.setText(android.R.id.text1, item.name); holder.getView().setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(holder.getView(), item.name, Snackbar.LENGTH_SHORT).show; }}

convert方法会传递进入贰个BaseViewHolder,我们经过那么些BaseViewHolder能够很有益地找到须求填写的View进行填充,无需关怀复用的主题素材,BaseViewHolder内部已经支持消除。

// 通过id找到我们需要的View,无需强转ImageView avatarView = holder.getView(R.id.avatar);// 获取当前整个Item的View对象holder.getView();// 一些简单的属性可以直接设置holder.setText(textViewId, item.name);holder.setImageResource(ImageViewId, imageResId);holder.setBackgroundColor(viewId, color);

BaseRecyclerAdapter中也提供了一些操作数据源的章程

// 获取当前数据源mAdapter.getCount();// 向当前数据源中添加一个元素并刷新(内部会调用notifyItemInserted)mAdapter.add;// 向当前数据源添加一组元素并刷新列表mAdapter.addAll;// 清空当前数据源并刷新列表mAdapter.clear();// 更多方法请自行查看……

假如要求在填充View时使用到item的position,能够接纳convert的重载方法

@Overrideprotected void convert(BaseViewHolder holder, CheesesItem item, int position) {}

下面convert中传出的position是考虑了存在header的情形的,假若列表未有header,也得以直接行使holder.getLayoutPosition()方法来取妥当前item的position。

1.Stay大神的学科;2.BaseRecyclerViewAdapterHelper门类;3.列表模拟数据是从cheesesquare项目中借用的