<p>前不久看到鸿洋大大的圆形菜单，就想开始模仿，因为实在是太酷了，然后自己根据别人（zw哥）给我讲的一些思路、一些分析，就开始改造自己的圆形菜单了。</p>    <h3><strong>文章结构：1.功能介绍以及展示；2.部分代码讲解；3.大致可以实现的UI效果展示讲解。4.源码附送。</strong></h3>    <h2><strong>一、功能介绍以及展示</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/211577151040d41d468f397c903f2205.gif"></p>    <p style="text-align:center">这里写图片描述</p>    <p>第一个展示是本控件的原样。但是我们可以使用很多技巧去达到我们的商业UI效果嘛。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b3d1fb73017f356f8615caa8067bf904.gif"></p>    <p style="text-align:center">这里写图片描述</p>    <p>这里给出的是本博客作品demo的展示图以及第三点的联动展示，可见是一圆型菜单，相较于鸿洋大大的那个圆形菜单多了一些需求：1.到时候展示只需要半圆的转盘。2.在规定的角度不能让他们自动旋转（涉及延伸的一些数学计算，一会重点讲解）。3.要绑定fragment。4.一个缓冲角度，即我们将要固定几个位置，而不是任意位置。我们要设计一个可能的角度去自动帮他选择。</p>    <h2><strong>二、代码讲解：</strong></h2>    <p>结合实际使用的方式来讲解。分为：1.调用方式；2.此控件onMeasure方法;3.onLayout方法的作用；4.此控件事件机制dispatchTouchEvent的使用；5.数学计算---一个缓冲角度。</p>    <h3><strong>（1）调用方式 ：(代码为展示区下方的效果代码)</strong></h3>    <pre>  <code class="language-java">//采用的是联动，使用Fragment管理器FragmentTransaction去实现fragment管理  package com.fuzhucheng.circlemenu;    import android.os.Bundle;  import android.support.v4.app.FragmentTransaction;  import android.support.v7.app.AppCompatActivity;  import android.view.KeyEvent;  import android.view.View;  import android.widget.Toast;    public class MainActivity extends AppCompatActivity {        private UpCircleMenuLayout myCircleMenuLayout;        //四个fragment页面      private HomepageFragment homepageFragment;      private SettingFragment settingFragment;      private HistoryFragment historyFragment;      private FourthFragment fourthFragment;      private FifthFragment fifthFragment;        private String[] mItemTexts = new String[]{"安全中心 ", "特色服务", "投资理财",              "转账汇款", "我的账户", "安全中心", "特色服务", "投资理财", "转账汇款", "我的账户"};      private int[] mItemImgs = new int[]{R.drawable.home_mbank_1_normal,              R.drawable.home_mbank_2_normal, R.drawable.home_mbank_3_normal,              R.drawable.home_mbank_4_normal, R.drawable.home_mbank_5_normal,              R.drawable.home_mbank_1_normal, R.drawable.home_mbank_2_normal,              R.drawable.home_mbank_3_normal, R.drawable.home_mbank_4_normal,              R.drawable.home_mbank_5_normal};        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);            //第一次初始化首页默认显示第一个fragment          initFragment1();          myCircleMenuLayout = (UpCircleMenuLayout) findViewById(R.id.id_mymenulayout);          myCircleMenuLayout.setMenuItemIconsAndTexts(mItemImgs);//一句设置图片          myCircleMenuLayout.setOnMenuItemClickListener(new UpCircleMenuLayout.OnMenuItemClickListener() {                @Override              public void itemClick(int pos) {                  Toast.makeText(MainActivity.this, mItemTexts[pos],                          Toast.LENGTH_SHORT).show();                  switch (pos) {                      case 0:                          initFragment1();                          setTitle("安全中心");                          break;                      case 1:                          initFragment2();                          setTitle("特色服务");                          break;                      case 2:                          initFragment3();                          setTitle("投资理财");                          break;                      case 3:                          initFragment4();                          setTitle("转账汇款");                          break;                      case 4:                          initFragment5();                          setTitle("我的账户");                          break;                      case 5:                          initFragment1();                          setTitle("安全中心");                          break;                      case 6:                          initFragment2();                          setTitle("特色服务");                          break;                      case 7:                          initFragment3();                          setTitle("投资理财");                          break;                      case 8:                          initFragment4();                          setTitle("转账汇款");                          break;                      case 9:                          initFragment5();                          setTitle("我的账户");                          break;                  }              }                @Override              public void itemCenterClick(View view) {                  Toast.makeText(MainActivity.this,                          "you can do something just like ccb  ",                          Toast.LENGTH_SHORT).show();              }          });        }        //显示第一个fragment      private void initFragment1(){          //开启事务，fragment的控制是由事务来实现的            homepageFragment = new HomepageFragment();          FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();          transaction.replace(R.id.fragment_tv,homepageFragment);          transaction.addToBackStack(null);          transaction.commit();      }      //显示第二个fragment      private void initFragment2(){          //开启事务，fragment的控制是由事务来实现的            settingFragment = new SettingFragment();          FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();          transaction.replace(R.id.fragment_tv,settingFragment);          transaction.addToBackStack(null);          transaction.commit();      }      private void initFragment3(){          //开启事务，fragment的控制是由事务来实现的            historyFragment = new HistoryFragment();          FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();          transaction.replace(R.id.fragment_tv,historyFragment);          transaction.addToBackStack(null);          transaction.commit();      }      private void initFragment4(){          //开启事务，fragment的控制是由事务来实现的            fourthFragment = new FourthFragment();          FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();          transaction.replace(R.id.fragment_tv,fourthFragment);          transaction.addToBackStack(null);          transaction.commit();      }      private void initFragment5(){          //开启事务，fragment的控制是由事务来实现的            fifthFragment = new FifthFragment();          FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();          transaction.replace(R.id.fragment_tv,fifthFragment);          transaction.addToBackStack(null);          transaction.commit();      }        public boolean onKeyDown(int keyCode, KeyEvent event) {            if (keyCode == KeyEvent.KEYCODE_BACK                  && event.getRepeatCount() == 0) {              finish();              return true;          }          return super.onKeyDown(keyCode, event);      }  }</code></pre>    <h3><strong>（2）此控件onMeasure方法讲解：重点讲解迭代测量</strong></h3>    <pre>  <code class="language-java">/**       * 设置布局的宽高，并策略menu item宽高       */      @Override      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {          int resWidth = 0;          int resHeight = 0;          double startAngle = mStartAngle;            double angle = 360 / 10;   //我们传入了10个孩子          /**           * 根据传入的参数，分别获取测量模式和测量值           */          int width = MeasureSpec.getSize(widthMeasureSpec);          int widthMode = MeasureSpec.getMode(widthMeasureSpec);            int height = MeasureSpec.getSize(heightMeasureSpec);          int heightMode = MeasureSpec.getMode(heightMeasureSpec);            /**           * 如果宽或者高的测量模式非精确值           */          if (widthMode != MeasureSpec.EXACTLY                  || heightMode != MeasureSpec.EXACTLY) {              // 主要设置为背景图的高度                resWidth = getDefaultWidth();                resHeight = (int) (resWidth * DEFAULT_BANNER_HEIGTH /                      DEFAULT_BANNER_WIDTH);            } else {              // 如果都设置为精确值，则直接取小值；              resWidth = resHeight = Math.min(width, height);          }            setMeasuredDimension(resWidth, resHeight);            // 获得直径          mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight());            // menu item数量          final int count = getChildCount();          // menu item尺寸          int childSize;            // menu item测量模式          int childMode = MeasureSpec.EXACTLY;            // 迭代测量：根据孩子的数量进行遍历，为每一个孩子测量大小，设置监听回调。          for (int i = 0; i < count; i++) {              final View child = getChildAt(i);              startAngle = startAngle % 360;              if (startAngle > 269 && startAngle < 271 && isTouchUp) {                  mOnMenuItemClickListener.itemClick(i); //设置监听回调。                  mCurrentPosition = i;  //本次使用mCurrentPosition，只是把他作为一个temp变量，可以有更多的使用，比如动态设置每个孩子相隔的角度                  childSize = DensityUtil.dip2px(getContext(), RADIO_TOP_CHILD_DIMENSION);//设置大小              } else {                  childSize = DensityUtil.dip2px(getContext(), RADIO_DEFAULT_CHILD_DIMENSION);//设置大小              }              if (child.getVisibility() == GONE) {                  continue;              }              // 计算menu item的尺寸；以及和设置好的模式，去对item进行测量              int makeMeasureSpec = -1;                makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize,                      childMode);              child.measure(makeMeasureSpec, makeMeasureSpec);              startAngle += angle;          }  //item容器内边距          mPadding = DensityUtil.dip2px(getContext(), RADIO_MARGIN_LAYOUT);        }</code></pre>    <p>onMeasure深入：View在屏幕上显示出来要先经过measure（计算）和layout（布局）。这方法作用就是计算出自定义View的宽度和高度。这个计算的过程参照父布局给出的大小，以及自己特点算出结果 。当然，还有相关的尺寸测量模式。此处奉上一篇好博文： onMeasure理解 。此外，我还在这方法里作为监听回调的设置！！而为控件设置图片可以直接使用我们下面设计的方法：setMenuItemIconsAndTexts一句收工。</p>    <p>（3）onLayout方法的讲解：（此处的圆的数学计算布置图标围绕圆位置可见鸿洋大大的推荐，讲得很清楚，当然我下面也会略微讲解下）</p>    <pre>  <code class="language-java">/**       * 设置menu item的位置       */      @Override      protected void onLayout(boolean changed, int l, int t, int r, int b) {          int layoutRadius = mRadius;          // Laying out the child views          final int childCount = getChildCount();            int left, top;          // menu item 的尺寸          int cWidth;            // 根据menu item的个数，计算角度          float angleDelay = 360 / 10;          // 遍历去设置menuitem的位置          for (int i = 0; i < childCount; i++) {              final View child = getChildAt(i);                //根据孩子遍历，设置中间顶部那个的大小以及其他图片大小。              if (mStartAngle > 269 && mStartAngle < 271 && isTouchUp) {                  cWidth = DensityUtil.dip2px(getContext(), RADIO_TOP_CHILD_DIMENSION);                  child.setSelected(true);              } else {                  cWidth = DensityUtil.dip2px(getContext(), RADIO_DEFAULT_CHILD_DIMENSION);                  child.setSelected(false);              }                if (child.getVisibility() == GONE) {                  continue;              }               //大于360就取余归于小于360度              mStartAngle = mStartAngle % 360;                float tmp = 0;              //计算图片布置的中心点的圆半径。就是tmp              tmp = layoutRadius / 2f - cWidth / 2 - mPadding;              // tmp cosa 即menu item中心点的横坐标。计算的是item的位置，是计算位置！！！              left = layoutRadius                      / 2                      + (int) Math.round(tmp                      * Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f                      * cWidth) + DensityUtil                      .dip2px(getContext(), 1);              // tmp sina 即menu item的纵坐标              top = layoutRadius                      / 2                      + (int) Math.round(tmp                      * Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f * cWidth) + DensityUtil                      .dip2px(getContext(), 8);           //接着当然是布置孩子的位置啦，就是根据小圆的来布置的              child.layout(left, top, left + cWidth, top + cWidth);                // 叠加尺寸              mStartAngle += angleDelay;          }      }</code></pre>    <h3>给出鸿洋大大的计算小圆的思路图：</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/522359ed43b864f5fe32af2dd22ec886.jpg"></p>    <p style="text-align:center">这里写图片描述</p>    <h3><strong>（4）此控件事件机制dispatchTouchEvent的使用：</strong></h3>    <pre>  <code class="language-java">//dispatchTouchEvent是处理触摸事件分发,事件(多数情况)是从Activity的dispatchTouchEvent开始的。执行super.dispatchTouchEvent(ev)，事件向下分发。      //onTouchEvent是View中提供的方法，ViewGroup也有这个方法，view中不提供onInterceptTouchEvent。view中默认返回true，表示消费了这个事件。      @Override      public boolean dispatchTouchEvent(MotionEvent event) {          float x = event.getX();          float y = event.getY();            getParent().requestDisallowInterceptTouchEvent(true);          switch (event.getAction()) {              case MotionEvent.ACTION_DOWN:              //直接就是获取x，y值了，还有一个DownTime（附送）                  mLastX = x;                  mLastY = y;                  mDownTime = System.currentTimeMillis();                  mTmpAngle = 0;                  break;              case MotionEvent.ACTION_MOVE:                  isTouchUp = false;   //注意isTouchUp 这个标记量！！！                  /**                   * 获得开始的角度                   */                  float start = getAngle(mLastX, mLastY);                  /**                   * 获得当前的角度                   */                  float end = getAngle(x, y);                  // 如果是一、四象限，则直接end-start，角度值都是正值                  if (getQuadrant(x, y) == 1 || getQuadrant(x, y) == 4) {                      mStartAngle += end - start;                      mTmpAngle += end - start;//按下到抬起时旋转的角度                  } else                  // 二、三象限，色角度值是负值                  {                      mStartAngle += start - end;                      mTmpAngle += start - end;                  }                  // 重新布局                  if (mTmpAngle != 0) {                      requestLayout();                  }                    mLastX = x;                  mLastY = y;                    break;              case MotionEvent.ACTION_UP:              //当手指UP啦，就是关键啦，一个缓冲角度，即我们将要固定几个位置，而不是任意位置。我们要设计一个可能的角度去自动帮他选择。                  backOrPre();                  break;          }          return super.dispatchTouchEvent(event);      }</code></pre>    <p>MotionEvent事件机制：（此控件我只用了三个）主要的事件类型有:ACTION_DOWN: 表示用户开始触摸。ACTION_MOVE: 表示用户在移动(手指或者其他)。ACTION_UP:表示用户抬起了手指。</p>    <h3><strong>（5）数学计算---一个缓冲角度。</strong></h3>    <pre>  <code class="language-java">private void backOrPre() {     //缓冲的角度。即我们将要固定几个位置，而不是任意位置。我们要设计一个可能的角度去自动帮他选择。          isTouchUp = true;          float angleDelay = 360 / 10;              //这个是每个图形相隔的角度          //我们本来的上半圆的图片角度应该是：18,54，90,126,162。所以我们这里是：先让当前角度把初始的18度减去再取余每个图形相隔角度。得到的是什么呢？就是一个图片本来应该在的那堆角度。所以如果是就直接return了。          if ((mStartAngle-18)%angleDelay==0){              return;          }          float angle = (float)((mStartAngle-18)%36);                 //angle就是那个不是18度开始布局，然后是36度的整数的多出来的部分角度          //以下就是我们做的缓冲角度处理啦，如果多出来的部分角度大于图片相隔角度的一半就往前进一个，如果小于则往后退一个。          if (angleDelay/2 > angle){              mStartAngle -= angle;          }else if (angleDelay/2<angle){              mStartAngle = mStartAngle - angle + angleDelay;         //mStartAngle就是当前角度啦，取余36度就是多出来的角度，拿这个多出来的角度去数据处理。          }          //然后重新布局onlayout          requestLayout();      }</code></pre>    <h3><strong>至于其他小的方法详情，可见源代码，有详细解释。</strong></h3>    <p>好了，Android-自定义view之圆形与“半圆形”菜单讲完了。本博客是经过仔细研究鸿洋大大的圆形菜单博客的，并在这里做出进一步拓展以及写出自己的理解。</p>    <h3> </h3>    <p> </p>