Android Java - 簡易今日頭條 - 新聞數據請求與卡片渲染

前言#

上一篇文章中我介紹了如何在 RecyclerView 中渲染三種不同的卡片樣式，這次我們加上了數據請求渲染，使該頁面是動態加載的。

Display#

項目倉庫#

簡易今日頭條 - Github

具體實現#

關於卡片渲染細節我已經在 RecyclerView 顯示多種寫過了，所以這裡專注於怎麼使用 OkHttp 進行數據請求，與重新回到主 UI Thread 進行卡片渲染。

`models/news/NewsDataModel.java`#

這個類是為了請求回來的數據做一個數據模型，方便後面將數據添入 NewsCardItemDataModel，使邏輯更加清晰。這裡一樣有三種構造函數，分別代表三種不同的卡片類型。

1
package com.example.toutiao.models.news;
2

3
import java.util.ArrayList;
4

5
/**
6
 * Data Model Class for news After requesting
7
 */
8

9
public class NewsDataModel {
10
    public static final int NO_IMAGE_TYPE = 0;
11
    public static final int ONE_IMAGE_TYPE = 1;
12
    public static final int THREE_IMAGE_TYPE = 2;
13
    // same
14
    private int mNewsCardStyleType; // three different card style
15
    private String mNewsId; // id
16
    private String mNewsTitle; // news title
17
    private String mNewsAbstract; // news abstract
18
    private int mNewsCommentsCount; // comments count
19
    private String mNewsSource; // author name
20
    private String mNewsMediaAvatarUrl; // author avatar
21
    private String mNewsSourceUrl; // detail page url
22
    // different
23
    private String mNewsImageUrl; // one image card style
24
    private ArrayList<String> mNewsThreeImage; // three image card style
25

26
    // no image style constructor
27
    public NewsDataModel(
28
            int newsCardStyleType,
29
            String newsId,
30
            String newsTitle,
31
            String newsAbstract,
32
            int newsCommentsCount,
33
            String newsSource,
34
            String newsMediaAvatarUrl,
35
            String newsSourceUrl
36
    ) {
37
        mNewsCardStyleType = newsCardStyleType;
38
        mNewsId = newsId;
39
        mNewsTitle = newsTitle;
40
        mNewsAbstract = newsAbstract;
41
        mNewsCommentsCount = newsCommentsCount;
42
        mNewsSource = newsSource;
43
        mNewsMediaAvatarUrl = newsMediaAvatarUrl;
44
        mNewsSourceUrl = newsSourceUrl;
45
    }
46

47
    // one image style constructor
48
    public NewsDataModel(
49
            int newsCardStyleType,
50
            String newsId,
51
            String newsTitle,
52
            String newsAbstract,
53
            int newsCommentsCount,
54
            String newsSource,
55
            String newsMediaAvatarUrl,
56
            String newsSourceUrl,
57
            String newsImageUrl
58
    ) {
59
        mNewsCardStyleType = newsCardStyleType;
60
        mNewsId = newsId;
61
        mNewsTitle = newsTitle;
62
        mNewsAbstract = newsAbstract;
63
        mNewsCommentsCount = newsCommentsCount;
64
        mNewsSource = newsSource;
65
        mNewsMediaAvatarUrl = newsMediaAvatarUrl;
66
        mNewsSourceUrl = newsSourceUrl;
67
        mNewsImageUrl = newsImageUrl;
68
    }
69

70
    // three image style constructor
71
    public NewsDataModel(
72
            int newsCardStyleType,
73
            String newsId,
74
            String newsTitle,
75
            String newsAbstract,
76
            int newsCommentsCount,
77
            String newsSource,
78
            String newsMediaAvatarUrl,
79
            String newsSourceUrl,
80
            ArrayList<String> newsThreeImage
81
    ) {
82
        mNewsCardStyleType = newsCardStyleType;
83
        mNewsId = newsId;
84
        mNewsTitle = newsTitle;
85
        mNewsAbstract = newsAbstract;
86
        mNewsCommentsCount = newsCommentsCount;
87
        mNewsSource = newsSource;
88
        mNewsMediaAvatarUrl = newsMediaAvatarUrl;
89
        mNewsSourceUrl = newsSourceUrl;
90
        mNewsThreeImage = newsThreeImage;
91
    }
92

93
    public int getNewsCardStyleType() {
94
        return mNewsCardStyleType;
95
    }
96

97
    public void setNewsCardStyleType(int newsCardStyleType) {
98
        mNewsCardStyleType = newsCardStyleType;
99
    }
100

101
    public String getNewsId() {
102
        return mNewsId;
103
    }
104

105
    public void setNewsId(String newsId) {
106
        mNewsId = newsId;
107
    }
108

109
    public String getNewsTitle() {
110
        return mNewsTitle;
111
    }
112

113
    public void setNewsTitle(String newsTitle) {
114
        mNewsTitle = newsTitle;
115
    }
116

117
    public String getNewsAbstract() {
118
        return mNewsAbstract;
119
    }
120

121
    public void setNewsAbstract(String newsAbstract) {
122
        mNewsAbstract = newsAbstract;
123
    }
124

125
    public int getNewsCommentsCount() {
126
        return mNewsCommentsCount;
127
    }
128

129
    public void setNewsCommentsCount(int newsCommentsCount) {
130
        mNewsCommentsCount = newsCommentsCount;
131
    }
132

133
    public String getNewsSource() {
134
        return mNewsSource;
135
    }
136

137
    public void setNewsSource(String newsSource) {
138
        mNewsSource = newsSource;
139
    }
140

141
    public String getNewsMediaAvatarUrl() {
142
        return mNewsMediaAvatarUrl;
143
    }
144

145
    public void setNewsMediaAvatarUrl(String newsMediaAvatarUrl) {
146
        mNewsMediaAvatarUrl = newsMediaAvatarUrl;
147
    }
148

149
    public String getNewsSourceUrl() {
150
        return mNewsSourceUrl;
151
    }
152

153
    public void setNewsSourceUrl(String newsSourceUrl) {
154
        mNewsSourceUrl = newsSourceUrl;
155
    }
156

157
    public String getNewsImageUrl() {
158
        return mNewsImageUrl;
159
    }
160

161
    public void setNewsImageUrl(String newsImageUrl) {
162
        mNewsImageUrl = newsImageUrl;
163
    }
164

165
    public ArrayList<String> getNewsThreeImage() {
166
        return mNewsThreeImage;
167
    }
168

169
    /*
170
     * add a image to mNewsThreeImage array list
171
     */
172
    public void setNewsThreeImage(String newsImageUrl) {
173
        this.mNewsThreeImage.add(newsImageUrl);
174
    }
175
}

