原文出处——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的全屏扩散动画,在播放完后,将所有控件显示出来,就造成了一种界面是从点击处逐步扩散出来的假象。
代码不多贴了,感兴趣的看源码吧~
项目地址