高仿知乎日报(四)

最新推荐文章于 2017-05-09 16:40:16 发布

Krelve

最新推荐文章于 2017-05-09 16:40:16 发布

阅读量1.5k

点赞数

分类专栏： android 文章标签： android 高仿开源

本文链接：https://blog.csdn.net/krelve/article/details/47732255

版权

android 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

原文出处——krelve.com
之前已经大致上把文章的列表都展示了出来，这次就实现点击事件，可以阅读具体的文章内容。
先上成果：

看了图就知道了，今天的任务是文章内容的展示，和通过CoordinatorLayout等一系列design包中的控件来实现滚动效果，以及activity之间跳转的一个全屏扩散的特效，挺不错吧。
1.文章内容的展示，重点就是WebVIew的使用，其实比一般的WebView用的还简单，因为返回的数据中有css文件，直接引入就行，那就看看怎么在WebView中加载css文件吧：

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        HttpUtils.get(Constant.CONTENT + entity.getId(), new TextHttpResponseHandler() {
            @Override
            public void onFailure(int statusCode, Header[] headers, String responseString, Throwable throwable) {

            }

            @Override
            public void onSuccess(int statusCode, Header[] headers, String responseString) {
                Gson gson = new Gson();
                content = gson.fromJson(responseString, Content.class);
                final ImageLoader imageloader = ImageLoader.getInstance();
                imageloader.displayImage(content.getImage(), iv);
                String css = "<link rel=\"stylesheet\" href=\"file:///android_asset/css/news.css\" type=\"text/css\">";
                String html = "<html><head>" + css + "</head><body>" + content.getBody() + "</body></html>";
                html = html.replace("<div class=\"img-place-holder\">", "");
                mWebView.loadDataWithBaseURL("x-data://base", html, "text/html", "UTF-8", null);
            }
        });

很简单，就是在html代码的头部引入css文件就行，没有必要每次都去下载css文件，而且格式是固定的，所以就直接放到了assets目录中。记住要用loadDataWithBaseURL来加载，直接用loadData会有乱码等一系列问题(返回的html代码是经过转义的)。
2.滚动效果的实现
没什么好说的，都是固定的，值得注意的地方就是CoordinatorLayout的滚动效果只能与RecyclerView和与NestedScrollView有关的一些控件搭配，所以我们给WebView外面嵌套一个NestedScrollView

<?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">

    <krelve.app.kuaihu.view.RevealBackgroundView
        android:id="@+id/revealBackgroundView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="230dp"
            android:fitsSystemWindows="true"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:collapsedTitleTextAppearance="@style/MyToolbarTextStyle"
                app:contentScrim="?attr/colorPrimaryDark"
                app:expandedTitleMarginStart="5dp"
                app:expandedTitleTextAppearance="@style/MyToolbarTextStyle"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/iv"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">


            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></WebView>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

3.activity跳转特效
在上面的布局文件中可以看到RevealBackgroundView这么一个奇怪的东西，其实这就是用来实现点击处全屏扩散效果的自定义View。原理上简单的说就是通过overridePendingTransition(0, 0)将activity之间的跳转效果取消，这样一点击就直接显示了新的activity，这时我们将新的activity的背景设置为透明，在界面上播放RevealBackgroundView的全屏扩散动画，在播放完后，将所有控件显示出来，就造成了一种界面是从点击处逐步扩散出来的假象。
代码不多贴了，感兴趣的看源码吧~
项目地址