`ui/page/newsChannel/newsChannelFragment.java`#

這裡是我們需要進行新聞內容請求的 Fragment。我使用的是 OkHttp 的方法，如果不知道 OkHttp 可以去 Github 看看 square/okhttp - github。

引入依賴需要在 build.gradle 中加上下面一段話：

1
dependencies {
2
  // ...
3
    implementation 'com.squareup.okhttp3:okhttp:4.9.1'
4
}

注意：為了能夠進行網路請求需要在 /manifests/AndroidManifest.xml 中加上 <uses-permission android:name="android.permission.INTERNET" /> 這段話。

1
<?xml version="1.0" encoding="utf-8"?>
2
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3
    package="com.example.toutiao">
4

5
    <uses-permission android:name="android.permission.INTERNET" />
6
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
7
// ...

下面的 Code 中我分別使用 getUserAgent() 固定 UA，getInitNews() 請求新聞數據，initRenderCardList() 做數據渲染，dealWithResponseBody() 處理請求回來的 ResponseBody，dealWithNewsObject() 處理每個新聞列表，mHandler 負責請求後回到在主 UI 線程裡面進行渲染（也就是initRenderCardList()），這裡的注意點有：

除了固定 UA 外，需要將請求回來的 Response 中 Header 的 Set-Cookie 加入下一次請求中的 Cookie，這樣避免了請求回來的數據與原數據重複性。
請求必須使用多線程的方式進行異步請求，不能在 UI 主線程請求，這是新的 Android 規定，所以我建議可以使用 AsyncTask 或是 Okhttp 的異步回調方法。我下面的 Example 是使用了後者。
OkHttp 中異步請求的 response.body().string() 只能使用一次，使用完一次後就會將回應 Body 刪除節省資源（我也不知道為什麼要這樣設計），所以需要先存成 String 類型，再接著使用。
注意處理每一次數據，檢查是否有些數據不完整，或是 ResponseBody 是空的情況都需要考慮，如果沒有考慮到，就會經常在運行項目時產生 Crash。

