Flipboard-BottomSheetlayout 源码分析

BottomSheetLayout

BottomSheet：Google在API 23中已经加入了这样的一个控件。

BottomSheet介绍：

　　BottomSheet是一个可以从底部飞入和飞出的Android控件，通常是用于替换Dialog和menu(如：分享menu)

这里我介绍的并非是Android的一个这样的控件，而是Flipboard开元的这样的一个三方框架源码；

首先地址：

　　https://github.com/Flipboard/bottomsheet

建议大家看这篇博客之前先看下这官方的使用说明Usage，以便更好的理解下面介绍的内容.

效果图github上边基本都有了这里就不在二次粘图了，不是程序员该做的事.....

现在咱们就基于这个仓库的三方框架进行介绍：

　　导入之后的项目结构截图：

　　

　　大家可以看到这里三个module(不要问我什么是module，信不信我会打死你....)

简单说下这三个module的作用啊

　　bottomsheet：这里主要说的是BottomSheet.xml，首先它是一个view，继承自Framelayout，你只需给他一个view就可以实现了飞入和飞出效果。

　　bottomsheet-commons：见下图红线内容区：底部飞入所需要的内容区域的布局Gridview,Listview，Fragment等也就是需要给bottomsheet的内容view。

　　

　　bottomsheet-sample：不需要多说你懂得，6666，不知道我也是没办法教你了....

接下来比较吊了；

　　照图说话boottomsheet module；

　

先说背景色的实现代码：

private void init() {
        ............

        dimView = new View(getContext());
        dimView.setBackgroundColor(Color.BLACK);
        dimView.setAlpha(0);
        dimView.setVisibility(INVISIBLE);
        .................
}

　　很明显是个view，透明度默认是0，可见性invisible。so 什么是可见的哪。

    private void setSheetTranslation(float sheetTranslation) {
        this.sheetTranslation = sheetTranslation;
        int bottomClip = (int) (getHeight() - Math.ceil(sheetTranslation));
        this.contentClipRect.set(0, 0, getWidth(), bottomClip);
        getSheetView().setTranslationY(getHeight() - sheetTranslation);
        transformView(sheetTranslation);
        if (shouldDimContentView) {
            float dimAlpha = getDimAlpha(sheetTranslation);
            dimView.setAlpha(dimAlpha);//根据当前平移的位置换算当前view透明度
            dimView.setVisibility(dimAlpha > 0 ? VISIBLE : INVISIBLE);//这里看是否透明度大于0，如果是那么久设置为可见
        }
    }

　　这里说的是当bottomsheet从底部出现之后，设置背景view可见同事修改透明度，当然透明度是根当前平移的位置换算粗来的。紧接着就是判断是否背景view的透明度大于零，如果是那么就直接设置背景view可见。

　　这里还有一个问题这个view是如何添加到BottomSheet中的哪？

　　先看一种设置方式：

    /**
     * Set the content view of the bottom sheet. This is the view which is shown under the sheet
     * being presented. This is usually the root view of your application.
     *
     * @param contentView The content view of your application.
     */
    public void setContentView(View contentView) {
        super.addView(contentView, -1, generateDefaultLayoutParams());
        super.addView(dimView, -1, generateDefaultLayoutParams());
    }

　　这里调用地方法setContentView，如果这种方式的需要你出入一个contentView，当然这里不需要你自己去调用，这里并不是说你不可以自己调用。那么如果不是自己调用那应该怎么调用哪？？？还是看代码：

 @Override
     public void addView(@NonNull View child) {
         if (getChildCount() > 0) {
             throw new IllegalArgumentException("You may not declare more then one child of bottom sheet. The sheet view must be added dynamically with showWithSheetView()");
         }
         setContentView(child);
     }

　　代码其实很简单就是封装了一层，最终还是调用了method setContentView方法。不到大家发现了个问题了木，这个是方法是重载的方式，辣么为啥这么做类，其实是因为当BottomSheetLayout被add到一个父布局的时候需要调到这块，一般这块是系统调用，因为我们一般使用的时候都在在xml文件中使用。文章开头说道这个布局的父布局是FrameLayout，这样就有个好处，可以使用BottomSheetLayout作为root布局，其实根据官方demo来看，确实也是建议最好这么使用的。顺便说下额外的(使用Framelayout作为root布局的好处：对比RelativeLayout绘制上来说绘制次数：FrameLayout 绘制一次 而RelativeLayout绘制两次，所以FrameLayout的效率较高。至于为什么那就需要查源码了。。。。)

