給大家介紹一下簡單的 WebView 互動和夜間模式在「冰與火百科」中的實現。
WebView 互動
在詳情頁面我是用 WebView 展示的，我想實現的互動是，點選 WebView 的內容跳轉另一個頁面。實現過程是，讓 HTML 程式碼呼叫 JavaScript 程式碼，再讓 JavaScript 程式碼呼叫 Android 的程式碼，下面看看如何實現。
HTML
先看 HTML 程式碼，假如在文字內容裡有一個可以跳轉的「凱特琳·徒利」，讓他去呼叫 skip.js 的程式碼，指定 CatelynTully() 方法：
<body>
<a href="javascript:void(0)" onclick="CatelynTully()">凱特琳·徒利</a>
<script type="text/javascript" src="skip.js"></script>
</body>
複製程式碼JavaScript
這個 skip.js 檔案我是放在客戶端的，放在 assets 目錄下，程式碼如下：
function CatelynTully(){
javascript:Android.goDetail('Catelyn_Tully');
}
複製程式碼意思就是去呼叫 Android 的 goDetail(String id) 方法。
Android
在客戶端新增 goDetail 方法，我把 JavaScript 和 Java 互動的程式碼寫在一個類裡，記得給方法加上 @JavascriptInterface 註解：
public class Js2Java {
private Context mContext;
public Js2Java(Context context) {
this.mContext = context;
}
@JavascriptInterface
public void goDetail(String id) {
// 根據 id 跳轉頁面
}
}
複製程式碼來到顯示 WebView 的頁面，新增以下程式碼讓 WebView 支援 JavaScript：
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new Js2Java(this), "Android");
複製程式碼使用 loadDataWithBaseURL 來展示資料：
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "utf-8", null);
複製程式碼這樣就完成了一個簡單的 JavaScript 和 Android 的互動，效果如下：
夜間模式
關於夜間模式的實現，主要是參考了 D_clock愛吃蔥花 大神的這篇文章，簡單說一下實現過程如下：
- 在 styles 中新增「DayTheme」和「NightTheme」兩個主題；
- 在佈局檔案中使用類似 android:background="?attr/colorBackground" 來設定顏色，使其跟隨當前主題顏色；
- 編寫 DayNightHelper，利用 SharePreferences 儲存、獲取當前模式；
- 在頁面 setContentView 之前，判斷當前模式，並通過 setTheme 設定當前模式；
- 將螢幕內容轉為 Bitmap，對其執行一個漸隱動畫，實現切換時漸變的效果；
- 監聽模式切換，通過 TypedValue 和 Theme.resolveAttribute 在程式碼中獲取 Theme 中的顏色，重新設定控制元件的顏色。
更詳細的內容可以檢視原文，下面再補充幾個控制元件的顏色設定方法。
Toolbar
假設已經拿到了切換後的顏色 color，修改 Toolbar 的背景顏色和字型顏色：
toolbar.setBackground(color);
toolbar.setTitleTextColor(color);
複製程式碼除了這兩項，Toolbar 上可能還有操作按鈕，像我這裡左邊的選單和右邊的搜尋按鈕。它們的顏色可以這樣設定：
// 選單按鈕
Drawable navigationIcon = toolbar.getNavigationIcon();
if (navigationIcon != null) {
navigationIcon.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
}
// 搜尋按鈕
Menu toolbarMenu = toolbar.getMenu();
Drawable searchIcon = toolbarMenu.getItem(0).getIcon();
if (searchIcon != null) {
searchIcon.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
}
複製程式碼TabLayout
對於 TabLayout，涉及到的顏色有背景顏色、文字顏色（選中和未選中）、指示條：
tabLayout.setBackgroundResource(color);
tabLayout.setTabTextColors(normalColor, selectedColor);
tabLayout.setSelectedTabIndicatorColor(color);
複製程式碼NavigationView
NavigationView 存在一個頭部，需要的話可以可以這樣修改頭部的背景和字型顏色：
View navigationHeader = navigationView.getHeaderView(0);
if (isDay) {
navigationHeader.setBackgroundResource(R.drawable.side_nav_bar_day);
} else {
navigationHeader.setBackgroundResource(R.drawable.side_nav_bar_night);
}
TextView tvHeader = (TextView) navigationHeader.findViewById(R.id.text_view);
tvHeader.setTextColor(color);
複製程式碼接下來是目錄部分的背景、字型顏色及圖表顏色：
navigationView.setBackgroundResource(color);
navigationView.setItemTextColor(color);
navigationView.setItemIconTintList(color);
複製程式碼RecyclerView
通過遍歷所有的 ChildView，對每一項進行顏色設定：
for (int position = 0; position < recyclerView.getChildCount(); position++) {
ViewGroup childView = (ViewGroup) binding.recyclerView.getChildAt(position);
// 設定顏色
}
複製程式碼但要注意的是，RecyclerView 的內部使用 Recycler 和 RecyclerViewPool 實現了快取，有可能出現當前使用的 item 顏色改變了，但是快取裡的沒有變化。
解決方法是清理快取，呼叫 Recycler 和 RecyclerViewPool 的 Clear() 方法，但前者無法直接呼叫，只能通過反射實現：
Class<RecyclerView> recyclerViewClass = RecyclerView.class;
try {
Field declaredField = recyclerViewClass.getDeclaredField("mRecycler");
declaredField.setAccessible(true);
Method declaredMethod = Class.forName(RecyclerView.Recycler.class.getName()).getDeclaredMethod("clear");
declaredMethod.setAccessible(true);
declaredMethod.invoke(declaredField.get(binding.recyclerView));
RecyclerView.RecycledViewPool recycledViewPool = recyclerView.getRecycledViewPool();
recycledViewPool.clear();
} catch (Exception e) {
e.printStackTrace();
}
複製程式碼StatusBar
在 SDK 21 以上，允許我們修改狀態列的顏色：
if (Build.VERSION.SDK_INT >= 21 {
TypedValue typedValue = new TypedValue();
Resources.Theme theme = getTheme();
theme.resolveAttribute(R.attr.color, typedValue, true);
getWindow().setStatusBarColor(
ContextCompat.getColor(mContext, typedValue.resourceId));
}
複製程式碼夜間模式的實現就到此，在重新設定顏色的部分比較繁瑣，但這是我目前看到效果比較好的實現方式。效果如下：
