Android练手小项目（KTReader）基于mvp架构（三）

上路传送眼：

Android练手小项目（KTReader）基于mvp架构（二）

下路传送眼：

Android练手小项目（KTReader）基于mvp架构（四）

GIthub地址: https://github.com/yiuhet/KTReader

上篇文章中我们完成了知乎日报内容的fragment。
而这次我们要做的的就是知乎日报详情页。

惯例先上效果图：

效果图

准备工作

• 添加依赖

compile 'com.jude:swipebackhelper:3.1.2' //右滑关闭详情页

• 工具类
  utils.WebUtil.class(返回html结果的工具类):

public class WebUtil {
    private WebUtil() {
    }

    public static final String BASE_URL = "file:///android_asset/";
    public static final String MIME_TYPE = "text/html";
    public static final String ENCODING = "utf-8";
    public static final String FAIL_URL = "http//:daily.zhihu.com/";

    private static final String CSS_LINK_PATTERN = " <link href=\"%s\" type=\"text/css\" rel=\"stylesheet\" />";
    private static final String DIV_IMAGE_PLACE_HOLDER = "class=\"img-place-holder\"";

    public static String buildHtmlWithCss(String html, List<String> cssUrls) {
        StringBuilder result = new StringBuilder();
        for (String cssUrl : cssUrls) {
            result.append(String.format(CSS_LINK_PATTERN, cssUrl));
        }
        result.append(html.replace(DIV_IMAGE_PLACE_HOLDER, ""));
        return result.toString();
    }
}

Model层

• 模型实体类ZhihuDetail直接使用GsonFormat工具快速生成
  （model.entity.ZhihuDetail）

• 知乎日报Model接口
  model.ZhihuDetailModel:

public interface ZhihuDetailModel {

    void loadDetail(String id, OnZhihuDetailListener listener);
}

• 获取日报详情的Model实现

public class ZhihuDetailModelImp1 implements ZhihuDetailModel {
    // /*获取日报详情的Model实现*/

    private ZhihuApi mZhihuApiService; //请求服务
    private ZhihuDetail mZhihuDetail;

    public ZhihuDetailModelImp1() {
        mZhihuDetail = new ZhihuDetail();
        mZhihuApiService = RetrofitManager
                .getInstence()
                .getRetrofit("http://news-at.zhihu.com/api/4/news/")
                .create(ZhihuApi.class); //创建请求服务
    }

    public ZhihuDetail getDetail() {
        return mZhihuDetail;
    }


    @Override
    public void loadDetail(String id, final OnZhihuDetailListener listener) {
        if (mZhihuApiService != null) {
            mZhihuApiService.getDetail(id)
                    .subscribeOn(Schedulers.io())
                    .observeOn(AndroidSchedulers.mainThread())
                    .subscribe(new Observer<ZhihuDetail>() {
                        @Override
                        public void onSubscribe(@NonNull Disposable d) {

                        }

                        @Override
                        public void onNext(@NonNull ZhihuDetail zhihuDetail) {
                            mZhihuDetail = zhihuDetail;
                            listener.onLoadZhihuDetailSuccess(zhihuDetail);//加载成功时 回调接口方法。
                        }

                        @Override
                        public void onError(@NonNull Throwable e) {
                            listener.onLoadDataError(e.toString());//加载失败时 回调接口方法。
                        }

                        @Override
                        public void onComplete() {

                        }
                    });
        }
    }
}

View层

• 创建回调接口
  view.ZhihuDetailView:

public interface ZhihuDetailView {
    void onStartGetData();

    void onGetDetailSuccess(ZhihuDetail zhihuDetail);

    void onGetDetailFailed(String error);
}

• 创建ZhihuDetailActivity
  详情页包含的新知识点全在ZhihuDetailActivity上,所涵盖的知识有：
  • WebView的使用
  • 右滑关闭activity（也不算知识点，因为使用别人的开源，以后要改写成自己的）
  • CollapsingToolbarLayout 和NestedScrollView的使用

附上一些资料：
WebView·开车指南
看，这个工具栏能伸缩折叠——Android CollapsingToolbarLayout使用
[Jude95/SwipeBackHelper]

具体解释全都在代码注释里。
直接上代码
ui.activity.ZhihuDetailActivity .class:

public class ZhihuDetailActivity extends MVPBaseActivity<ZhihuDetailView, ZhihuDetailPresenterImp1> implements ZhihuDetailView {

    @BindView(R.id.toolbar)
    Toolbar mToolbar;
    @BindView(R.id.toolbar_layout)
    CollapsingToolbarLayout mToolbarLayout;
    @BindView(R.id.prograss)
    ProgressBar mPrograss;
    @BindView(R.id.wv_zhihu)
    WebView mWvZhihu;
    @BindView(R.id.fab)
    FloatingActionButton mFab;
    @BindView(R.id.iv_title)
    ImageView mIvTitle;
    private String mZhihuId;

    @Override
    protected ZhihuDetailPresenterImp1 createPresenter() {
        return new ZhihuDetailPresenterImp1(this);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        SwipeBackHelper.onCreate(this);
        ButterKnife.bind(this);
        initToolbar();
        initView();
    }

    private void initToolbar() {
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
    }

    private void initView() {
        mZhihuId = getIntent().getStringExtra("ZHIHUID");
        mPresenter.getDetail(mZhihuId);
        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "已添加进收藏夹（待做功能）", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        mWvZhihu.setVerticalScrollBarEnabled(true);
        mWvZhihu.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_INSET);