接下来就是BottomSheet中的内容view了，看代码：

 /**
      * Convenience for showWithSheetView(sheetView, null, null).
      *
      * @param sheetView The sheet to be presented.
      */
     public void showWithSheetView(View sheetView) {
         showWithSheetView(sheetView, null);
     }

     /**
      * Present a sheet view to the user.
      * If another sheet is currently presented, it will be dismissed, and the new sheet will be shown after that
      *
      * @param sheetView The sheet to be presented.
      * @param viewTransformer The view transformer to use when presenting the sheet.
      */
     public void showWithSheetView(final View sheetView, final ViewTransformer viewTransformer) {
         if (state != State.HIDDEN) {
             Runnable runAfterDismissThis = new Runnable() {
                 @Override
                 public void run() {
                     showWithSheetView(sheetView, viewTransformer);
                 }
             };
             dismissSheet(runAfterDismissThis);
             return;
         }
         setState(State.PREPARING);

         LayoutParams params = (LayoutParams) sheetView.getLayoutParams();
         if (params == null) {
             params = new LayoutParams(isTablet ? LayoutParams.WRAP_CONTENT : LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
         }

         if (isTablet && params.width == FrameLayout.LayoutParams.WRAP_CONTENT) {

             // Center by default if they didn't specify anything
             if (params.gravity == -1) {
                 params.gravity = Gravity.CENTER_HORIZONTAL;
             }

             params.width = defaultSheetWidth;

             // Update start and end coordinates for touch reference
             int horizontalSpacing = screenWidth - defaultSheetWidth;
             sheetStartX = horizontalSpacing / 2;
             sheetEndX = screenWidth - sheetStartX;
         }

         super.addView(sheetView, -1, params);
         initializeSheetValues();
         this.viewTransformer = viewTransformer;

         // Don't start animating until the sheet has been drawn once. This ensures that we don't do layout while animating and that
         // the drawing cache for the view has been warmed up. tl;dr it reduces lag.
         getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
             @Override
             public boolean onPreDraw() {
                 getViewTreeObserver().removeOnPreDrawListener(this);
                 post(new Runnable() {
                     @Override
                     public void run() {
                         // Make sure sheet view is still here when first draw happens.
                         // In the case of a large lag it could be that the view is dismissed before it is drawn resulting in sheet view being null here.
                         if (getSheetView() != null) {
                             peekSheet();
                         }
                     }
                 });
                 return true;
             }
         });

         // sheetView should always be anchored to the bottom of the screen
         currentSheetViewHeight = sheetView.getMeasuredHeight();
         sheetViewOnLayoutChangeListener = new OnLayoutChangeListener() {
             @Override
             public void onLayoutChange(View sheetView, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                 int newSheetViewHeight = sheetView.getMeasuredHeight();
                 if (state != State.HIDDEN && newSheetViewHeight < currentSheetViewHeight) {
                     // The sheet can no longer be in the expanded state if it has shrunk
                     if (state == State.EXPANDED) {
                         setState(State.PEEKED);
                     }
                     setSheetTranslation(newSheetViewHeight);
                 }
                 currentSheetViewHeight = newSheetViewHeight;
             }
         };
         sheetView.addOnLayoutChangeListener(sheetViewOnLayoutChangeListener);
     }

　　用于显示和隐藏的API方法。只要是显示就必须调用此方法。

　　文章判断是否当前状态是隐藏，如果是就显示，否则就隐藏。这样就省去了好多麻烦，如果先显示或者是隐藏调用这一个API就完事。

