在github上看到一款开源项目,感觉效果还不错。决定自己也开发一款这样的软件。
效果图如下:开源项目地址
UI设计方面:
最外层直接使用了一个Activity,然后是DrawerLayout。闲读和福利等四个功能使用Fragment动态添加和切换。
下面分析“闲读”和“福利”这两个功能所涉及的内容。
-
闲读
UI设计:上方是一个ToolBar,下面是一个ViewPager+TabLayout打造的可以左右切换标签的功能,最下方区域是一个使用RecyclerView打造的列表项。列表项使用CardView。点击任意选项后进入详情内容界面。
于是乎,我们的xml布局就出来了。
-
项目中我使用了DataBinding,所以跟一般的布局文件会有所差异。不过内容大致一样。
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap">
<TextView
android:id="@+id/toolbar_title"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
</layout>
- 接下来就是如何实现数据的获取了
项目中使用的是内容数据获取网站地址 干货网站上的闲读专区,采用的技术是使用Jsoup爬取。
大致流程如下
- 使用Jsoup爬取到所有分类标签,并存入相应的实体类对象中(源项目中的XianduCategory)。
- 然后根据XianduCategory中的url获取到该分类下的所有子项内容。
- 填充数据到RecyclerView的Adapter。
- 具体代码请参照
FakeWeather
点击后的内容详情界面,项目中采取了直接使用WebView显示,使用到第三方开源库,解决了原生webView中一些麻烦的问题。可以自定义分享,刷新颜色等内容。
compile 'com.thefinestartist:finestwebview:1.2.7'
-
福利
UI设计:
这块内容的与上“闲读”的区别主要为,上面的RecyclerView中显示的是CardView,而这里使用ImageView做子项。布局文件跟上面给出的类似。内容获取:
使用ApI接口Api地址直接解析Gson数据,然后装入Adapter。项目中采用RxJava + Retofit结合处理网络和异步请求。如果尚未接触这些技术,也可以自己采取熟悉实现方式。
这篇文章主要讲述UI的设计与功能的实现。详细实现步骤,请关注后续文章。
网友评论