夸克瀏覽器是我非常喜歡的一款瀏覽器，整體非常簡(jiǎn)潔，UI做的也很精致。今天我就來仿寫主頁(yè)底部的工具欄。先來看看原本的效果：
從外表看就是一個(gè)彈框，特別之處就是可以收縮伸展布局，再來看看我實(shí)現(xiàn)的效果：
怎么樣？效果是不是已經(jīng)非常接近。先整體說下思路吧，底部對(duì)話框用DialogFragment來實(shí)現(xiàn)，里面的可伸縮布局采用自定義ViewGroup?？戳吮疚哪銓⒛軐W(xué)到（鞏固）以下知識(shí)點(diǎn)：
-
DialogFragment的用法； - 自定義
ViewGroup的用法，包括onMeasure和onLayout方法； -
ViewDragHelper的用法，包括處理手勢(shì)和事件沖突
聽起來內(nèi)容挺多的，但只要一步步去解析，其實(shí)實(shí)現(xiàn)過程也不算復(fù)雜。
底部對(duì)話框
底部對(duì)話框我采用了DialogFragment,因?yàn)橄啾葌鹘y(tǒng)的AlertDialog實(shí)現(xiàn)起來更簡(jiǎn)單，用法也幾乎和普通的Fragment沒有什么區(qū)別。
主要工作就是指定顯示位置：
public class BottomDialogFragment extends DialogFragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_bottom, null);
}
public void onStart() {
super.onStart();
Dialog dialog = getDialog();
if (dialog != null && dialog.getWindow() != null) {
Window window = dialog.getWindow();
//指定顯示位置
dialog.getWindow().setGravity(Gravity.BOTTOM);
//指定顯示大小
dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//顯示消失動(dòng)畫
window.setWindowAnimations(R.style.animate_dialog);
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
//設(shè)置點(diǎn)擊外部可以取消對(duì)話框
setCancelable(true);
}
}
}
點(diǎn)擊顯示彈框：
FragmentManager fm = getSupportFragmentManager();
BottomDialogFragment bottomDialogFragment = new BottomDialogFragment();
bottomDialogFragment.show(fm, "fragment_bottom_dialog");
自定義折疊布局
這里主要用到的就是自定義ViewGroup的知識(shí)了。先大致梳理一下：我們需要包含兩個(gè)子view，在上面的topView，在下面的bottomView。topView往下滑的時(shí)候要覆蓋bottomView。但是ViewGroup的層次順序默認(rèn)是和添加順序是反過來的，后面添加的view會(huì)覆蓋前面的view，而我們預(yù)想的布局文件應(yīng)該是這樣的：
<ViewGroup>
<topView/>
<bottom/>
</ViewGroup>
所以我們需要在代碼中手動(dòng)對(duì)換兩者順序：
@Override
protected void onFinishInflate() {
super.onFinishInflate();
if (getChildCount() != 2) {
throw new RuntimeException("必須是2個(gè)子View！");
}
topView = getChildAt(0);
bottomView = getChildAt(1);
bringChildToFront(topView);
}
這樣之后getChildAt(0)取到的就是bottomView了。接下來是onMeasure()，計(jì)算自身的大小：
/**
* 計(jì)算所有ChildView的寬度和高度 然后根據(jù)ChildView的計(jì)算結(jié)果，設(shè)置自己的寬和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
/**
* 獲得此ViewGroup上級(jí)容器為其推薦的寬和高，以及計(jì)算模式
*/
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
// 計(jì)算出所有的childView的寬和高
measureChildren(widthMeasureSpec, heightMeasureSpec);
int width = 0;
int height = 0;
/**
* 根據(jù)childView計(jì)算的出的寬和高，以及設(shè)置的margin計(jì)算容器的寬和高，主要用于容器是warp_content時(shí)
*/
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
MarginLayoutParams cParams = (MarginLayoutParams) childView.getLayoutParams();
int cWidthWithMargin = childView.getMeasuredWidth() + cParams.leftMargin + cParams.rightMargin;
int cHeightWithMargin = childView.getMeasuredHeight() + cParams.topMargin + cParams.bottomMargin;
//高度為兩個(gè)子view的和
height = height + cHeightWithMargin;
//寬度取兩個(gè)子view中的最大值
width = cWidthWithMargin > width ? cWidthWithMargin : width;
}
/**
* 如果是wrap_content設(shè)置為我們計(jì)算的值
* 否則：直接設(shè)置為父容器計(jì)算的值
*/
setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth
: width, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
: height);
}
然后自定義onLayout()，放置兩個(gè)子View的位置：
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
/**
* 遍歷所有childView根據(jù)其寬和高，以及margin進(jìn)行布局
*/
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
int cWidth = childView.getMeasuredWidth();
int cHeight = childView.getMeasuredHeight();
MarginLayoutParams cParams = (MarginLayoutParams) childView.getLayoutParams();
int cl = 0, ct = 0, cr = 0, cb = 0;
switch (i) {
case 0://bottomView放下面
cl = cParams.leftMargin;
ct = getHeight() - cHeight - cParams.bottomMargin;
cb = cHeight + ct ;
childView.setPadding(0, extendHeight, 0, 0);
cr = cl + cWidth;
break;
case 1://topView放上面
cl = cParams.leftMargin;
ct = cParams.topMargin;
cb = cHeight + ct;
cr = cl + cWidth;
break;
}
childView.layout(cl, ct, cr, cb);
}
}
這樣之后，就可以顯示布局了，但還是不能滑動(dòng)。處理滑動(dòng)我采用了ViewDragHelper，這個(gè)工具類可謂自定義ViewGroup神器。有了它，ViewGroup可以很容易的控制各個(gè)子View的滑動(dòng)。什么事件分發(fā)，滑動(dòng)沖突都不需要我們操心了。
mDragger = ViewDragHelper.create(this, 1.0f, new ViewDragHelperCallBack())
創(chuàng)建實(shí)例需要3個(gè)參數(shù)，第一個(gè)就是當(dāng)前的ViewGroup，第二個(gè)是sensitivity（敏感系數(shù)，聯(lián)想下鼠標(biāo)靈敏度就知道了）。第三個(gè)參數(shù)就是Callback，會(huì)在觸摸過程中會(huì)回調(diào)相關(guān)方法，也是我們主要需要實(shí)現(xiàn)的方法。
private class ViewDragHelperCallBack extends ViewDragHelper.Callback {
@Override
public boolean tryCaptureView(View child, int pointerId) {
return topView == child;//限制只有topView可以滑動(dòng)
}
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
return 0;//橫向可滑動(dòng)范圍，因?yàn)椴豢梢詸M向滑動(dòng)直接返回0就行
}
@Override
public int getViewVerticalDragRange(View child) {
return getMeasuredHeight() - child.getMeasuredHeight();
}
@Override
public int clampViewPositionVertical(View child, int top, int dy){
//豎向可滑動(dòng)范圍，top是child即將滑動(dòng)到的top值，限制最大值。
final int topBound = getPaddingTop();
final int bottomBound = getHeight() - child.getHeight() - topBound;
return Math.min(Math.max(top, topBound), bottomBound);
}
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
float percent = (float) top / (getHeight() - changedView.getHeight());
//處理topView動(dòng)畫
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
changedView.setElevation(percent * 10);
}
//處理bottomView動(dòng)畫
bottomView.setScaleX(1 - percent * 0.03f);
}
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
//手指釋放時(shí),滑動(dòng)距離大于一半直接滾動(dòng)到底部，否則返回頂部
if (releasedChild == topView) {
float movePercentage = (float) (releasedChild.getTop()) / (getHeight() - releasedChild.getHeight() - elevationHeight);
int finalTop = (movePercentage >= .5f) ? getHeight() - releasedChild.getHeight() - elevationHeight : 0;
mDragger.settleCapturedViewAt(releasedChild.getLeft(), finalTop);
invalidate();
}
}
}
至于處理事件分發(fā)，處理滾動(dòng)全都交給ViewDragHelper做就行了：
@Override
public void computeScroll() {
if (mDragger.continueSettling(true)) {
invalidate();
}
}
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return mDragger.shouldInterceptTouchEvent(event);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
mDragger.processTouchEvent(event);
return true;
}
總結(jié)
好了實(shí)現(xiàn)大致分析完了，還有一些小細(xì)節(jié)的處理和自定義View常用的回調(diào)、get/set方法就不說了，大家如果有興趣的話就直接去看源碼吧。個(gè)人覺得以上實(shí)現(xiàn)通用性還是不足吧，現(xiàn)在只能實(shí)現(xiàn)一層折疊，折疊方向也是固定的。作為對(duì)比，我們來看下Android系統(tǒng)通知欄的流式折疊布局。怎么樣，是不是比上面這個(gè)不知道高到哪里去了！Excited！
最近我也在琢磨如何實(shí)現(xiàn)（recyclerView+自定義layoutManager？？？）。有實(shí)現(xiàn)方法或源碼的同學(xué)請(qǐng)?jiān)谙路搅粞?，感激不盡！如果我琢磨出來了也會(huì)第一時(shí)間分享出來。
最后貼下本栗的Github地址：
