9 | 10 | CircleMenu 是在 dribbble 上看到的一个比较有感觉的设计，并不炫酷，但是 UI 很精致，值得推敲的细节比较多。因为没有比较标准的原型图。在还原设计的时候，来来回回修改好多次。到最后也不知道跟原设计有多少差距。不过自己看着还算满意。 11 | 12 | 该库在实现的时候碰到了许多困难。比如选中子菜单项绘制圆环轨迹路径的时候，使用 PathMeasure 发现 getSegment 方法并不是可以截取任何两个位置之间的 Path（因为要从选中的子菜单按钮的位置开始绘制圆环轨迹路径），思考良久后，使用旋转画布的方法巧妙解决。 13 | 14 | 又例如，在圆环绘制完成后，圆环会逐渐放大扩散变透明，然后消失的动画。如果这个动画针对的是一个 View 对象，我想使用 ObjectAnimator 可以很快解决。但是现在是在 onDraw 中绘制这一动画效果。最困难的是绘制圆环扩散变透明直至消失这一动画效果。（ps:期间还问过我 QQ 中所有技术群。都说很简单，就是没人说具体，群中绝大部分都是各种灌水，到最后也得不到答案。那时候的感觉很糟糕，感觉再也不相信技术群了，伤心···）最后实现很简单，也是无意中发现 ColorUtils 这个类， ColorUtils 是 Support.v4 中提供的，封装了对 Color 的各种操作。我使用了 ColorUtils.setAlphaComponent(color, alpha) 来操作圆环的颜色的透明度，从而达到一个圆环逐渐消失的效果。 15 | 16 | 最后谢谢 [Aige](http://blog.csdn.net/aigestudio?viewmode=contents) 和 [GcsSloop](http://www.gcssloop.com/#blog) 两位大神无私奉献。让我能深入学习自定义 View 范畴的知识。让我有能力去完成这个项目。 17 | 18 | 19 | # Preview 20 | 21 |
22 |
23 |
24 | # Import
25 |
26 | ### Gradle
27 |
28 | Step 1. Add the JitPack repository to your build file
29 |
30 | allprojects {
31 | repositories {
32 | ...
33 | maven { url "https://jitpack.io" }
34 | }
35 | }
36 |
37 | Step 2. Add the dependency
38 |
39 | dependencies {
40 | compile 'com.github.Hitomis:CircleMenu:v1.1.0'
41 | }
42 |
43 | ### Maven
44 |
45 | Step 1. Add the JitPack repository to your build file
46 |
47 | 112 | IOS 版本 [Ramotion](https://github.com/Ramotion/circle-menu) 113 | 114 | # Licence 115 | 116 | Copyright 2016 Hitomis, Inc. 117 | 118 | Licensed under the Apache License, Version 2.0 (the "License"); 119 | you may not use this file except in compliance with the License. 120 | You may obtain a copy of the License at 121 | 122 | http://www.apache.org/licenses/LICENSE-2.0 123 | 124 | Unless required by applicable law or agreed to in writing, software 125 | distributed under the License is distributed on an "AS IS" BASIS, 126 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 127 | See the License for the specific language governing permissions and 128 | limitations under the License. 129 | 130 | 131 | 132 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /cmlibrary/src/main/java/com/hitomi/cmlibrary/CircleMenu.java: -------------------------------------------------------------------------------- 1 | package com.hitomi.cmlibrary; 2 | 3 | import android.animation.Animator; 4 | import android.animation.AnimatorListenerAdapter; 5 | import android.animation.AnimatorSet; 6 | import android.animation.ValueAnimator; 7 | import android.content.Context; 8 | import android.graphics.Bitmap; 9 | import android.graphics.Canvas; 10 | import android.graphics.Color; 11 | import android.graphics.Paint; 12 | import android.graphics.Path; 13 | import android.graphics.PathMeasure; 14 | import android.graphics.RadialGradient; 15 | import android.graphics.RectF; 16 | import android.graphics.Shader; 17 | import android.graphics.drawable.BitmapDrawable; 18 | import android.graphics.drawable.Drawable; 19 | import android.graphics.drawable.GradientDrawable; 20 | import android.support.v4.graphics.ColorUtils; 21 | import android.util.AttributeSet; 22 | import android.view.MotionEvent; 23 | import android.view.View; 24 | import android.view.animation.AccelerateDecelerateInterpolator; 25 | import android.view.animation.AnticipateInterpolator; 26 | import android.view.animation.LinearInterpolator; 27 | import android.view.animation.OvershootInterpolator; 28 | 29 | import java.util.ArrayList; 30 | import java.util.List; 31 | 32 | /** 33 | * Created by hitomi on 2016/9/28. 34 | *
35 | * github : https://github.com/Hitomis
36 | *
37 | * email : 196425254@qq.com
38 | */
39 | public class CircleMenu extends View {
40 |
41 | private static final int STATUS_MENU_OPEN = 1;
42 |
43 | private static final int STATUS_MENU_OPENED = 1 << 1;
44 |
45 | private static final int STATUS_MENU_CLOSE = 1 << 2;
46 |
47 | private static final int STATUS_MENU_CLOSE_CLEAR = 1 << 3;
48 |
49 | private static final int STATUS_MENU_CLOSED = 1 << 4;
50 |
51 | private static final int STATUS_MENU_CANCEL = 1 << 5;
52 |
53 | private static final int MAX_SUBMENU_NUM = 8;
54 |
55 | private final int shadowRadius = 5;
56 |
57 | private int partSize;
58 |
59 | private int iconSize;
60 |
61 | private float circleMenuRadius;
62 |
63 | private int itemNum;
64 |
65 | private float itemMenuRadius;
66 |
67 | private float fraction, rFraction;
68 |
69 | private float pathLength;
70 |
71 | private int mainMenuColor;
72 |
73 | private Drawable openMenuIcon, closeMenuIcon;
74 |
75 | private List
496 | * 根据 fraction 调整 color 的 Alpha 值
497 | *
498 | * @param color 被调整 Alpha 值的颜色
499 | * @param reverse true : 由不透明到透明的顺序调整，否则就逆序
500 | * @return
501 | */
502 | private int calcAlphaColor(int color, boolean reverse) {
503 | int alpha;
504 | if (reverse) { // 由不透明到透明
505 | alpha = (int) (255 * (1.f - fraction));
506 | } else { // 由透明到不透明
507 | alpha = (int) (255 * fraction);
508 | }
509 | if (alpha >= 255) alpha = 255;
510 | if (alpha <= 0) alpha = 0;
511 | return ColorUtils.setAlphaComponent(color, alpha);
512 | }
513 |
514 | /**
515 | * 启动打开菜单动画
516 | */
517 | private void startOpenMenuAnima() {
518 | ValueAnimator openAnima = ValueAnimator.ofFloat(1.f, 100.f);
519 | openAnima.setDuration(500);
520 | openAnima.setInterpolator(new OvershootInterpolator());
521 | openAnima.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
522 | @Override
523 | public void onAnimationUpdate(ValueAnimator valueAnimator) {
524 | fraction = valueAnimator.getAnimatedFraction();
525 | itemMenuRadius = fraction * partSize;
526 | itemIconSize = (int) (fraction * iconSize);
527 | invalidate();
528 | }
529 | });
530 | openAnima.addListener(new AnimatorListenerAdapter() {
531 | @Override
532 | public void onAnimationEnd(Animator animation) {
533 | status = STATUS_MENU_OPENED;
534 | if (onMenuStatusChangeListener != null)
535 | onMenuStatusChangeListener.onMenuOpened();
536 | }
537 | });
538 | openAnima.start();
539 | }
540 |
541 | /**
542 | * 启动取消动画
543 | */
544 | private void startCancelMenuAnima() {
545 | ValueAnimator cancelAnima = ValueAnimator.ofFloat(1.f, 100.f);
546 | cancelAnima.setDuration(500);
547 | cancelAnima.setInterpolator(new AnticipateInterpolator());
548 | cancelAnima.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
549 | @Override
550 | public void onAnimationUpdate(ValueAnimator valueAnimator) {
551 | fraction = valueAnimator.getAnimatedFraction();
552 | itemMenuRadius = (1 - fraction) * partSize;
553 | itemIconSize = (int) ((1 - fraction) * iconSize);
554 | invalidate();
555 | }
556 | });
557 | cancelAnima.addListener(new AnimatorListenerAdapter() {
558 | @Override
559 | public void onAnimationEnd(Animator animation) {
560 | status = STATUS_MENU_CLOSED;
561 | if (onMenuStatusChangeListener != null)
562 | onMenuStatusChangeListener.onMenuClosed();
563 | }
564 | });
565 | cancelAnima.start();
566 | }
567 |
568 | /**
569 | * 开启关闭菜单动画
570 | * 关闭菜单动画分为三部分
495 | *
640 | * 中心菜单下标为0，周围菜单从正上方顺时针计数1~5
641 | *
642 | * @param x
643 | * @param y
644 | * @return
645 | */
646 | private int clickWhichRectF(float x, float y) {
647 | int which = -1;
648 | for (RectF rectF : menuRectFList) {
649 | if (rectF.contains(x, y)) {
650 | which = menuRectFList.indexOf(rectF);
651 | break;
652 | }
653 | }
654 | return which;
655 | }
656 |
657 | private Drawable convertDrawable(int iconRes) {
658 | return getResources().getDrawable(iconRes);
659 | }
660 |
661 | private Drawable convertBitmap(Bitmap bitmap) {
662 | return new BitmapDrawable(getResources(), bitmap);
663 | }
664 |
665 | private void resetMainDrawableBounds() {
666 | openMenuIcon.setBounds(centerX - iconSize / 2, centerY - iconSize / 2,
667 | centerX + iconSize / 2, centerY + iconSize / 2);
668 | closeMenuIcon.setBounds(centerX - iconSize / 2, centerY - iconSize / 2,
669 | centerX + iconSize / 2, centerY + iconSize / 2);
670 | }
671 |
672 | /**
673 | * 设置主菜单的背景色，以及打开/关闭的图标
674 | *
675 | * @param mainMenuColor 主菜单背景色
676 | * @param openMenuRes 菜单打开图标，Resource 格式
677 | * @param closeMenuRes 菜单关闭图标，Resource 格式
678 | * @return
679 | */
680 | public CircleMenu setMainMenu(int mainMenuColor, int openMenuRes, int closeMenuRes) {
681 | openMenuIcon = convertDrawable(openMenuRes);
682 | closeMenuIcon = convertDrawable(closeMenuRes);
683 | this.mainMenuColor = mainMenuColor;
684 | return this;
685 | }
686 |
687 | /**
688 | * 设置主菜单的背景色，以及打开/关闭的图标
689 | *
690 | * @param mainMenuColor 主菜单背景色
691 | * @param openMenuBitmap 菜单打开图标，Bitmap 格式
692 | * @param closeMenuBitmap 菜单关闭图标，Bitmap 格式
693 | * @return
694 | */
695 | public CircleMenu setMainMenu(int mainMenuColor, Bitmap openMenuBitmap, Bitmap closeMenuBitmap) {
696 | openMenuIcon = convertBitmap(openMenuBitmap);
697 | closeMenuIcon = convertBitmap(closeMenuBitmap);
698 | this.mainMenuColor = mainMenuColor;
699 | return this;
700 | }
701 |
702 | /**
703 | * 设置主菜单的背景色，以及打开/关闭的图标
704 | *
705 | * @param mainMenuColor 主菜单背景色
706 | * @param openMenuDrawable 菜单打开图标，Drawable 格式
707 | * @param closeMenuDrawable 菜单关闭图标，Drawable 格式
708 | * @return
709 | */
710 | public CircleMenu setMainMenu(int mainMenuColor, Drawable openMenuDrawable, Drawable closeMenuDrawable) {
711 | openMenuIcon = openMenuDrawable;
712 | closeMenuIcon = closeMenuDrawable;
713 | this.mainMenuColor = mainMenuColor;
714 | return this;
715 | }
716 |
717 | /**
718 | * 添加一个子菜单项，包括子菜单的背景色以及图标
719 | *
720 | * @param menuColor 子菜单的背景色
721 | * @param menuRes 子菜单图标，Resource 格式
722 | * @return
723 | */
724 | public CircleMenu addSubMenu(int menuColor, int menuRes) {
725 | if (subMenuColorList.size() < MAX_SUBMENU_NUM && subMenuDrawableList.size() < MAX_SUBMENU_NUM) {
726 | subMenuColorList.add(menuColor);
727 | subMenuDrawableList.add(convertDrawable(menuRes));
728 | itemNum = Math.min(subMenuColorList.size(), subMenuDrawableList.size());
729 | }
730 | return this;
731 | }
732 |
733 | /**
734 | * 添加一个子菜单项，包括子菜单的背景色以及图标
735 | *
736 | * @param menuColor 子菜单的背景色
737 | * @param menuBitmap 子菜单图标，Bitmap 格式
738 | * @return
739 | */
740 | public CircleMenu addSubMenu(int menuColor, Bitmap menuBitmap) {
741 | if (subMenuColorList.size() < MAX_SUBMENU_NUM && subMenuDrawableList.size() < MAX_SUBMENU_NUM) {
742 | subMenuColorList.add(menuColor);
743 | subMenuDrawableList.add(convertBitmap(menuBitmap));
744 | itemNum = Math.min(subMenuColorList.size(), subMenuDrawableList.size());
745 | }
746 | return this;
747 | }
748 |
749 | /**
750 | * 添加一个子菜单项，包括子菜单的背景色以及图标
751 | *
752 | * @param menuColor 子菜单的背景色
753 | * @param menuDrawable 子菜单图标，Drawable 格式
754 | * @return
755 | */
756 | public CircleMenu addSubMenu(int menuColor, Drawable menuDrawable) {
757 | if (subMenuColorList.size() < MAX_SUBMENU_NUM && subMenuDrawableList.size() < MAX_SUBMENU_NUM) {
758 | subMenuColorList.add(menuColor);
759 | subMenuDrawableList.add(menuDrawable);
760 | itemNum = Math.min(subMenuColorList.size(), subMenuDrawableList.size());
761 | }
762 | return this;
763 | }
764 |
765 | /**
766 | * 打开菜单
767 | * Open the CircleMenu
768 | */
769 | public void openMenu() {
770 | if (status == STATUS_MENU_CLOSED) {
771 | status = STATUS_MENU_OPEN;
772 | startOpenMenuAnima();
773 | }
774 | }
775 |
776 | /**
777 | * 关闭菜单
778 | * Close the CircleMenu
779 | */
780 | public void closeMenu() {
781 | if (status == STATUS_MENU_OPENED) {
782 | status = STATUS_MENU_CANCEL;
783 | startCancelMenuAnima();
784 | }
785 | }
786 |
787 | /**
788 | * 菜单是否关闭
789 | * Returns whether the menu is alread open
790 | *
791 | * @return
792 | */
793 | public boolean isOpened() {
794 | return status == STATUS_MENU_OPENED;
795 | }
796 |
797 | public CircleMenu setOnMenuSelectedListener(OnMenuSelectedListener listener) {
798 | this.onMenuSelectedListener = listener;
799 | return this;
800 | }
801 |
802 | public CircleMenu setOnMenuStatusChangeListener(OnMenuStatusChangeListener listener) {
803 | this.onMenuStatusChangeListener = listener;
804 | return this;
805 | }
806 |
807 | private int dip2px(float dpValue) {
808 | final float scale = getContext().getResources().getDisplayMetrics().density;
809 | return (int) (dpValue * scale + 0.5f);
810 | }
811 | }
812 |
--------------------------------------------------------------------------------