问题描述
在利用WebView进行开发时,遇到了这样一个问题,即在两个Fragment中分别嵌入两个WebView,切换Fragment时,页面会闪烁并伴随有黑块,用户体验非常糟糕。
解决历程
遇到问题,第一反应当然是百度了(现在国内的开发资料已经相当全面了,大多数的问题通过百度就可以解决,翻墙去Google比较麻烦)。通过关键词搜索,我得知这个bug是由于android的“硬件加速”引起的,何为硬件加速,即系统通过GPU来绘制图像,以牺牲内存为代价换取图像渲染的更加平滑,从Android 3.0开始支持使用硬件加速,Android 4.0开始默认开启。我这里只用一句话简单概括了一下,如果需要详细了解,可以查看这篇博文 Android——硬件加速(Hardware Acceleration)
既然问题的根源找到了,接下来就要知道怎么解决问题了。查询了很多资料博客,给出的解决方案都是一致的,手动关闭硬件加速。于是我照做,关闭后重新运行,Fragment切换果然顺畅了,没有出现闪屏,问题完美解决。如果你以为这样就结束了,那你就太年轻了,真正的难题才刚刚开始。闪烁的bug是解决了,但只要你细心,就会发现页面上下滚动的时候会卡顿,而之前开启硬件加速的时候是没有这个问题的。
这就难办了,硬件加速到底是应该开启还是关闭,这是个问题。我想,硬件加速是在Android 3.0之后新引入的,必然是Google对android系统做出的优化,而又在Android 4.0版本默认开启,充分说明了其重要性,所以肯定是不能关闭的。这样的话就又回到了起点的那个bug,怎么解决闪屏的问题。这里我反复搜索了很多信息,也有不少人遇到了同样的问题,但是都没有一个很好的解决方案,我甚至以为这是WebView的一个尚未解决的bug,不是我等区区几行代码就可以搞得定的。
后来我在一次偶然中发现,Fragment切换的时候,会走onAttach()和onDetach()等生命周期方法(这里我使用的是FragmentTabHost来控制Fragment的切换),为了验证我的猜测,我将代码进行重构,底部的导航按钮使用RadioButton,Activity初始化时加载所有Fragment,通过RadioButton来控制各个Fragment的hide()和show(),这样做的好处就是不会触发Fragment的任何生命周期方法。运行结果验证了我的猜想是正确的,之前使用FragmentTabHost来切换Fragment时会一次次地调用attach()和detach()方法,每一次切换,View都会进行一次重绘,这也就是在硬件加速下,导致WebView闪烁的罪魁祸首了。而改进过后的代码,虽然会一次性把所有的Fragment都加载进内存,加大了内存的消耗,但切换Fragment时不用对View进行重绘,恰好是解决这个bug的最佳方式。
既然了解了bug的产生原因,解决方案自然就不止一种。我们点开FragmentTabHost的源码,可以很明显地看到,doTabChanged()这个方法就是控制Fragment切换的核心逻辑。我们只要自定义一个MyFragmentTabHost,将源码复制进来,把所有的attach()和detach()方法改为show()和hide()就可以了。
自定义MyFragmentTabHost源码如下,可直接使用,
public class MyFragmentTabHost extends TabHost implements TabHost.OnTabChangeListener {private final ArrayList<MyFragmentTabHost.TabInfo> mTabs = new ArrayList<MyFragmentTabHost.TabInfo>();private FrameLayout mRealTabContent;private Context mContext;private FragmentManager mFragmentManager;private int mContainerId;private TabHost.OnTabChangeListener mOnTabChangeListener;private MyFragmentTabHost.TabInfo mLastTab;private boolean mAttached;static final class TabInfo {private final String tag;private final Class<?> clss;private final Bundle args;private Fragment fragment;TabInfo(String _tag, Class<?> _class, Bundle _args) {tag = _tag;clss = _class;args = _args;}}static class DummyTabFactory implements TabHost.TabContentFactory {private final Context mContext;public DummyTabFactory(Context context) {mContext = context;}@Overridepublic View createTabContent(String tag) {View v = new View(mContext);v.setMinimumWidth(0);v.setMinimumHeight(0);return v;}}static class SavedState extends BaseSavedState {String curTab;SavedState(Parcelable superState) {super(superState);}private SavedState(Parcel in) {super(in);curTab = in.readString();}@Overridepublic void writeToParcel(Parcel out, int flags) {super.writeToParcel(out, flags);out.writeString(curTab);}@Overridepublic String toString() {return "FragmentTabHost.SavedState{"+ Integer.toHexString(System.identityHashCode(this))+ " curTab=" + curTab + "}";}public static final Parcelable.Creator<MyFragmentTabHost.SavedState> CREATOR= new Parcelable.Creator<MyFragmentTabHost.SavedState>() {public MyFragmentTabHost.SavedState createFromParcel(Parcel in) {return new MyFragmentTabHost.SavedState(in);}public MyFragmentTabHost.SavedState[] newArray(int size) {return new MyFragmentTabHost.SavedState[size];}};}public MyFragmentTabHost(Context context) {// Note that we call through to the version that takes an AttributeSet,// because the simple Context construct can result in a broken object!super(context, null);initFragmentTabHost(context, null);}public MyFragmentTabHost(Context context, AttributeSet attrs) {super(context, attrs);initFragmentTabHost(context, attrs);}private void initFragmentTabHost(Context context, AttributeSet attrs) {TypedArray a = context.obtainStyledAttributes(attrs,new int[] { android.R.attr.inflatedId }, 0, 0);mContainerId = a.getResourceId(0, 0);a.recycle();super.setOnTabChangedListener(this);}private void ensureHierarchy(Context context) {// If owner hasn't made its own view hierarchy, then as a convenience// we will construct a standard one here.if (findViewById(android.R.id.tabs) == null) {LinearLayout ll = new LinearLayout(context);ll.setOrientation(LinearLayout.VERTICAL);addView(ll, new FrameLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,ViewGroup.LayoutParams.FILL_PARENT));TabWidget tw = new TabWidget(context);tw.setId(android.R.id.tabs);tw.setOrientation(TabWidget.HORIZONTAL);ll.addView(tw, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT, 0));FrameLayout fl = new FrameLayout(context);fl.setId(android.R.id.tabcontent);ll.addView(fl, new LinearLayout.LayoutParams(0, 0, 0));mRealTabContent = fl = new FrameLayout(context);mRealTabContent.setId(mContainerId);ll.addView(fl, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, 0, 1));}}/*** @deprecated Don't call the original TabHost setup, you must instead* call {@link #setup(Context, FragmentManager)} or* {@link #setup(Context, FragmentManager, int)}.*/@Override @Deprecatedpublic void setup() {throw new IllegalStateException("Must call setup() that takes a Context and FragmentManager");}public void setup(Context context, FragmentManager manager) {ensureHierarchy(context); // Ensure views required by super.setup()super.setup();mContext = context;mFragmentManager = manager;ensureContent();}public void setup(Context context, FragmentManager manager, int containerId) {ensureHierarchy(context); // Ensure views required by super.setup()super.setup();mContext = context;mFragmentManager = manager;mContainerId = containerId;ensureContent();mRealTabContent.setId(containerId);// We must have an ID to be able to save/restore our state. If// the owner hasn't set one at this point, we will set it ourself.if (getId() == View.NO_ID) {setId(android.R.id.tabhost);}}private void ensureContent() {if (mRealTabContent == null) {mRealTabContent = (FrameLayout)findViewById(mContainerId);if (mRealTabContent == null) {throw new IllegalStateException("No tab content FrameLayout found for id " + mContainerId);}}}@Overridepublic void setOnTabChangedListener(OnTabChangeListener l) {mOnTabChangeListener = l;}public void addTab(TabHost.TabSpec tabSpec, Class<?> clss, Bundle args) {tabSpec.setContent(new MyFragmentTabHost.DummyTabFactory(mContext));String tag = tabSpec.getTag();MyFragmentTabHost.TabInfo info = new MyFragmentTabHost.TabInfo(tag, clss, args);if (mAttached) {// If we are already attached to the window, then check to make// sure this tab's fragment is inactive if it exists. This shouldn't// normally happen.info.fragment = mFragmentManager.findFragmentByTag(tag);if (info.fragment != null && !info.fragment.isHidden()) {FragmentTransaction ft = mFragmentManager.beginTransaction();ft.hide(info.fragment);mit();}}mTabs.add(info);addTab(tabSpec);}@Overrideprotected void onAttachedToWindow() {super.onAttachedToWindow();String currentTab = getCurrentTabTag();// Go through all tabs and make sure their fragments match// the correct state.FragmentTransaction ft = null;for (int i=0; i<mTabs.size(); i++) {MyFragmentTabHost.TabInfo tab = mTabs.get(i);tab.fragment = mFragmentManager.findFragmentByTag(tab.tag);if (tab.fragment != null && !tab.fragment.isHidden()) {if (tab.tag.equals(currentTab)) {// The fragment for this tab is already there and// active, and it is what we really want to have// as the current tab. Nothing to do.mLastTab = tab;} else {// This fragment was restored in the active state,// but is not the current tab. Deactivate it.if (ft == null) {ft = mFragmentManager.beginTransaction();}ft.hide(tab.fragment);}}}// We are now ready to go. Make sure we are switched to the// correct tab.mAttached = true;ft = doTabChanged(currentTab, ft);if (ft != null) {mit();mFragmentManager.executePendingTransactions();}}@Overrideprotected void onDetachedFromWindow() {super.onDetachedFromWindow();mAttached = false;}@Overrideprotected Parcelable onSaveInstanceState() {Parcelable superState = super.onSaveInstanceState();MyFragmentTabHost.SavedState ss = new MyFragmentTabHost.SavedState(superState);ss.curTab = getCurrentTabTag();return ss;}@Overrideprotected void onRestoreInstanceState(Parcelable state) {MyFragmentTabHost.SavedState ss = (MyFragmentTabHost.SavedState)state;super.onRestoreInstanceState(ss.getSuperState());setCurrentTabByTag(ss.curTab);}@Overridepublic void onTabChanged(String tabId) {if (mAttached) {FragmentTransaction ft = doTabChanged(tabId, null);if (ft != null) {mit();}}if (mOnTabChangeListener != null) {mOnTabChangeListener.onTabChanged(tabId);}}private FragmentTransaction doTabChanged(String tabId, FragmentTransaction ft) {MyFragmentTabHost.TabInfo newTab = null;for (int i=0; i<mTabs.size(); i++) {MyFragmentTabHost.TabInfo tab = mTabs.get(i);if (tab.tag.equals(tabId)) {newTab = tab;}}if (newTab == null) {throw new IllegalStateException("No tab known for tag " + tabId);}if (mLastTab != newTab) {if (ft == null) {ft = mFragmentManager.beginTransaction();}if (mLastTab != null) {if (mLastTab.fragment != null) {ft.hide(mLastTab.fragment);}}if (newTab != null) {if (newTab.fragment == null) {newTab.fragment = Fragment.instantiate(mContext,newTab.clss.getName(), newTab.args);ft.add(mContainerId, newTab.fragment, newTab.tag);} else {ft.show(newTab.fragment);}}mLastTab = newTab;}return ft;}}