        WebSettings settings = mWvZhihu.getSettings();
        //设置应用缓存路径，这个路径必须是可以让app写入文件的。该方法应该只被调用一次，重复调用会被无视~
        settings.setAppCachePath(getCacheDir().getAbsolutePath() + "/webViewCache");
        settings.setAppCacheEnabled(true); //启用应用缓存。
        settings.setDatabaseEnabled(true); //启用数据库缓存。
        settings.setDomStorageEnabled(true); //开启DOM缓存
        //用来设置WebView的缓存模式(这里使用的是 只要缓存可用就加载缓存)
        settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        settings.setJavaScriptEnabled(true); //设置WebView可以运行JavaScript。
        settings.setBuiltInZoomControls(true);//显示或不显示缩放按钮（wap网页不支持）。
        //指定WebView的页面布局显示形式，调用该方法会引起页面重绘
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        mWvZhihu.setWebChromeClient(new WebChromeClient());

    }

    @Override
    protected int getLayoutRes() {
        return R.layout.activity_zhihu_detail;
    }

    @Override
    public void onStartGetData() {
        mPrograss.setVisibility(View.VISIBLE);
    }

    @Override
    public void onGetDetailSuccess(ZhihuDetail zhihuDetail) {
        mPrograss.setVisibility(View.GONE);
        mToolbarLayout.setTitle(zhihuDetail.title);
        //在较为特殊的情况下，知乎日报可能将某个主题日报的站外文章推送至知乎日报首页。
        if (zhihuDetail.body == null) {
            mWvZhihu.loadUrl(zhihuDetail.shareUrl);
        } else {
            Glide.with(this).load(zhihuDetail.image).into(mIvTitle);
            String data = WebUtil.buildHtmlWithCss(zhihuDetail.body, zhihuDetail.css);
            mWvZhihu.loadDataWithBaseURL(WebUtil.BASE_URL, data, WebUtil.MIME_TYPE, WebUtil.ENCODING, WebUtil.FAIL_URL);
        }
    }

    @Override
    public void onGetDetailFailed(String error) {
        mPrograss.setVisibility(View.GONE);
        toast(error);
    }

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        SwipeBackHelper.onPostCreate(this);
    }

    @Override
    protected void onDestroy() {
        if (mWvZhihu != null) {
            //webview内存泄露
            ((ViewGroup) mWvZhihu.getParent()).removeView(mWvZhihu);
            mWvZhihu.destroy();
            mWvZhihu = null;
        }
        super.onDestroy();
        SwipeBackHelper.onDestroy(this);
    }
}

另附上ZhihuDetailActivity的布局文件：

activity_zhihu_detail.xml:

<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:fitsSystemWindows="true"
    tools:context="com.example.yiuhet.ktreader.ui.activity.ZhihuDetailActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="16dp"
            app:expandedTitleMarginStart="24dp"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_title"
                android:layout_width="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                android:fitsSystemWindows="true"
                android:layout_height="match_parent"/>
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                android:background="@color/title_mask"></FrameLayout>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_zhihu_detail" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

content_zhihu_detail.xml:

<android.support.v4.widget.NestedScrollView 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.yiuhet.ktreader.ui.activity.ZhihuDetailActivity"
    tools:showIn="@layout/activity_zhihu_detail">

        <WebView
            android:id="@+id/wv_zhihu"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ProgressBar
                android:id="@+id/prograss"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:indeterminate="true"
                android:indeterminateTint="?android:colorAccent"/>
        </WebView>
</android.support.v4.widget.NestedScrollView>

ZhihuDetailActivity里的fab点击事件预想是添加入收藏栏，等之后写到收藏栏功能时会完成该功能
ps：从效果图中，可以看出CollapsingToolbarLayout的title显示不全，目前还没找到解决办法（貌似可以写theme解决，回头再实验下），如果有知道的，请告知，谢谢。

Presenter层

在ZhihuPresenterImp1类里实现数据和视图的绑定

• 先写一个回调接口：
  (在Presenter层实现，给Model层回调，更改View层的状态，确保Model层不直接操作View层)
  presenter.OnZhihuDetailListener ：

public interface OnZhihuDetailListener {

    void onLoadZhihuDetailSuccess(ZhihuDetail zhihuDetail);

    void onLoadDataError(String error);
}

• 再写一个presenter接口：
  presenter.ZhihuDetailPresenter ：

public interface ZhihuDetailPresenter {
    void getDetail(String id);
}

• 最后写Prestener实现类：
  presenter.imp1.ZhihuDetailPresenterImp1 .class:

public class ZhihuDetailPresenterImp1 extends BasePresenter<ZhihuDetailView> implements ZhihuDetailPresenter,OnZhihuDetailListener{
    /*Presenter作为中间层，持有View和Model的引用*/
    private ZhihuDetailView mZhihuDetailView;
    private ZhihuDetailModelImp1 zhihuDetailModelImp1;
    String id;

    public ZhihuDetailPresenterImp1(ZhihuDetailView zhihuDetailView) {
        mZhihuDetailView = zhihuDetailView;
        zhihuDetailModelImp1 = new ZhihuDetailModelImp1();
    }


    @Override
    public void getDetail(String id) {
        mZhihuDetailView.onStartGetData();
        zhihuDetailModelImp1.loadDetail(id, this);
    }


    @Override
    public void onLoadZhihuDetailSuccess(ZhihuDetail zhihuDetail) {

        mZhihuDetailView.onGetDetailSuccess(zhihuDetail);
    }

    @Override
    public void onLoadDataError(String error) {
        mZhihuDetailView.onGetDetailFailed(error);
    }
}