浏览器的书签界面功能还是比较丰富的, 主要有

1.可以按照列表和grid两种方式展示

2.同步后会显示不同用户的书签

3.可以对书签进行拖拽

4.类似文件夹的树形层次, 类型window explorer 的地址管理

5.对书签的增删改查

UI如下

书签模块整体的时序图如下:

大致功能的类图如下

设计图有了, 就开始一步步分析把

1.大致启动流程:

书签的入口还是比较多的, 我们这里只拿从多窗口列表进入书签为例来介绍.从代码可以看到, 在点击了书签按钮之后调用了

mUiController.bookmarksOrHistoryPicker(ComboViews.Bookmarks);

这句代码. 正如以前所说, 所有的大功能都是通过controller来实现的 ,然后我们发现, 显示书签的View还是在controller的发起的:

/*** Open the Go page. 打开 历史 书签 窗口* @param startWithHistory If true, open starting on the history tab.*                         Otherwise, start with the bookmarks tab.*/@Overridepublic void bookmarksOrHistoryPicker(ComboViews startView) {if (mTabControl.getCurrentWebView() == null) {return;}// clear action modeif (isInCustomActionMode()) {endActionMode();}Bundle extras = new Bundle();// Disable opening in a new window if we have maxed out the windowsextras.putBoolean(BrowserBookmarksPage.EXTRA_DISABLE_WINDOW,!mTabControl.canCreateNewTab());mUi.showComboView(startView, extras);}

这个函数的作用其实是发起一个activity:

@Overridepublic void showComboView(ComboViews startingView, Bundle extras) {Intent intent = new Intent(mActivity, ComboViewActivity.class);intent.putExtra(ComboViewActivity.EXTRA_INITIAL_VIEW, startingView.name());intent.putExtra(ComboViewActivity.EXTRA_COMBO_ARGS, extras);Tab t = getActiveTab();if (t != null) {intent.putExtra(ComboViewActivity.EXTRA_CURRENT_URL, t.getUrl());}mActivity.startActivityForResult(intent, Controller.COMBO_VIEW);}

ComboViewActivity是一个actionbar+ viewpager 生成的 的activity, viewpager有三个页面, 分别是书签, 离线网页, 和历史了:

他的指示器是一个actionbar

mViewPager = new ViewPager(this);mViewPager.setId(R.id.tab_view);//可以这样指定一个id给java代码添加的viewsetContentView(mViewPager); //这个view是一个viewpagerfinal ActionBar bar = getActionBar();bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);if (BrowserActivity.isTablet(this)) {//如果是平面设置一下参数bar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME| ActionBar.DISPLAY_USE_LOGO);bar.setHomeButtonEnabled(true);} else {bar.setDisplayOptions(0);}mTabsAdapter = new TabsAdapter(this, mViewPager); //把vierpager 和 actionbar关联mTabsAdapter.addTab(bar.newTab().setText(R.string.tab_bookmarks),BrowserBookmarksPage.class, args); //每个tab由 bar + fragment组成mTabsAdapter.addTab(bar.newTab().setText(R.string.tab_history),BrowserHistoryPage.class, args);mTabsAdapter.addTab(bar.newTab().setText(R.string.tab_snapshots),BrowserSnapshotPage.class, args);

这里我们只看BrowserBookmarksPage: 当这个page显示的时候首先执行的当然是onCreateView了:

@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {mRoot = inflater.inflate(R.layout.bookmarks, container, false);mEmptyView = mRoot.findViewById(android.R.id.empty);mGrid = (BookmarkExpandableView) mRoot.findViewById(R.id.grid);mGrid.setOnChildClickListener(this);mGrid.setColumnWidthFromLayout(R.layout.bookmark_thumbnail);mGrid.setBreadcrumbController(this);setEnableContextMenu(mEnableContextMenu);//注册contextmenumDragHandler = new BookmarkDragHandler(getActivity(), mDragController,mGrid.getDragAdapter());// Start the loadersLoaderManager lm = getLoaderManager();lm.restartLoader(LOADER_ACCOUNTS, null, this);//把loader传入return mRoot;}

这个Page里面最主要的就是 BookmarkExpandableView, 这个view我们后面介绍, 想观察是如何填入数据的:

// Start the loadersLoaderManager lm = getLoaderManager();lm.restartLoader(LOADER_ACCOUNTS, null, this);//把loader传入

LoaderManger 这是高api版本引进的一个东西, 用于异步加载数据. 具体分析参考 http://blog.csdn.net/zimo2013/article/details/10263339

然后在 onCreateLoader 或返回cursor 来从数据库拿到书签信息 然后 在和 onLoadFinished中把获取的数据填入:

/*异步加载完成后就返回一个cursor我们就可以显示书签等操作了*/@Overridepublic void onLoadFinished(Loader<Cursor> loader, Cursor cursor) {if (loader.getId() == LOADER_ACCOUNTS) {LoaderManager lm = getLoaderManager();int id = LOADER_BOOKMARKS;while (cursor.moveToNext()) {String accountName = cursor.getString(0);String accountType = cursor.getString(1);Bundle args = new Bundle();args.putString(ACCOUNT_NAME, accountName);args.putString(ACCOUNT_TYPE, accountType);BrowserBookmarksAdapter adapter = new BrowserBookmarksAdapter(getActivity(), VIEW_THUMBNAILS);mBookmarkAdapters.put(id, adapter);boolean expand = true;try {expand = mState.getBoolean(accountName != null ? accountName: BookmarkExpandableView.LOCAL_ACCOUNT_NAME);} catch (JSONException e) {} // no state for accountNamemGrid.addAccount(accountName, adapter, expand);lm.restartLoader(id, args, this);id++;}// TODO: Figure out what a reload of these means// Currently, a reload is triggered whenever bookmarks change// This is less than ideal// It also causes UI flickering as a new adapter is created// instead of re-using an existing one when the account_name is the// same.// For now, this is a one-shot loadgetLoaderManager().destroyLoader(LOADER_ACCOUNTS);} else if (loader.getId() >= LOADER_BOOKMARKS) {BrowserBookmarksAdapter adapter = mBookmarkAdapters.get(loader.getId());adapter.changeCursor(cursor);}}

这样书签的信息就基本实现了.

2. 我们可以看到, BookMarkPage最重要的Ui是 BookmarkExpandableView, 他的实现还是有些小复杂的, 分析一下他的类图:

原来他就是一个ExpandableListview, 这也和我们看到的东西是一样的, 其实这个书签的显示有两种展示风格:

a.类似上面UI的gridview的风格

b.类似小米浏览器书签的listview风格.

有UI上可以看出, 这些UI的实现都是在ExpandableView的getChildView的返回来实现的:

那么就从展示开始开始一步步分析吧:

1.Adapter的组装:  在onLoadfinished函数中: 载入数据ok之后, BookmarkExpandableView会按照不同的账户信息来添加书签:

mGrid.addAccount(accountName, adapter, expand);

添加的核心代码就是添加一个新的adapter

/*** 添加账户后添加该用户的书签* @param accountName* @param adapter* @param expandGroup*/public void addAccount(String accountName, BrowserBookmarksAdapter adapter,boolean expandGroup) {// First, check if it already existsint indexOf = mAdapter.mGroups.indexOf(accountName);       if (indexOf >= 0) {//存在但是有更新BrowserBookmarksAdapter existing = mAdapter.mChildren.get(indexOf);if (existing != adapter) {existing.unregisterDataSetObserver(mAdapter.mObserver);//先不要监听数据变化// Replace the existing one 替换书签mAdapter.mChildren.remove(indexOf);mAdapter.mChildren.add(indexOf, adapter);adapter.registerDataSetObserver(mAdapter.mObserver); //注册监听数据的变化}} else {//没有添加这个用户的书签,if (mCurrentView >= 0) {//mCurrentView 标示  是list还是grid THUMBNAILSadapter.selectView(mCurrentView);}mAdapter.mGroups.add(accountName);//添加用户名mAdapter.mChildren.add(adapter); //添加adapter.registerDataSetObserver(mAdapter.mObserver);}mAdapter.notifyDataSetChanged();//添加后展开这个group if (expandGroup) {expandGroup(mAdapter.getGroupCount() - 1);}}

2.我们知道 在View 从添加到显示给用户会走onMeasure onLayout onDraw流程,

在onMeasure中会计算 一行可以容纳多少个书签:

/*** 根据整个view的宽度来测量 一行可以容纳多少书签* @param viewWidth*/public void measureChildren(int viewWidth) {if (mLastViewWidth == viewWidth) return;int rowCount = viewWidth / mColumnWidth;if (mMaxColumnCount > 0) {//不能超过最大的列数rowCount = Math.min(rowCount, mMaxColumnCount);}int rowPadding = (viewWidth - (rowCount * mColumnWidth)) / 2;//设置 gridview的padding 使其水平居中boolean notify = rowCount != mRowCount || rowPadding != mRowPadding; //是否发生了变化需要刷新, 会进行刷新view的操作 即 从adapter getViewmRowCount = rowCount;mRowPadding = rowPadding;mLastViewWidth = viewWidth;if (notify) {notifyDataSetChanged();}}

3.而这个ExpandableView在listview 显示的时候还需要getGroup和getChild:

/*填充childview , 注意每次调用这个函数:1.如果是list 模式 只能添加 一行 2.如果是grid 模式只能添加grid的一行 */@Overridepublic View getChildView(int groupPosition, int childPosition,boolean isLastChild, View convertView, ViewGroup parent) {if (convertView == null) {convertView = mInflater.inflate(R.layout.bookmark_grid_row, parent, false);}BrowserBookmarksAdapter childAdapter = mChildren.get(groupPosition);//拿到对应的adapterint rowCount = mRowCount; //列数 / 一行有多少itemif (childAdapter.getViewMode() == BrowserBookmarksPage.VIEW_LIST) {rowCount = 1; //如果是list就是一列}LinearLayout row = (LinearLayout) convertView;if (row.getChildCount() > rowCount) {row.removeViews(rowCount, row.getChildCount() - rowCount);//可能刷新界面 不显示已经删除的view}for (int i = 0; i < rowCount; i++) {//一个一个的添加view 注意,只添加 可以 看到的viewView cv = null;if (row.getChildCount() > i) {cv = row.getChildAt(i);}int realChildPosition = (childPosition * rowCount) + i;if (realChildPosition < childAdapter.getCount()) {View v = childAdapter.getView(realChildPosition, cv, row);v.setTag(R.id.group_position, groupPosition);//可以往tag 中放n个东西v.setTag(R.id.child_position, realChildPosition);v.setTag(R.id.child_id, childAdapter.getItemId(realChildPosition));v.setOnClickListener(mChildClickListener);v.setLongClickable(mLongClickable);if (mDragHandler != null) {v.setOnLongClickListener(mChildOnLongClickListener);//注册拖拽事件监听mDragHandler.registerBookmarkDragHandler(v);}if (cv == null) {row.addView(v);} else if (cv != v) {row.removeViewAt(i);row.addView(v, i);//更新新的view} else {cv.setVisibility(View.VISIBLE);}} else if (cv != null) {cv.setVisibility(View.GONE);}}return row;}

也就是说, 每一行的数据是通过BrowserBookmarksAdapter的getView来产生view的:

这个东西继承了CursorAdapter , 应该是通过bindView来组装view的:

@Overridepublic void bindView(View view, Context context, Cursor cursor) {if (mCurrentView == BrowserBookmarksPage.VIEW_LIST) {bindListView(view, context, cursor);} else {bindGridView(view, context, cursor);}}

然后是getGroupView:

/*group的 view*/@Overridepublic View getGroupView(int groupPosition, boolean isExpanded,View view, ViewGroup parent) {if (view == null) {view = mInflater.inflate(R.layout.bookmark_group_view, parent, false);view.setOnClickListener(mGroupOnClickListener);}view.setTag(R.id.group_position, groupPosition);FrameLayout crumbHolder = (FrameLayout) view.findViewById(R.id.crumb_holder); //如果是二级菜单或更多 在gruopview上显示那个 上层目录crumbHolder.removeAllViews();BreadCrumbView crumbs = getBreadCrumbView(groupPosition); //如果是二级菜单 在gruopview上显示那个 上层目录if (crumbs.getParent() != null) {//以前添加过 目录导航了 先删除以前的((ViewGroup)crumbs.getParent()).removeView(crumbs);}crumbHolder.addView(crumbs);TextView name = (TextView) view.findViewById(R.id.group_name);String groupName = mGroups.get(groupPosition);if (groupName == null) {groupName = mContext.getString(R.string.local_bookmarks);}name.setText(groupName);return view;}

这样就把各个账户的书签展示给用户了!