　　Line 30 --33 这里这块代码很关键，也许有时候你填充的一个view设置的参数宽度和高度都是match_parent,但是真实的显示确实宽度是macth_parent,但是高度却不是咱们set的那样，问题就在这里了。其实这个判断很简单，先是获取LayooutParams，了解这块的童鞋知道，这里其实获取的是父布局的LayoutParams，但是如果如果你从XML文件inflate的一个view，可想而知，这里其实是没有父布局的，因为你还没有执行为这个view执行addview的操作，所以这里获取的参数肯定为NULL，辣么判断很显然成立，辣么问题来了，这里从新new一个新的params，宽度match_parent，高度wrap_content,然后紧接着50 line完成了addview，然后传入参数就是这个params对象。this is cool....这里动画类的就不说了，我太菜了，看不懂....

　　

前边的GIF大家看了是不是感觉很炫，有个小点不知道大家注意了木，当BottomSheet出现的时候先出现一部分，之后拖动填充整个屏幕？

　　咱们继续看代码咯，look this.

     private float getDefaultPeekTranslation() {
         return hasFullHeightSheet() ? getHeight() /  : getSheetView().getHeight();
     }

     private boolean hasFullHeightSheet() {
         return getSheetView() == null || getSheetView().getHeight() == getHeight();
     }

　　判断你填充的view高度是不是match_parent，为什么只判断高度，因为宽度之前说到了都是macth_parent，这里只要填充的view的高度等于当前父view的高度，那么就先允许你出现当前高度的三分之一。如果不是那就简单咯，有多高就一下展示出来，就这么简单咯。

对于Module bottomsheet的,基本你可能需要知道的就这些了，想要调成布局大小或者是背景透明度的看完上边的就阔以了，下边的就别看了 　

接下里咱们要说的就是常用的包了。

bottomsheet-commons

Usage：BottomSheetFragment.java BottomSheetFragmentDelegate.java

　　使用其实很简单，直接创建class 继承这个BootomSheetFragment，然后重写onCreateView方法即可，是不是很简单，调用的时候依然一行code，new 这个新增Fagment对象然后调用期show(FragmentTransaction transaction, @IdRes int bottomSheetLayoutId)方法。

　　辣么问题来了，方法参数，表示什么意思，他又是如何显示出来的，可能你会说这不是show方法么，其实不然。这里咱们看下源码干了些什么？

     /**
      * {@inheritDoc}
      */
     @Override
     public int show(FragmentTransaction transaction, @IdRes int bottomSheetLayoutId) {
         return getDelegate().show(transaction, bottomSheetLayoutId);
     }

     /**
      * DialogFragment-like show() method for displaying this the associated sheet fragment
      *
      * @param manager FragmentManager instance
      * @param bottomSheetLayoutId Resource ID of the {@link BottomSheetLayout}
      */
     public void show(FragmentManager manager, @IdRes int bottomSheetLayoutId) {
         dismissed = false;
         shownByMe = true;
         this.bottomSheetLayoutId = bottomSheetLayoutId;
         manager.beginTransaction()
                 .add(fragment, String.valueOf(bottomSheetLayoutId))
                 .commit();
     }

　　这就是所有源码中的代码，通过辅助类间接调用，这里很简单就是给FragmentManager添加了一个Fragment对象。额，辣么之前说了一个方法用于显示和隐藏BottomSheet的showWithSheetView方法，这里很显然没调用这个方法。那么跟之前我说的只要显示必须调用showWithSheetView方法不一致了，尼玛，是不是觉得我之吹流弊了，非也，咱们继续看。

　　其实就翻看源码而言如果你发现遇到上边的问题的时候，你需要想到问题是，Fragment如何和BtoomSheetLayou联系在一起的，这时候你就可以在类

BottomSheetFragment搜索看是不否有对BottomSheetLayout的引用，其次是辅助类，BottomSheetFragmentDelegate,这样你就能很快的定位出其引用关系，按照如上
就定位出在BottomSheetFragmentDelegate中有对BottomSheetLayout的使用，辣么，咱们自然的就想到了是不是有调用显示的方法，辣么代码就来了。

     /**
      * Corresponding onStart() method
      */
     public void onStart() {
         if (bottomSheetLayout != null) {
             viewDestroyed = false;
             bottomSheetLayout.showWithSheetView(fragment.getView(), sheetFragmentInterface.getViewTransformer());
             bottomSheetLayout.addOnSheetDismissedListener(this);
         }
     }

