Merge branch 'master' of https://github.com/android-cn/android-open-project-analysis

Author: grumoon

android-lockpattern/README.md

@@ -8,7 +8,7 @@ android-lockpattern 实现原理解析
 
 ####1.1 关于
 
-Android的图案密码解锁
+Android的图案密码解锁，基于[Android Source Code](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/com/android/internal/widget/LockPatternView.java)
 
 ![ScreenShot](image/ScreenShot.png)
 

circular-floating-action-menu/README.md

@@ -2,7 +2,7 @@ CircularFloatingActionMenu 实现原理解析
 ====================================
 > 本文为 [Android 开源项目实现原理解析](https://github.com/android-cn/android-open-project-analysis) 中 circular-foating-action-menu 部分  
 > 项目地址：[CircularFloatingActionMenu](https://github.com/oguzbilgener/CircularFloatingActionMenu)，分析的版本：[e9ccdad](https://github.com/android-cn/android-open-project-demo/commit/1306e632d5a7734cd8451f4e10dff763f9ab4097)，Demo 地址：[circular-foating-action-menu](https://github.com/android-cn/android-open-project-demo/tree/master/CircularFloatingActionMenu-demo)    
-> 分析者：[cpacm](https://github.com/cpacm)，校对者：[${校对者}](${校对者 Github 地址})，校对状态：未完成   
+> 分析者：[cpacm](https://github.com/cpacm)，校对者：[dkmeteor](https://github.com/dkmeteor)，校对状态：未完成   
 
 ###1. 功能介绍  
 “一个灵感来自Path路径的Android上可定制圆形浮动菜单动画”  
@@ -87,8 +87,11 @@ CircularFloatingActionMenu 实现原理解析
 这样子，一个简单的案例就做好了
 
 ![流程图](https://github.com/android-cn/android-open-project-analysis/blob/master/circular-floating-action-menu/流程图.jpg "流程图")
-
-###3详细设计
+###3. 流程图
+![设计流程图](https://github.com/android-cn/android-open-project-analysis/blob/master/circular-floating-action-menu/circlemenu.jpg "流程图")
+  
+总体的设计流程图如上图所示，中间最复杂的可能是计算view位置的地方。
+###4. 详细设计
 
 ##SubActionButton
 首先是构造函数
@@ -174,7 +177,7 @@ public SubActionButton(Activity activity, LayoutParams layoutParams, int theme,
         }
     }
 ```
-传入activity，视图特性配置，主题的id,背景图，imageview（子视图），mageview（子视图）的特性配置。用这些来配置选项按钮。
+传入activity，视图特性配置，主题的id,背景图，imageview（子视图），imageview（子视图）的特性配置。用这些来配置选项按钮。
 
 ##FloatingActionButton
 菜单按钮其实跟选项按钮的代码模式差不多，也是由设定子视图和一个建造器组成。  
@@ -189,47 +192,15 @@ public SubActionButton(Activity activity, LayoutParams layoutParams, int theme,
     public void setPosition(int position, FrameLayout.LayoutParams layoutParams) {
         int gravity;
         switch(position) {
-            case POSITION_TOP_CENTER:
-                gravity = Gravity.TOP | Gravity.CENTER_HORIZONTAL;
-                break;
-            case POSITION_TOP_RIGHT:
-                gravity = Gravity.TOP | Gravity.RIGHT;
-                break;
-            case POSITION_RIGHT_CENTER:
-                gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;
-                break;
-            case POSITION_BOTTOM_CENTER:
-                gravity = Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL;
-                break;
-            case POSITION_BOTTOM_LEFT:
-                gravity = Gravity.BOTTOM | Gravity.LEFT;
-                break;
-            case POSITION_LEFT_CENTER:
-                gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;
-                break;
-            case POSITION_TOP_LEFT:
-                gravity = Gravity.TOP | Gravity.LEFT;
-                break;
-            case POSITION_BOTTOM_RIGHT:
-                default:
-                gravity = Gravity.BOTTOM | Gravity.RIGHT;
-                break;
+            ...//具体代码请自行查看源代码
         }
         layoutParams.gravity = gravity;
         setLayoutParams(layoutParams);
     }
 ```
 
 将视图绑定到activity的主视图中。这样我们就能在activity的主视图中操作这个view了。
-```java
-    /**
-     * Attaches it to the Activity content view with specified LayoutParams.
-     * @param layoutParams
-     */
-    public void attach(FrameLayout.LayoutParams layoutParams) {
-        ((ViewGroup)getActivityContentView()).addView(this, layoutParams);
-    }
-```
+
 
 FloatingActionButton的建造器
 ```java
@@ -268,111 +239,19 @@ FloatingActionMenu rightLowerMenu = new FloatingActionMenu.Builder(this)
 * Builder(this)将activity传入menu中
 * addSubActionView 添加选项按钮到activity的视图中。在FloatingActionMenu中管理SubActionView是一个Item的list集合，每次加一个按钮就往里面添加。Item是一个辅助类，里面包括一个视图，x坐标,y坐标,长度,宽度。
 * setAnimationHandler 则是设定动画。
-* attachTo是将menu与activity的视图绑定。（即把菜单按钮的视图添加到activity的视图中）
-  
-item类
-```java
-    /**
-     * A simple structure to put a view and its x, y, width and height values together
-     */
-    public static class Item {
-        public int x;
-        public int y;
-        public int width;
-        public int height;
-
-        public View view;
-
-        public Item(View view, int width, int height) {
-            this.view = view;
-            this.width = width;
-            this.height = height;
-            x = 0;
-            y = 0;
-        }
-    }
-```
+* attachTo是将menu与activity的视图绑定。（即把菜单按钮的视图添加到activity的视图中）  
+
 FloatingActionMenu类主要是管理菜单按钮和选项按钮的位置和状态（开和关）  
-（1）首先是通过view的onClick监听器来控制状态
-```java
-    /**
-     * A simple click listener used by the main action view
-     */
-    public class ActionViewClickListener implements View.OnClickListener {
+（1）首先是通过view的onClick监听器来控制状态  
 
-        @Override
-        public void onClick(View v) {
-            toggle(animated);
-        }
-    }
-    
-    /**
-     * Toggles the menu
-     * @param animated if true, the open/close action is executed by the current {@link MenuAnimationHandler}
-     */
-    public void toggle(boolean animated) {
-        if(open) {
-            close(animated);
-        }
-        else {
-            open(animated);
-        }
-    }
-```
 （2）开关主要是两种状态，开的时候会获得菜单按钮的中心位置center（getActionViewCenter()）和计算item的位置（calculateItemPositions()）。然后发送动画的请求到AnimationHandler中（animationHandler.animateMenuOpening(center)）。
 ```java
     /**
      * Simply opens the menu by doing necessary calculations.
      * @param animated if true, this action is executed by the current {@link MenuAnimationHandler}
      */
     public void open(boolean animated) {
-        // Find the center of the action view
-        Point center = getActionViewCenter();
-        // populate destination x,y coordinates of Items
-        calculateItemPositions();
-
-        if(animated && animationHandler != null) {
-            // If animations are enabled and we have a MenuAnimationHandler, let it do the heavy work
-            if(animationHandler.isAnimating()) {
-                // Do not proceed if there is an animation currently going on.
-                return;
-            }
-
-            for (int i = 0; i < subActionItems.size(); i++) {
-                // It is required that these Item views are not currently added to any parent
-                // Because they are supposed to be added to the Activity content view,
-                // just before the animation starts
-                if (subActionItems.get(i).view.getParent() != null) {
-                    throw new RuntimeException("All of the sub action items have to be independent from a parent.");
-                }
-                // Initially, place all items right at the center of the main action view
-                // Because they are supposed to start animating from that point.
-                FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(subActionItems.get(i).width, subActionItems.get(i).height, Gravity.TOP | Gravity.LEFT);
-                params.setMargins(center.x - subActionItems.get(i).width / 2, center.y - subActionItems.get(i).height / 2, 0, 0);
-                //
-                ((ViewGroup) getActivityContentView()).addView(subActionItems.get(i).view, params);
-            }
-            // Tell the current MenuAnimationHandler to animate from the center
-            animationHandler.animateMenuOpening(center);
-        }
-        else {
-            // If animations are disabled, just place each of the items to their calculated destination positions.
-            for (int i = 0; i < subActionItems.size(); i++) {
-                // This is currently done by giving them large margins
-                final FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(subActionItems.get(i).width, subActionItems.get(i).height, Gravity.TOP | Gravity.LEFT);
-                params.setMargins(subActionItems.get(i).x, subActionItems.get(i).y, 0, 0);
-                subActionItems.get(i).view.setLayoutParams(params);
-                // Because they are placed into the main content view of the Activity,
-                // which is itself a FrameLayout
-                ((ViewGroup) getActivityContentView()).addView(subActionItems.get(i).view, params);
-            }
-        }
-        // do not forget to specify that the menu is open.
-        open = true;
-
-        if(stateChangeListener != null) {
-            stateChangeListener.onMenuOpened(this);
-        }
+        ...//具体代码请自行查看源代码
     }
 ```
 其中item的x,y是记录视图的终点位置，然后经过动画把view移到x,y的位置上。  
@@ -393,33 +272,7 @@ stateChangeListener为状态变化的监听器，开关都会响应相应的方
      * Calculates the desired positions of all items.
      */
     private void calculateItemPositions() {
-        // Create an arc that starts from startAngle and ends at endAngle
-        // in an area that is as large as 4*radius^2
-        Point center = getActionViewCenter();
-        //内切弧形路径
-        RectF area = new RectF(center.x - radius, center.y - radius, center.x + radius, center.y + radius);
-        Path orbit = new Path();
-        orbit.addArc(area, startAngle, endAngle - startAngle);
-
-        PathMeasure measure = new PathMeasure(orbit, false);
-
-        // Prevent overlapping when it is a full circle
-        int divisor;
-        if(Math.abs(endAngle - startAngle) >= 360 || subActionItems.size() <= 1) {
-            divisor = subActionItems.size();
-        }
-        else {
-            divisor = subActionItems.size() -1;
-        }
-
-        // Measure this path, in order to find points that have the same distance between each other
-        for(int i=0; i<subActionItems.size(); i++) {
-            float[] coords = new float[] {0f, 0f};
-            measure.getPosTan((i) * measure.getLength() / divisor, coords, null);
-            // get the x and y values of these points and set them to each of sub action items.
-            subActionItems.get(i).x = (int) coords[0] - subActionItems.get(i).width / 2;
-            subActionItems.get(i).y = (int) coords[1] - subActionItems.get(i).height / 2;
-        }
+        ...//具体代码请自行查看源代码
     }
 ```
 
@@ -435,24 +288,7 @@ stateChangeListener为状态变化的监听器，开关都会响应相应的方
      * @param actionType
      */
     protected void restoreSubActionViewAfterAnimation(FloatingActionMenu.Item subActionItem, ActionType actionType) {
-        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) subActionItem.view.getLayoutParams();
-        subActionItem.view.setTranslationX(0);
-        subActionItem.view.setTranslationY(0);
-        subActionItem.view.setRotation(0);
-        subActionItem.view.setScaleX(1);
-        subActionItem.view.setScaleY(1);
-        subActionItem.view.setAlpha(1);
-        if(actionType == ActionType.OPENING) {
-            //与父视图的边框距离，只要设置左上两个方位就能确定位置
-            params.setMargins(subActionItem.x, subActionItem.y, 0, 0);
-            subActionItem.view.setLayoutParams(params);
-        }
-        else if(actionType == ActionType.CLOSING) {
-            Point center = menu.getActionViewCenter();
-            params.setMargins(center.x - subActionItem.width / 2, center.y - subActionItem.height / 2, 0, 0);
-            subActionItem.view.setLayoutParams(params);
-            ((ViewGroup) menu.getActivityContentView()).removeView(subActionItem.view);
-        }
+        ...//具体代码请自行查看源代码
     }
 ```
 Animator属性动画以及其他动画的实现请参考我写的博客  
@@ -462,21 +298,7 @@ Animator属性动画以及其他动画的实现请参考我写的博客
 
 
 
-###4. 杂谈
-动画的类型有点少，以及不支持分辨率奇葩的机型，如魅族3
-
-
-###5. 修改完善  
-在完成了上面 5 个部分后，移动模块顺序，将  
-`2. 详细设计` -> `2.1 核心类功能介绍` -> `2.2 类关系图` -> `3. 流程图` -> `4. 总体设计`  
-顺序变为  
-`2. 总体设计` -> `3. 流程图` -> `4. 详细设计` -> `4.1 类关系图` -> `4.2 核心类功能介绍`  
-并自行校验优化一遍，确认无误后，让`校对 Buddy`进行校对，`校对 Buddy`校队完成后将  
-`校对状态：未完成`  
-变为：  
-`校对状态：已完成`  
+###5. 杂谈
+动画的类型有点少，以及在屏幕尺寸异常的机子上测试时（如mx3的1800x1080）会出现子选项偏离中心菜单键的问题，原因出在view的位置计算上，它没有考虑到一些特殊机型的机子。
 
-**完成时间**  
-- `两天内`完成  
 
-**到此便大功告成，恭喜大家^_^**  

circular-floating-action-menu/circlemenu.jpg

@@ -13,7 +13,7 @@ ${项目名} 实现原理解析
 - `一天内`完成  
 
 ###2. 详细设计
-###2.1 核心类功能介绍
+###2.1 类详细介绍
 核心类、函数功能介绍及核心功能流程图，流程图可使用 StartUML、Visio 或 Google Drawing。  
 ###2.2 类关系图
 类关系图，类的继承、组合关系图，可是用 StartUML 工具。