1
package com.example.toutiao.ui.page.newsChannel;
2

3
// ...
4

5
import okhttp3.Call;
6
import okhttp3.Callback;
7
import okhttp3.OkHttpClient;
8
import okhttp3.Request;
9
import okhttp3.Response;
10

11
import static com.example.toutiao.ui.card.newsCardList.NewsCardItemDataModel.NO_IMAGE_TYPE;
12
import static com.example.toutiao.ui.card.newsCardList.NewsCardItemDataModel.ONE_IMAGE_TYPE;
13
import static com.example.toutiao.ui.card.newsCardList.NewsCardItemDataModel.THREE_IMAGE_TYPE;
14

15
/**
16
 * A simple {@link Fragment} subclass.
17
 * Use the {@link NewsChannelFragment#newInstance} factory method to
18
 * create an instance of this fragment.
19
 */
20
public class NewsChannelFragment extends Fragment {
21
    private static final String BASE_URL =
22
            "https://www.toutiao.com/api/pc/feed/?max_behot_time=%d&category=%s";
23
    private static final String[] CATEGORY_ATTR = new String[]{
24
            "__all__",
25
            "news_tech",
26
//            "news_image",
27
            "news_hot",
28
            "news_entertainment",
29
            "news_game",
30
            "news_sports",
31
            "news_finance",
32
            "digital"
33
    };
34
    private static final String DEFAULT_AVATAR =
35
            "https://img.88icon.com/download/jpg/20200901/84083236c883964781afea41f1ea4e9c_512_511.jpg!88bg";
36
    private static final String DEFAULT_IMAGE =
37
            "https://www.asiapacdigital.com/Zh_Cht/img/ap/services/reseller/TouTiao_1.jpg";
38
    private static final int INIT_OR_REFRESH = 0;
39
    private static final int LOAD_MORE = 1;
40
    private static final int LOAD_FAIL = 2;
41
    private ArrayList<NewsDataModel> mNewsDataModelList = new ArrayList<>();
42
    private PageViewModel mPageViewModel;
43
    private RecyclerView mCardListRecyclerView;
44
    private NewsCardAdapter mCardListAdapter;
45
    private RecyclerView.LayoutManager mCardListLayoutManager;
46
    private Boolean mIsScrollToTop = false;
47
    private final List<NewsCardItemDataModel> mCardDataModelList = new ArrayList<>();
48
    private String mCategory;
49
    private int mIndex;
50
    private boolean mIsRefresh = false;
51
    private boolean mIsLoadMore = false;
52
    private boolean mIsLoadingFail = false;
53
    private int mMaxBehotTime = 0;
54
    private String mCookie;
55

56
    public NewsChannelFragment() {
57
    }
58

59
    /**
60
     * Use this factory method to create a new instance of
61
     * this fragment using the provided parameters.
62
     */
63
    public static NewsChannelFragment newInstance(String category, int index) {
64
        NewsChannelFragment fragment = new NewsChannelFragment();
65
        Bundle bundle = new Bundle();
66
        bundle.putString("category", category);
67
        bundle.putInt("index", index);
68
        fragment.setArguments(bundle);
69
        return fragment;
70
    }
71

72
    @Override
73
    public void onCreate(Bundle savedInstanceState) {
74
        super.onCreate(savedInstanceState);
75
        mPageViewModel = new ViewModelProvider(this).get(PageViewModel.class);
76
        if (getArguments() != null) {
77
            mCategory = getArguments().getString("category");
78
            mIndex = getArguments().getInt("index");
79
        }
80
        mPageViewModel.setCategory(mCategory);
81
        mPageViewModel.setIndex(mIndex);
82
    }
83

84
    @Override
85
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
86
                             Bundle savedInstanceState) {
87
        View view = inflater.inflate(R.layout.fragment_news_channel, container, false);
88
        // cardList
89
        mCardListRecyclerView = view.findViewById(R.id.recycler_view_card_list);
90

91
        // use this setting to improve performance if you know that changes
92
        // in content do not change the layout size of the RecyclerView
93
        mCardListRecyclerView.setHasFixedSize(true);
94

95
        // use a linear layout manager
96
        mCardListLayoutManager = new LinearLayoutManager(getContext());
97
        mCardListRecyclerView.setLayoutManager(mCardListLayoutManager);
98

99
        // specify an adapter and pass in our data model list
100
        mCardListAdapter = new NewsCardAdapter(mCardDataModelList, getContext());
101
        mCardListRecyclerView.setAdapter(mCardListAdapter);
102

103
        TextView mSectionLabelTextView = view.findViewById(R.id.text_view_section_label);
104

105
        // init
106
        getInitNews();
107

108
        mPageViewModel.getCategory().observe(getViewLifecycleOwner(), new Observer<String>() {
109
            @Override
110
            public void onChanged(@Nullable String s) {
111
                mSectionLabelTextView.setText(s);
112
            }
113
        });
114

115
        return view;
116
    }
