1. 程式人生 > >手把手教你仿一個知乎日報Android客戶端(一)多圖

手把手教你仿一個知乎日報Android客戶端(一)多圖

本文為作者原創,轉載請註明出處@大蘑菇的部落格
圖片託管服務由貼相簿提供

作為一隻網蟲,肯定是經常泡在網路的海洋裡,有一天偶然看到了知乎日報的API,各方面介面都還挺全面,於是本著“不用白不用”的真理,我決定仿一個知乎日報Adnroid客戶端。

一、功能分析

知乎日報下載
在正式開始前,我們需要對知乎日報有一個充足的瞭解,現在我們來分析一下知乎日報是由哪些部分組成的。

1.啟動頁

我們可以看到,啟動頁由一張圖片以及下半部分的logo+APP名組成(我也不知道這個該怎麼叫)
所以在我們開發的時候,也需要這樣一個頁面。
那麼這個頁面做些什麼事情呢?

1.載入封面圖片:

經過較長一段時間的使用, 我發現每次啟動時該頁面的圖片都不同,有時是圖片有時是廣告,所以這張封面圖片應該來源於網路,

2.初始化第一個頁面的資料:

預先載入Home頁的資料,以便於Home啟動時就可以展示內容

2.主頁

由於知乎日報是一個閱讀類的APP,所以佈局也和許多新聞閱讀類APP相似,最上方一個標題欄,然後接著是一個banner,然後再往下就是各條內容的列表了。

Markdown

1.標題欄:

我們先來看下標題欄部分,在標題欄的左側,有一個menu的按鈕,關於這個menu我們接下來會講到,然後就是標題欄最應該有的標題,白色字型,以及右邊的一個通知logo,一個豎著的…(更多?)

2.Banner:

一個會自動滾動的圖文(?)

3.文章列表:

嗯,就是一個文章列表,點一下就進去了。

3.文章詳情

點選文章列表或者banner中的任意一個,我們都可以直接進入文章詳情頁面

Markdown

1.內容瀏覽:

通過上下滑動,我們可以很方便的檢視文章的內容
內容包括頂部的一張圖片,以及標題還有下方的內容。

2.瀏覽切換:

當我們閱讀完任何一篇文章想要瀏覽下一篇的時候,無需返回重新點選了,可以在此頁面直通過側滑切換,不過需要注意的是,在列表的第一篇和最後一篇是無法切換出前一篇和後一篇的

Markdown

3.分享:

一個分享頁面的彈窗,如下圖。

Markdown

4.收藏:

登入後,點選收藏,它就收藏了。。

5.檢視評論:

檢視並且發表對這篇文章的評論。

Markdown

6.點贊:

就是贊+1咯。。。

7.返回:

一個back鍵

4.側滑選單

可以看到,側滑選單由一個登入按鈕,一個我的收藏,一個離線下載,以及下面的各型別欄目列表組成。

Markdown

1.登入:

就一個登入頁面,需要使用新浪微博或者騰訊微博登入,大概是為了便於分享到微博吧。

Markdown

2.我的收藏:

以我的賬號為例,收藏了以下六條日報。

Markdown

3.離線下載:

點選離線下載,在本地生成這些文章列表的快取,以後在無網路或者無wifi的狀態下可以直接瀏覽。

4.文章欄目:

點選文章欄目可以使頁面顯示該欄目下的各篇文章

5.欄目訂閱:

點選欄目名稱後或者欄目列表標題欄上的“+”,即可訂閱該欄目,具體有什麼作用,我還沒有察覺到

6.取消訂閱:

點選欄目列表標題欄上的“—”即可取消訂閱該欄目。

5.訊息欄

Markdown

1.評論回覆:

真可惜目前還沒人回覆我的評論。。。。

2.評論被贊:

如下圖

6.檢視贊

Markdown

1.原文連結:

在頂部顯示原文標題,點選可跳轉到原文

2.我的點評:

顯示你的頭像和id,以及評論的內容,被讚的數量

3.點贊使用者:

下方顯示一排讚了此條評論的使用者的頭像

7.設定

如下圖
Markdown