前情回顧：
1.WanAndroid實(shí)戰(zhàn)——首頁(yè)Banner
2.WanAndroid實(shí)戰(zhàn)——首頁(yè)文章
3.WanAndroid實(shí)戰(zhàn)——內(nèi)容顯示
在完成了上面的一系列操作之后終于可以看到文章的內(nèi)容了，但是卻只能看到“最近”的內(nèi)容，無法刷新厨姚，也無法看到之前的內(nèi)容，這篇文章將解決這個(gè)問題嗅榕。按照慣例，先上效果圖：
完成效果.gif
下拉刷新吵聪，上拉加載
目前周圍的同事在做有關(guān)刷新加載的功能都推薦使用開源框架SmartRefreshLayout凌那，實(shí)現(xiàn)起來簡(jiǎn)單，效果也是很炫酷吟逝，我這里使用的是經(jīng)典的形式帽蝶。
1.添加依賴，在gradle里面添加如下內(nèi)容
implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-21'
implementation 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.0-alpha-21'
2.在布局文件中添加進(jìn)去澎办，因?yàn)槲覀円⑿碌氖莚ecycleView嘲碱，所以在它外面加金砍。
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.scwang.smartrefresh.layout.header.ClassicsHeader
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/article_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.scwang.smartrefresh.layout.footer.ClassicsFooter
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
ClassicsHeader和ClassicsFooter是經(jīng)典的頭部和尾部局蚀，如果想使用默認(rèn)的效果，那么這兩個(gè)可以不寫恕稠。
3.接口中添加加載琅绅，刷新的相關(guān)內(nèi)容
在Contract.java這個(gè)類中，添加IBaseView鹅巍，這里面用來定義錯(cuò)誤和完成的接口千扶，同時(shí)讓IMainView繼承IBaseView料祠，通過監(jiān)聽這兩種狀態(tài)，來完成相關(guān)的操作澎羞，例如隱藏刷新/加載的Header和Footer髓绽。新增了刷新的接口。
package com.tom.wanandroid.contract;
import com.tom.wanandroid.bean.ArticleBean;
import com.tom.wanandroid.bean.BannerBean;
import java.util.List;
import io.reactivex.Observable;
/**
* <p>Title: Contract</p>
* <p>Description: </p>
*
* @author tom
* @date 2019/3/7 10:13
**/
public class Contract {
public interface IBaseView {
/**
* <p>加載錯(cuò)誤回調(diào)</p>
* @param e Throwable
*/
void onError(Throwable e);
/**
* <p>加載完成</p>
*/
void onComplete();
}
public interface IMainModel {
/**
* <p>獲取banner數(shù)據(jù)</p>
* @return banner數(shù)據(jù)
*/
Observable<BannerBean> loadBanner();
/**
* <p>加載首頁(yè)文章</p>
* @param number 頁(yè)碼
* @return 首頁(yè)文章
*/
Observable<List<ArticleBean>> loadArticle(int number);
/**
* <p>刷新首頁(yè)文章</p>
* @return 首頁(yè)文章
*/
Observable<List<ArticleBean>> refreshArticle();
}
public interface IMainView extends IBaseView{
/**
* <p>View 獲取到數(shù)據(jù)后進(jìn)行顯示</p>
* @param bean banner的數(shù)據(jù)
*/
void loadBanner(BannerBean bean);
/**
* <p>加載首頁(yè)文章信息</p>
* @param bean 首頁(yè)文章數(shù)據(jù)
*/
void loadArticle(List<ArticleBean> bean);
/**
* <p>刷新首頁(yè)文章</p>
*
* @param bean
*/
void refreshArticle(List<ArticleBean> bean);
}
public interface IMainPresenter{
/**
* <p>首頁(yè)banner</p>
*/
void loadBanner();
/**
* <p>加載首頁(yè)文章</p>
* @param number 頁(yè)碼
*/
void loadArticle(int number);
/**
* <p>刷新首頁(yè)文章</p>
*/
void refreshArticle();
}
}
4.處理報(bào)錯(cuò)
因?yàn)榻涌谛略鲎苯剩袑?shí)現(xiàn)這些接口的類都會(huì)報(bào)錯(cuò)顺呕，接下來就是處理各種報(bào)錯(cuò)就好了，這里以Model為例括饶，其它的都比較簡(jiǎn)單株茶。
首先將從網(wǎng)站獲取的json數(shù)據(jù)對(duì)應(yīng)的bean更名為ArticleBeanOriginal，然后新建了一個(gè)ArticleBean图焰，這里僅保存用到的屬性启盛，后續(xù)如果有需要添加的地方，可以直接進(jìn)行修改技羔。
package com.tom.wanandroid.bean;
/**
* <p>Title: ArticleBean</p>
* <p>Description:處理后的文章bean </p>
*
* @author tom
* @date 2019/3/29 13:39
**/
public class ArticleBean {
public int id;
public String title;
public String author;
public String niceDate;
public long publishTime;
public String chapterName;
public String superChapterName;
public boolean collect;
public String link;
@Override
public String toString() {
return "ArticleBean{" +
"id=" + id +
", title='" + title + '\'' +
", author='" + author + '\'' +
", niceDate='" + niceDate + '\'' +
", publishTime=" + publishTime +
", chapterName='" + chapterName + '\'' +
", superChapterName='" + superChapterName + '\'' +
", collect=" + collect +
", link='" + link + '\'' +
'}';
}
}
然后在IRetrofitData.java中增加刷新的方法僵闯，刷新固定獲取第0頁(yè)的數(shù)據(jù)，因此不需要傳遞參數(shù)藤滥。添加后的文件內(nèi)容如下：
package com.tom.wanandroid.retrofit;
import com.tom.wanandroid.bean.BannerBean;
import com.tom.wanandroid.bean.ArticleBeanOriginal;
import io.reactivex.Observable;
import retrofit2.http.GET;
import retrofit2.http.Path;
/**
* <p>Title: IRetrofitData</p>
* <p>Description: </p>
*
* @author tom
* @date 2019/3/7 11:34
**/
public interface IRetrofitData {
/**
* <p>獲取首頁(yè)輪播圖數(shù)據(jù)</p>
* @return 首頁(yè)輪播圖數(shù)據(jù)
*/
@GET("banner/json")
Observable<BannerBean> loadBanner();
/**
* <p>獲取首頁(yè)文章數(shù)據(jù)</p>
* @param number 頁(yè)碼
* @return 返回首頁(yè)文章
*/
@GET("article/list/{number}/json")
Observable<ArticleBeanOriginal> loadMainArticle(@Path("number") int number);
/**
* <p>刷新首頁(yè)文章數(shù)據(jù)</p>
* @return 返回首頁(yè)文章
*/
@GET("article/list/0/json")
Observable<ArticleBeanOriginal> refreshMainArticle();
}
接著修改MainModel棍厂，刷新時(shí)固定獲取第0頁(yè)數(shù)據(jù)，如果數(shù)據(jù)相同超陆，則不處理牺弹，如果不相同，則放置到已有數(shù)據(jù)的上面时呀，因此需要對(duì)獲取到的數(shù)據(jù)進(jìn)行倒敘排序张漂，即讓獲取到的數(shù)據(jù)為按照發(fā)表時(shí)間倒敘排序，這樣谨娜，在調(diào)用了mArticleBeans.add(0, articleBean);方法后航攒，能夠保證文章的數(shù)據(jù)的順序是正確的。修改后的文件如下趴梢。
package com.tom.wanandroid.model;
import com.tom.wanandroid.bean.ArticleBean;
import com.tom.wanandroid.bean.BannerBean;
import com.tom.wanandroid.contract.Contract;
import com.tom.wanandroid.retrofit.IRetrofitData;
import java.util.ArrayList;
import java.util.List;
import io.reactivex.Observable;
import retrofit2.Retrofit;
import retrofit2.adapter.rxjava2.RxJava2CallAdapterFactory;
import retrofit2.converter.gson.GsonConverterFactory;
/**
* <p>Title: MainModel</p>
* <p>Description: </p>
*
* @author tom
* @date 2019/3/7 10:54
**/
public class MainModel implements Contract.IMainModel {
private static final String BASE_URL = "http://www.wanandroid.com";
List<ArticleBean> mArticleBeans = new ArrayList<>();
@Override
public Observable<BannerBean> loadBanner() {
IRetrofitData retrofitData = getIRetrofitData();
return retrofitData.loadBanner();
}
@Override
public Observable<List<ArticleBean>> loadArticle(int number) {
return getIRetrofitData().loadMainArticle(number).filter(a ->a.getErrorCode() == 0)
.map(original -> {
original.getData().getDatas().stream().sorted((o1,o2) -> (int)(o2.getPublishTime() - o1.getPublishTime()))
.forEach(datas -> {
long count = mArticleBeans.stream().filter(b -> b.id == datas.getId()).count();
if (count <= 0) {
ArticleBean articleBean = new ArticleBean();
articleBean.id = datas.getId();
articleBean.title = datas.getTitle();
articleBean.author = datas.getAuthor();
articleBean.niceDate = datas.getNiceDate();
articleBean.publishTime = datas.getPublishTime();
articleBean.chapterName = datas.getChapterName();
articleBean.superChapterName = datas.getSuperChapterName();
articleBean.collect = datas.isCollect();
articleBean.link = datas.getLink();
mArticleBeans.add(articleBean);
}
});
return mArticleBeans;
});
}
@Override
public Observable<List<ArticleBean>> refreshArticle() {
return getIRetrofitData().refreshMainArticle().filter(a ->a.getErrorCode() == 0)
.map(original -> {
original.getData().getDatas().stream().sorted((o1, o2) -> (int) (o1.getPublishTime() - o2.getPublishTime()))
.forEach(datas -> {
//如果數(shù)據(jù)是新數(shù)據(jù)
long count = mArticleBeans.stream().filter(b -> b.id == datas.getId()).count();
if (count <= 0) {
ArticleBean articleBean = new ArticleBean();
articleBean.id = datas.getId();
articleBean.title = datas.getTitle();
articleBean.author = datas.getAuthor();
articleBean.niceDate = datas.getNiceDate();
articleBean.publishTime = datas.getPublishTime();
articleBean.chapterName = datas.getChapterName();
articleBean.superChapterName = datas.getSuperChapterName();
articleBean.collect = datas.isCollect();
articleBean.link = datas.getLink();
mArticleBeans.add(0, articleBean);
}
});
return mArticleBeans;
});
}
private IRetrofitData getIRetrofitData() {
Retrofit retrofit = new Retrofit.Builder().baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.addCallAdapterFactory(RxJava2CallAdapterFactory.create())
.build();
return retrofit.create(IRetrofitData.class);
}
}
順帶一句漠畜，在MainPresenter中，refreshArticle()方法如下坞靶，loadArticle同樣修改即可憔狞。
@Override
public void refreshArticle() {
mModel.refreshArticle()
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Observer<List<ArticleBean>>() {
@Override
public void onSubscribe(Disposable d) {
mCompositeDisposable.add(d);
}
@Override
public void onNext(List<ArticleBean> articleBeans) {
if (isViewAttached()) {
getView().refreshArticle(articleBeans);
}
}
@Override
public void onError(Throwable e) {
e.printStackTrace();
if (isViewAttached()) {
getView().onError(e);
}
}
@Override
public void onComplete() {
if (isViewAttached()) {
getView().onComplete();
}
}
});
}
5.在View中調(diào)用刷新和加載方法
在View中，設(shè)置加載和刷新的監(jiān)聽彰阴，分別實(shí)現(xiàn)監(jiān)聽的方法瘾敢。
mRefreshLayout.setOnLoadMoreListener(this);
mRefreshLayout.setOnRefreshListener(this);
@Override
public void onLoadMore(@NonNull RefreshLayout refreshLayout) {
mCurPage++;
mPresenter.loadArticle(mCurPage);
}
@Override
public void onRefresh(@NonNull RefreshLayout refreshLayout) {
mCurPage = 0;
mPresenter.refreshArticle();
}
還要考慮加載或者刷新失敗時(shí)，需要將頭部和尾部隱藏掉，整個(gè)MainActivity的代碼如下簇抵。
package com.tom.wanandroid.view;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import com.blankj.utilcode.util.LogUtils;
import com.blankj.utilcode.util.ToastUtils;
import com.scwang.smartrefresh.layout.SmartRefreshLayout;
import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.constant.RefreshState;
import com.tom.wanandroid.Constant;
import com.tom.wanandroid.R;
import com.tom.wanandroid.adapter.ArticleAdapter;
import com.tom.wanandroid.base.BaseActivity;
import com.tom.wanandroid.bean.ArticleBean;
import com.tom.wanandroid.bean.BannerBean;
import com.tom.wanandroid.contract.Contract;
import com.tom.wanandroid.presenter.MainPresenter;
import com.tom.wanandroid.utils.GlideImageLoader;
import com.tom.wanandroid.utils.Utils;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.listener.OnBannerListener;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
import butterknife.BindView;
/**
* <p>Title: MainActivity</p>
* <p>Description: 主頁(yè)activity</p>
*
* @author tom
* @date 2019/3/9 10:15
*/
public class MainActivity extends BaseActivity<Contract.IMainView, MainPresenter> implements Contract.IMainView,
OnBannerListener, ArticleAdapter.OnItemClickListener,
com.scwang.smartrefresh.layout.listener.OnLoadMoreListener,
com.scwang.smartrefresh.layout.listener.OnRefreshListener {
@BindView(R.id.main_banner)
Banner mMainBanner;
@BindView(R.id.article_content)
RecyclerView mArticleContent;
@BindView(R.id.refresh_layout)
SmartRefreshLayout mRefreshLayout;
ArticleAdapter mArticleAdapter;
List<ArticleBean> mArticleDatas = new ArrayList<>();
List<String> mBannerUrls;
List<String> mTitles;
/**
* 當(dāng)前頁(yè)
*/
int mCurPage = 0;
/**
* 總頁(yè)數(shù)庆杜，默認(rèn)只有一頁(yè)
*/
int mPageCount = 1;
@Override
protected int getContentViewId() {
return R.layout.activity_main;
}
@Override
protected void init(Bundle savedInstanceState) {
initBanner();
initArticleRecycle();
initListener();
initData();
}
/**
* <p>獲取數(shù)據(jù)</p>
*/
private void initData() {
mPresenter.loadBanner();
mPresenter.refreshArticle();
}
/**
* <p>初始化listener</p>
*/
private void initListener() {
//設(shè)置監(jiān)聽
mMainBanner.setOnBannerListener(this);
mArticleAdapter.setListener(this);
mRefreshLayout.setOnLoadMoreListener(this);
mRefreshLayout.setOnRefreshListener(this);
}
/**
* <p>初始化文章adapter</p>
*/
private void initArticleRecycle() {
//設(shè)置adapter
mArticleContent.setLayoutManager(new LinearLayoutManager(this));
mArticleAdapter = new ArticleAdapter(mArticleContent, mArticleDatas);
mArticleContent.setAdapter(mArticleAdapter);
}
/**
* <p>初始化Banner</p>
*/
private void initBanner() {
mMainBanner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
mMainBanner.setImageLoader(new GlideImageLoader());
mMainBanner.setImages(new ArrayList<String>());
mMainBanner.setBannerTitles(new ArrayList<>());
mMainBanner.start();
}
@Override
protected MainPresenter createPresenter() {
return new MainPresenter();
}
@Override
protected void onResume() {
super.onResume();
}
@Override
public void loadBanner(BannerBean bean) {
if (bean.getErrorCode() == Constant.BANNER_SUCCESS) {
//獲取圖片路徑
List<String> images = bean.getData()
.stream()
.map(BannerBean.DataBean::getImagePath)
.collect(Collectors.toList());
mMainBanner.setImages(images);
//獲取URL
mBannerUrls = bean.getData()
.stream()
.map(BannerBean.DataBean::getUrl)
.collect(Collectors.toList());
//獲取title
mTitles = bean.getData()
.stream()
.map(BannerBean.DataBean::getTitle)
.collect(Collectors.toList());
mMainBanner.setBannerTitles(mTitles);
mMainBanner.start();
}
else {
LogUtils.d("bean 獲取失敗");
}
}
@Override
public void loadArticle(List<ArticleBean> bean) {
mArticleAdapter.setBeans(bean);
mArticleDatas = bean;
}
@Override
public void refreshArticle(List<ArticleBean> bean) {
mArticleAdapter.setBeans(bean);
mArticleDatas = bean;
}
@Override
public void OnBannerClick(int position) {
if (mBannerUrls != null) {
String url = mBannerUrls.get(position);
String title = mTitles.get(position);
Utils.startWebView(this, title, url);
}
}
@Override
public void onItemClick(View view, int position) {
if (mArticleDatas != null) {
ArticleBean bean = mArticleDatas.get(position);
Utils.startWebView(this, bean.title, bean.link);
}
}
@Override
public void onCollectionClick(View view, int position) {
ToastUtils.setBgColor(getResources().getColor(R.color.colorPrimaryDark, null));
ToastUtils.setMsgColor(getResources().getColor(R.color.white, null));
ToastUtils.showShort(R.string.coming_soon);
}
@Override
public void onLoadMore(@NonNull RefreshLayout refreshLayout) {
mCurPage++;
mPresenter.loadArticle(mCurPage);
}
@Override
public void onRefresh(@NonNull RefreshLayout refreshLayout) {
mCurPage = 0;
mPresenter.refreshArticle();
}
@Override
protected void onPause() {
super.onPause();
mRefreshLayout.finishRefresh();
mRefreshLayout.finishLoadMore();
}
@Override
public void onError(Throwable e) {
//加載
if (mRefreshLayout.getState() == RefreshState.Loading) {
mRefreshLayout.finishLoadMore();
mCurPage--;
}
//刷新
if (mRefreshLayout.getState() == RefreshState.Refreshing) {
mRefreshLayout.finishRefresh();
}
}
@Override
public void onComplete() {
LogUtils.d("mRefreshLayout.getState()：" + mRefreshLayout.getState());
//加載
if (mRefreshLayout.getState() == RefreshState.Loading) {
mRefreshLayout.finishLoadMore();
}
//刷新
if (mRefreshLayout.getState() == RefreshState.Refreshing) {
mRefreshLayout.finishRefresh();
}
}
}
上滑隱藏Banner
Banner雖然提供了很好的內(nèi)容展示形式，但是在上滑的過程中碟摆，我希望能夠看到更多的文章列表內(nèi)容晃财，這個(gè)時(shí)候選擇將Banner隱藏是最好的辦法，將Banner隱藏的方法有很多典蜕，這里選擇使用官方的控件來處理拓劝，實(shí)現(xiàn)起來也是非常簡(jiǎn)單，只需要在布局文件中進(jìn)行修改即可嘉裤。
1.引入依賴庫(kù)
//design
implementation 'com.android.support:design:28.0.0'
2.修改布局文件
這里使用CoordinatorLayout作為根布局郑临，結(jié)合AppBarLayout、CollapsingToolbarLayout來實(shí)現(xiàn)預(yù)期效果屑宠。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".view.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap">
<com.youth.banner.Banner
android:id="@+id/main_banner"
android:layout_width="match_parent"
android:layout_height="@dimen/banner_height"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<com.scwang.smartrefresh.layout.header.ClassicsHeader
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/article_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.scwang.smartrefresh.layout.footer.ClassicsFooter
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
全部修改完成后厢洞，運(yùn)行程序，滿足要求典奉，剩下的內(nèi)容后面慢慢加躺翻。