117

118
    // render the recycler view card list when init and refreshing
119
    public void initRenderCardList() {
120
        Log.v("start init render", "render init card, news list size: " + mNewsDataModelList.size());
121
        for (int i = 0; i < mNewsDataModelList.size(); i++) {
122
            int type = mNewsDataModelList.get(i).getNewsCardStyleType();
123
            String newsId = mNewsDataModelList.get(i).getNewsId();
124
            String newsTitle = mNewsDataModelList.get(i).getNewsTitle();
125
            String newsAbstract = mNewsDataModelList.get(i).getNewsAbstract();
126
            int newsCommentsCount = mNewsDataModelList.get(i).getNewsCommentsCount();
127
            String newsSource = mNewsDataModelList.get(i).getNewsSource();
128
            String newsMediaAvatarUrl = mNewsDataModelList.get(i).getNewsMediaAvatarUrl();
129
            String newsSourceUrl = mNewsDataModelList.get(i).getNewsSourceUrl();
130

131
            if (type == NO_IMAGE_TYPE) {
132
                mCardDataModelList.add(new NewsCardItemDataModel(
133
                        NO_IMAGE_TYPE,
134
                        newsId,
135
                        newsTitle,
136
                        newsAbstract,
137
                        newsCommentsCount,
138
                        newsSource,
139
                        newsMediaAvatarUrl,
140
                        newsSourceUrl
141
                ));
142
            } else if (type == ONE_IMAGE_TYPE) {
143
                String middleImage = mNewsDataModelList.get(i).getNewsImageUrl();
144
                mCardDataModelList.add(new NewsCardItemDataModel(
145
                        ONE_IMAGE_TYPE,
146
                        newsId,
147
                        newsTitle,
148
                        newsAbstract,
149
                        newsCommentsCount,
150
                        newsSource,
151
                        newsMediaAvatarUrl,
152
                        newsSourceUrl,
153
                        middleImage
154
                ));
155

156
            } else if (type == THREE_IMAGE_TYPE) {
157
                ArrayList<String> newsThreeImage = mNewsDataModelList.get(i).getNewsThreeImage();
158
                mCardDataModelList.add(new NewsCardItemDataModel(
159
                        THREE_IMAGE_TYPE,
160
                        newsId,
161
                        newsTitle,
162
                        newsAbstract,
163
                        newsCommentsCount,
164
                        newsSource,
165
                        newsMediaAvatarUrl,
166
                        newsSourceUrl,
167
                        newsThreeImage
168
                ));
169
            }
170
        }
171
        mLoadingAnimationView.setVisibility(View.GONE);
172
        mScreenMaskView.setVisibility(View.GONE);
173
        mCardListRefreshLayout.finishRefreshing();
174
        mCardListAdapter = new NewsCardAdapter(mCardDataModelList, getContext());
175
        mCardListRecyclerView.setAdapter(mCardListAdapter);
176

177
        mIsRefresh = false;
178
    }
179