　　关于其调用来自BottomSheetFragment的onStart方法，代码如下；

     @Override
     public void onStart() {
         super.onStart();
         getDelegate().onStart();
     }

　　到了这里大家发现每次Framgent onStart的时候调用，也就完成了显示。这里大家发现所以对BottomSheetlayout的操作都是有辅助类，BottomSheetFragmentDelegate来玩成与BottomSheetLayout的沟通交流。

　　这里我在唠叨几句我自己感觉挺好的地方。在BottomSheetLayout中重载了一个getLayoutInflater方法，看代码

     @Override
     public LayoutInflater getLayoutInflater(Bundle savedInstanceState) {
         return getDelegate().getLayoutInflater(savedInstanceState, super.getLayoutInflater(savedInstanceState));
     }

　　当然这里也是通过辅助类来完成的操作，这里传入的第二个参数也就是系统自己生成的layoutInflater对象。继续深入下：

    /**
      * Retrieves the appropriate layout inflater, either the sheet's or the view's super container. Note that you should
      * handle the result of this in your getLayoutInflater method.
      *
      * @param savedInstanceState Instance state, here to match Fragment API but unused.
      * @param superInflater The result of the view's inflater, usually the result of super.getLayoutInflater()
      * @return the layout inflater to use
      */
     @CheckResult
     public LayoutInflater getLayoutInflater(Bundle savedInstanceState, LayoutInflater superInflater) {
         if (!showsBottomSheet) {
             return superInflater;
         }
         bottomSheetLayout = getBottomSheetLayout();
         if (bottomSheetLayout != null) {
             return LayoutInflater.from(bottomSheetLayout.getContext());
         }
         return LayoutInflater.from(fragment.getContext());
     }

　　首先判断是不是使用BottomSheetlayout,如果是就直接使用系统生成的layoutInflater对象，否则就是读取bottomSheet对象是不是为null，如果不是就使用bottomSheetlayout的上下文去生成一个layoutInflater对象，否则就直接使用start这个Fragment的Activity的上下文去生成这个layoutInflater对象。

　　这里咱们深入挖掘下这个BottomSheetLayout对象的获取，

    /**
      * @return this fragment sheet's {@link BottomSheetLayout}.
      */
     public BottomSheetLayout getBottomSheetLayout() {
         if (bottomSheetLayout == null) {
             bottomSheetLayout = findBottomSheetLayout();
         }

         return bottomSheetLayout;
     }

　　判断缓存中是否存在这个对象，如果存在就直接return回去这个对象，否则就去查找。

     @Nullable
     private BottomSheetLayout findBottomSheetLayout() {
         Fragment parentFragment = fragment.getParentFragment();
         if (parentFragment != null) {
             View view = parentFragment.getView();
             if (view != null) {
                 return (BottomSheetLayout) view.findViewById(bottomSheetLayoutId);
             } else {
                 return null;
             }
         }
         Activity parentActivity = fragment.getActivity();
         if (parentActivity != null) {
             return (BottomSheetLayout) parentActivity.findViewById(bottomSheetLayoutId);
         }
         return null;
     }

　　首先判断当前Fragment是否有父Fragment如果当前Fragment没有Attached在一个Activity上返回父Fragemnt对象，否则就返回null。如果不返回null说明此事还没有粘附在任何Activity上，那么久获取onCreateView中的View去查找bottonSheetLayouyId，这个bottonSheetLayouyId在show方法调用的时候传入，然后查找到这个BottomSheetLayout对象。如果反回null，说明此事已经Attach在一个Activity上了，辣么，就回去粘附的Activity对象，也就是上下文对象，然后根据BottomSheetId去查找到这个对象，然后返回给调用者。最后是默认值直接就是null。

　　基本到这里咱们需要知道有关BottomSheetFragemnt的使用就这些了。

下边就简单commons控件了，大家按照之前我说的很快就能明白了，没啥技术难度的了。。。

　　就暂时先这些了，文章中的不足之处，请多多指出，以便我及时的修改，谢谢。。。

　　把想象付诸实践，然后你就成功了一半，人的价值总是在这些成功或失败中得以体现。