180
    private String getUserAgent() {
181
        String userAgent = "";
182
        try {
183
            userAgent = WebSettings.getDefaultUserAgent(getContext());
184
        } catch (Exception e) {
185
            userAgent = System.getProperty("https.agent");
186
        }
187
        StringBuffer sb = new StringBuffer();
188
        for (int i = 0, length = userAgent.length(); i < length; i++) {
189
            char c = userAgent.charAt(i);
190
            if (c <= '\u001f' || c >= '\u007f') {
191
                sb.append(String.format("\\u%04x", (int) c));
192
            } else {
193
                sb.append(c);
194
            }
195
        }
196
        return sb.toString();
197
    }
198

199
    /**
200
     * a methods to init card list
201
     *
202
     */
203
    public void getInitNews() {
204
        // init data
205
        mNewsDataModelList.clear();
206
        mCardDataModelList.clear();
207
        mLoadingAnimationView.setVisibility(View.VISIBLE);
208
        mMaxBehotTime = 0;
209
        // setting request
210
        OkHttpClient client = new OkHttpClient();
211
        Log.v("request url", String.format(Locale.ENGLISH, BASE_URL, mMaxBehotTime, CATEGORY_ATTR[mIndex]));
212
        Request request = new Request.Builder()
213
                .get()
214
                .url(String.format(Locale.ENGLISH, BASE_URL, mMaxBehotTime, CATEGORY_ATTR[mIndex]))
215
                .addHeader("User-Agent", getUserAgent())
216
                .build();
217
        Call call = client.newCall(request);
218

219
        call.enqueue(new Callback() {
220
            @Override
221
            public void onFailure(@NotNull Call call, @NotNull IOException e) {
222
                e.printStackTrace();
223
            }
224

225
            @Override
226
            public void onResponse(@NotNull Call call, @NotNull final Response response) throws IOException {
227
                Log.v("json status", " " + response.code());
228
                Log.v("json body", " " + (response.body() != null));
229
                String jsonData = response.body().string();
230
                // deal with request body
231
                dealWithResponseBody(jsonData);
232
                mCookie = response.header("Set-Cookie");
233
                Log.v("cookie", "set cookie: " + mCookie);
234
            }
235
        });
236
    }
237

238
    /**
239
     * @param jsonData
240
     */
241
    public void dealWithResponseBody(String jsonData) {
242
        // avoid that jsonData is null
243
        if(jsonData.length() < 1) {
244
            mIsLoadingFail = true;
245
            // run on main ui thread
246
            mHander.sendEmptyMessage(LOAD_FAIL);
247
            return;
248
        }
249
        Log.v("deal with response", "string to JsonObject");
250
        Log.v("deal with response", "json data\n" + jsonData);
251
        JsonObject result = JsonParser.parseString(jsonData).getAsJsonObject();
252
        Log.v("deal with response", "result, before max_behot_time " + mMaxBehotTime);
253
        Log.v("deal with response", String.valueOf(result.getAsJsonObject("next").has("max_behot_time")));
254
        mMaxBehotTime = result.getAsJsonObject("next").get("max_behot_time").getAsInt();
255
        Log.v("deal with response", "After max_behot_time : " + mMaxBehotTime + " get news object");
256
        JsonArray newsData = result.getAsJsonArray("data");
257
        for (int i = 0; i < newsData.size(); i++) {
258
            Log.v("deal with response", "newsObjects " + i);
259
            dealWithNewsObject(newsData.get(i).getAsJsonObject());
260
        }
261
        mHander.sendEmptyMessage(INIT_OR_REFRESH);
262
    }
263

264
    /**
265
     * running on main UI thread to render card list
266
     */
267
    private final Handler mHander = new Handler(new Handler.Callback() {
268
        @Override
269
        public boolean handleMessage(@NonNull Message msg) {
270
            if (msg.what == INIT_OR_REFRESH) {
271
                initRenderCardList();
272
            } else if (msg.what == LOAD_MORE) {
273
                loadMoreRenderCardList();
274
            } else if (msg.what == LOAD_FAIL) {
275
                loadingFail();
276
            }
277
            return false;
278
        }
279
    });
280

281
    /**
282
     * a methods to transfer JsonObject to NewsDataModel
283
     *
284
     * @param object
285
     */
286
    public void dealWithNewsObject(JsonObject object) {
287
        NewsDataModel temp;
288
        // id
289
        Log.v("deal with news object", "news_id " + object.get("group_id").getAsString());
290
        String newsId = object.get("group_id").getAsString();
291
        // title
292
        Log.v("deal with news object", "news_title " + object.get("title").getAsString());
293
        String newsTitle = object.get("title").getAsString();
294
        // remove \r \n \t
295
        newsTitle = newsTitle.replaceAll("\r|\n|\t", "");
296
        // abstract
297
        String newsAbstract = newsTitle;
298
        Log.v("deal with news object", "news_abstract " + object.has("abstract"));
299
        if (object.has("abstract")) {
300
            newsAbstract = object.get("abstract").getAsString();
301
            // remove \r \n \t
302
            newsAbstract = newsAbstract.replaceAll("\r|\n|\t", "");
303
        }
304
        // comments count
305
        Log.v("deal with news object", "news_comments_count " + object.has("comments_count"));
306
        int newsCommentsCount = 0;
307
        if (object.has("comments_count")) {
308
            newsCommentsCount = object.get("comments_count").getAsInt();
309
        }
310
        // news source
311
        Log.v("deal with news object", "news_source " + object.get("source").getAsString());
312
        String newsSource = object.get("source").getAsString();
313
        // news media avatar url
314
        String newsMediaAvatarUrl = DEFAULT_AVATAR;
315
        if (object.has("media_avatar_url")) {
316
            newsMediaAvatarUrl = "https:" + object.get("media_avatar_url").getAsString();
317
        }
318
        // news source url
319
        Log.v("deal with news object", "news_source_url " + object.get("source_url").getAsString());
320
        String newsSourceUrl = object.get("source_url").getAsString();
321

322
        Log.v("deal with news object", "have image_list " + object.has("image_list"));
323
        Log.v("deal with news object", "single_mode " + object.get("single_mode").getAsBoolean());
324
        // three image style
325
        if (object.has("image_list")) {
326
            JsonArray imageList = object.get("image_list").getAsJsonArray();
327
            ArrayList<String> newsThreeImage = new ArrayList<>();
328

329
            // the Json Array is not null
330
            if(imageList.size() < 3) {
331
                for (int i = 0; i < 3; i++) {
332
                    // avoid url is null
333
                    newsThreeImage.add(DEFAULT_IMAGE);
334
                }
335
            } else {
336
                for (int i = 0; i < 3; i++) {
337
                    // avoid url is null
338
                    String url = imageList.get(i).getAsJsonObject().get("url").getAsString();
339
                    if(url.length() == 0) {
340
                        url = DEFAULT_IMAGE;
341
                    } else {
342
                        url = "https:" + url;
343
                    }
344
                    newsThreeImage.add(url);
345
                }
346
            }
347
            temp = new NewsDataModel(
348
                    NewsDataModel.THREE_IMAGE_TYPE,
349
                    newsId,
350
                    newsTitle,
351
                    newsAbstract,
352
                    newsCommentsCount,
353
                    newsSource,
354
                    newsMediaAvatarUrl,
355
                    newsSourceUrl,
356
                    newsThreeImage
357
            );
358
        }
359
        // one image style
360
        else if (object.get("single_mode").getAsBoolean()) {
361
            String middleImage = "https:" + object.get("image_url").getAsString();
362

363
            temp = new NewsDataModel(
364
                    NewsDataModel.ONE_IMAGE_TYPE,
365
                    newsId,
366
                    newsTitle,
367
                    newsAbstract,
368
                    newsCommentsCount,
369
                    newsSource,
370
                    newsMediaAvatarUrl,
371
                    newsSourceUrl,
372
                    middleImage
373
            );
374
        }
375
        // no image style
376
        else {
377
            temp = new NewsDataModel(
378
                    NewsDataModel.NO_IMAGE_TYPE,
379
                    newsId,
380
                    newsTitle,
381
                    newsAbstract,
382
                    newsCommentsCount,
383
                    newsSource,
384
                    newsMediaAvatarUrl,
385
                    newsSourceUrl
386
            );
387
        }
388
        mNewsDataModelList.add(temp);
389
    }
390
}

Reference#

簡易今日頭條 - Github

前言#