开源项目学习与分析系列——ArcMenu

时间 2019-11-05

标签开源项目学习分析系列 arcmenu 繁體版

原文原文链接

从如今开始，我将写下因为项目而接触到的优秀的Android开源项目的学习理解。一来有助于本身的提升，方便之后的查阅；二来学习Android须要有开源的精神，和别人分享是很重要的。我如今对Android应用开发的理解还不深，但愿能在这个过程当中，迅速的成长起来。     废话很少说，先展现一下，ArcMenu & RayMenu的效果图： <a href="http://static.oschina.net/uploads/img/201404/03190616_jOqI.png"><img title="preview1" style="border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px; display: inline; border-top-width: 0px" border="0" alt="preview1" src="http://static.oschina.net/uploads/img/201404/03190616_wDnb.png" width="229" height="206" /></a> <a href="http://static.oschina.net/uploads/img/201404/03190616_RAOV.png"><img title="68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f31313336393638372f70726576696577302e706e67" style="border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px; display: inline; border-top-width: 0px" border="0" alt="68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f31313336393638372f70726576696577302e706e67" src="http://static.oschina.net/uploads/img/201404/03190616_p9mK.png" width="244" height="205" /></a> <a href="http://static.oschina.net/uploads/img/201404/03190617_Whoe.png"><img title="raymenu" style="border-left-width: 0px; border-right-width: 0px; border-bottom-width: 0px; display: inline; border-top-width: 0px" border="0" alt="raymenu" src="http://static.oschina.net/uploads/img/201404/03190617_jPpi.png" width="244" height="52" /></a> <h3>RayMenu机制详解：</h3>        其涉及的知识，是ViewGroup的布局与Android动画。因为ArcMenu & RayMenu实质上是同样的，只是ArcMenu布局计算上稍显复复杂一些，故选择其RayMenu做为例子来说，柿子仍是得捡软的捏呀。       RayMenu的用到的几个文件以下：       <a href="https://github.com/daCapricorn/ArcMenu/blob/master/library/src/com/capricorn/RayLayout.java">RayLayout.java</a>——用于控制弹出菜单的动画与布局       <a href="https://github.com/daCapricorn/ArcMenu/blob/master/library/src/com/capricorn/RayMenu.java">RayMenu.java</a>——用于控制控件的逻辑，好比按下红色按钮后，弹出菜单等。       <a href="https://github.com/daCapricorn/ArcMenu/blob/master/library/src/com/capricorn/RotateAndTranslateAnimation.java">RotateAndTranslateAnimation.java</a>——这只是个动画       <a href="https://github.com/daCapricorn/ArcMenu/blob/master/library/res/layout/ray_menu.xml">ray_menu.xml</a>——rayMenu的布局文件               关于它的使用方法，很简单，见<a href="https://github.com/daCapricorn/ArcMenu/blob/master/sample/src/com/capricorn/example/MainActivity.java">MainActivity.java</a>。               下面，我就从咱们使用的流程开始说， <div class="csharpcode"> <pre class="alt"> 1: setContentView(R.layout.main);</pre>css

</div> <style type="text/css">html

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /white-space: pre;/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style>java

android

<h3>实例化：</h3>git

使用setContentView(int)会解析xml生成真正的view类，在这个过程RayMenu被实例化了，咱们看一下实例化过程的初始化的代码。github

<div class="csharpcode"> <pre class="alt"> 1: public class RayMenu extends RelativeLayout {</pre>canvas

<pre><span class="lnum">   2:  </span>    <span class="kwrd">private</span> RayLayout mRayLayout;</pre>

<pre class="alt"><span class="lnum">   3:  </span>&#160;</pre>

<pre><span class="lnum">   4:  </span>    <span class="kwrd">private</span> ImageView mHintView;</pre>

<pre class="alt"><span class="lnum">   5:  </span>&#160;</pre>

<pre><span class="lnum">   6:  </span>    <span class="kwrd">public</span> RayMenu(Context context) {</pre>

<pre class="alt"><span class="lnum">   7:  </span>        super(context);</pre>

<pre><span class="lnum">   8:  </span>        init(context);</pre>

<pre class="alt"><span class="lnum">   9:  </span>    }</pre>

<pre><span class="lnum">  10:  </span>&#160;</pre>

<pre class="alt"><span class="lnum">  11:  </span>    <span class="kwrd">public</span> RayMenu(Context context, AttributeSet attrs) {</pre>

<pre><span class="lnum">  12:  </span>        super(context, attrs);</pre>

<pre class="alt"><span class="lnum">  13:  </span>        init(context);</pre>

<pre><span class="lnum">  14:  </span>    }</pre>

<pre class="alt"><span class="lnum">  15:  </span>&#160;</pre>

<pre><span class="lnum">  16:  </span>    <span class="kwrd">private</span> <span class="kwrd">void</span> init(Context context) {</pre>

<pre class="alt"><span class="lnum">  17:  </span>        setLayoutParams(<span class="kwrd">new</span> LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));</pre>

<pre><span class="lnum">  18:  </span>        setClipChildren(<span class="kwrd">false</span>);</pre>

<pre class="alt"><span class="lnum">  19:  </span>&#160;</pre>

<pre><span class="lnum">  20:  </span>        LayoutInflater li = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);</pre>

<pre class="alt"><span class="lnum">  21:  </span>        li.inflate(R.layout.ray_menu, <span class="kwrd">this</span>);</pre>

<pre><span class="lnum">  22:  </span>&#160;</pre>

<pre class="alt"><span class="lnum">  23:  </span>        mRayLayout = (RayLayout) findViewById(R.id.item_layout);</pre>

<pre><span class="lnum">  24:  </span>&#160;</pre>

<pre class="alt"><span class="lnum">  25:  </span>        final ViewGroup controlLayout = (ViewGroup) findViewById(R.id.control_layout);</pre>

<pre><span class="lnum">  26:  </span>        controlLayout.setClickable(<span class="kwrd">true</span>);</pre>

<pre class="alt"><span class="lnum">  27:  </span>        controlLayout.setOnTouchListener(<span class="kwrd">new</span> OnTouchListener() {</pre>

<pre><span class="lnum">  28:  </span>&#160;</pre>

<pre class="alt"><span class="lnum">  29:  </span>            @Override</pre>

<pre><span class="lnum">  30:  </span>            <span class="kwrd">public</span> boolean onTouch(View v, MotionEvent <span class="kwrd">event</span>) {</pre>

<pre class="alt"><span class="lnum">  31:  </span>                <span class="kwrd">if</span> (<span class="kwrd">event</span>.getAction() == MotionEvent.ACTION_DOWN) {</pre>

<pre><span class="lnum">  32:  </span>                    mHintView.startAnimation(createHintSwitchAnimation(mRayLayout.isExpanded()));</pre>

<pre class="alt"><span class="lnum">  33:  </span>                    mRayLayout.switchState(<span class="kwrd">true</span>);</pre>

<pre><span class="lnum">  34:  </span>                }</pre>

<pre class="alt"><span class="lnum">  35:  </span>&#160;</pre>

<pre><span class="lnum">  36:  </span>                <span class="kwrd">return</span> <span class="kwrd">false</span>;</pre>

<pre class="alt"><span class="lnum">  37:  </span>            }</pre>

<pre><span class="lnum">  38:  </span>        });</pre>

<pre class="alt"><span class="lnum">  39:  </span>&#160;</pre>

<pre><span class="lnum">  40:  </span>        mHintView = (ImageView) findViewById(R.id.control_hint);</pre>

<pre class="alt"><span class="lnum">  41:  </span>    }</pre>

</div> <style type="text/css">app

框架

RayMenu继承于RelativeLayout, 向其余视图类同样，先调用父类的构造函数，而后就是本身的init()，在这里设置本身的高度依赖本身的内容，宽度与父视图同样宽。setClipChildren(false);传递给子控件进行绘制的canvas不剪切，这能够保证，当子控件的动画效果超出自己布局范围时，依然可见。

而后就是将布局文件添加进来，设置红色按钮的监听事件。

将布局文件添加进来时，又发生了子控件的实例化，这里主要讲一下Raylayout类的实例化过程。

<div class="csharpcode"> <pre class="alt"> 1: public class RayLayout extends ViewGroup {</pre>

<pre> 4: * children will be set the same size.</pre>

<pre> 6: private int mChildSize;</pre>

<pre> 8: /* the distance between child Views */</pre>

<pre class="alt"> 9: private int mChildGap;</pre>

<pre class="alt"> 11: /* left space to place the switch button */</pre>

<pre> 12: private int mLeftHolderWidth;</pre>

<pre> 14: private boolean mExpanded = false;</pre>

<pre> 16: public RayLayout(Context context) {</pre>

<pre class="alt"> 17: super(context);</pre>

<pre> 20: public RayLayout(Context context, AttributeSet attrs) {</pre>

<pre class="alt"> 21: super(context, attrs);</pre>

<pre class="alt"> 23: if (attrs != null) {</pre>

<pre> 24: TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.ArcLayout, 0, 0);</pre>

<pre class="alt"> 25: mChildSize = Math.max(a.getDimensionPixelSize(R.styleable.ArcLayout_childSize, 0), 0);</pre>

<pre> 26: a.recycle();</pre>

<pre> 28: a = getContext().obtainStyledAttributes(attrs, R.styleable.RayLayout, 0, 0);</pre>

<pre class="alt"> 29: mLeftHolderWidth = Math.max(a.getDimensionPixelSize(R.styleable.RayLayout_leftHolderWidth, 0), 0);</pre>

<pre> 30: a.recycle();</pre>

</div> <style type="text/css">

这个就更简单了，得到一些xml中的属性，好比重要的mchildSize和mLeftHolderWidth。初始化的工做仍是很简单的，固然activity中的setContent()函数中发生了不少事情，这个之后有机会再讲，可是经过这个过程，咱们就将视图set到了window上了。开始等待着绘制的消息，关于绘制过程的详细过程推荐阅读，<a href="http://blog.csdn.net/qinjuning/article/details/7110211">Android中View绘制流程以及invalidate()等相关方法分析</a>。

<h3>menusure过程：</h3>

RayMenu.onMeasure()会调用RayMenu.Measure()函数，进而执行onMeasure()：

<div class="csharpcode"> <pre class="alt"> 1: private static int computeChildGap(final float width, final int childCount, final int childSize, final int minGap) {</pre>

<pre> 2: return Math.max((int) (width / childCount - childSize), minGap);</pre>

<pre class="alt"> 5: @Override</pre>

<pre> 6: protected int getSuggestedMinimumHeight() {</pre>

<pre class="alt"> 7: return mChildSize;</pre>

<pre> 10: @Override</pre>

<pre class="alt"> 11: protected int getSuggestedMinimumWidth() {</pre>

<pre> 12: return mLeftHolderWidth + mChildSize * getChildCount();</pre>

<pre class="alt"> 15: @Override</pre>

<pre> 16: protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {</pre>

<pre class="alt"> 17: super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(getSuggestedMinimumHeight(), MeasureSpec.EXACTLY));</pre>

<pre class="alt"> 19: final int count = getChildCount();</pre>

<pre> 20: mChildGap = computeChildGap(getMeasuredWidth() - mLeftHolderWidth, count, mChildSize, 0);</pre>

<pre class="alt"> 23: getChildAt(i).measure(MeasureSpec.makeMeasureSpec(mChildSize, MeasureSpec.EXACTLY),</pre>

<pre> 24: MeasureSpec.makeMeasureSpec(mChildSize, MeasureSpec.EXACTLY));</pre>

</div> <style type="text/css">

1. 调用View.onMeasure()，这一步会肯定控件的宽度与父视图同样宽，由于RayMenu设置的宽度fill_parent,且RayLayout设置的也是fill_parent，致使这里measure的宽度为屏幕宽度，高度为getSuggestionMinimumHeight()，即mChildSize的高度。

2. 肯定menu item之间的距离mChildGap

3. measure了menu item的大小，显然其高宽为mChildSize。

<h3>Layout过程：</h3>

过程与measure相似。

<div class="csharpcode"> <pre class="alt"> 1: private static Rect computeChildFrame(final boolean expanded, final int paddingLeft, final int childIndex,</pre>

<pre> 2: final int gap, final int size) {</pre>

<pre class="alt"> 3: final int left = expanded ? (paddingLeft + childIndex * (gap + size) + gap) : ((paddingLeft - size) / 2);</pre>

<pre class="alt"> 5: return new Rect(left, 0, left + size, size);</pre>

<pre> 8: @Override</pre>

<pre class="alt"> 9: protected void onLayout(boolean changed, int l, int t, int r, int b) {</pre>

<pre> 10: final int paddingLeft = mLeftHolderWidth;</pre>

<pre class="alt"> 11: final int childCount = getChildCount();</pre>

<pre> 14: Rect frame = computeChildFrame(mExpanded, paddingLeft, i, mChildGap, mChildSize);</pre>

<pre class="alt"> 15: getChildAt(i).layout(frame.left, frame.top, frame.right, frame.bottom);</pre>

</div> <style type="text/css">

这个过程直接影响着menu item的布局,能够看到当expand时会呈直线排列，不然，则其中心与红色按钮的中心的x值同样。

<h3>Draw过程：</h3>

调用父类的函数完成。这里再也不赘述。

再回到使用RayMenu的步骤上来，而后就是添加Menu Item和监听事件：

<div class="csharpcode"> <pre class="alt"> 1: private static final int[] ITEM_DRAWABLES = { R.drawable.composer_camera, R.drawable.composer_music,</pre>

<pre> 2: R.drawable.composer_place, R.drawable.composer_sleep, R.drawable.composer_thought, R.drawable.composer_with };</pre>

<pre> 4: final int itemCount = ITEM_DRAWABLES.length;</pre>

<pre> 6: ImageView item = new ImageView(this);</pre>

<pre class="alt"> 7: item.setImageResource(ITEM_DRAWABLES[i]);</pre>

<pre class="alt"> 9: final int position = i;</pre>

<pre> 10: rayMenu.addItem(item, new OnClickListener() {</pre>

<pre> 12: @Override</pre>

<pre class="alt"> 13: public void onClick(View v) {</pre>

<pre> 14: Toast.makeText(MainActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();</pre>

</div> <style type="text/css">

完成这些后，就等待着RayMenu的在屏幕上出现了，你会看到一个红色的button，但为何是红色的button而不是menu Item中的一个，显然这个时候Menu Item与红色Button应该重合，这涉及到view Z-order,由于在<a href="https://github.com/daCapricorn/ArcMenu/blob/master/library/res/layout/ray_menu.xml">ray_menu.xml</a>中controlLayout出如今rayLayout以后，在绘制的时候，若二者有重叠，则后添加进来的view会出如今上面。

当咱们点击红色Button后，而后便进行了消息事件的传递(<a href="http://blog.csdn.net/singwhatiwanna/article/details/17339857">Android源码分析-点击事件派发机制</a>), 这后便调用了

<div class="csharpcode"> <pre class="alt"> 1: controlLayout.setOnTouchListener(new OnTouchListener() {</pre>

<pre class="alt"> 3: @Override</pre>

<pre> 4: public boolean onTouch(View v, MotionEvent event) {</pre>

<pre class="alt"> 5: if (event.getAction() == MotionEvent.ACTION_DOWN) {</pre>

<pre> 6: mHintView.startAnimation(createHintSwitchAnimation(mRayLayout.isExpanded()));</pre>

<pre class="alt"> 7: mRayLayout.switchState(true);</pre>

<pre> 10: return false;</pre>

</div> <style type="text/css">

这里我比较费解的是为甚要使用OntouchListener，就代码而言，应该是想不占用其余监听名额。不过这致使手指一按下就会弹出菜单。咱们继续往下进入mRayLayout.switchState(true)的代码。

<pre> 2: * switch between expansion and shrinkage</pre>

<pre> 4: * @param showAnimation</pre>

<pre> 6: public void switchState(final boolean showAnimation) {</pre>

<pre class="alt"> 7: if (showAnimation) {</pre>

<pre> 8: final int childCount = getChildCount();</pre>

<pre> 10: bindChildAnimation(getChildAt(i), i, 300);</pre>

<pre> 14: mExpanded = !mExpanded;</pre>

<pre> 16: if (!showAnimation) {</pre>

<pre class="alt"> 17: requestLayout();</pre>

<pre> 20: invalidate();</pre>

</div> <style type="text/css">

<div class="csharpcode"> <pre class="alt"> 1: private void onAllAnimationsEnd() {</pre>

<pre> 2: final int childCount = getChildCount();</pre>

<pre> 4: getChildAt(i).clearAnimation();</pre>

<pre class="alt"> 7: requestLayout();</pre>

</div> <style type="text/css">

给子类添加动画，什么动画呢？就是弹出和旋转动画。而后expand的值变化了，再而后重绘，这样一样会使得动画启动(<a href="http://www.ibm.com/developerworks/cn/opensource/os-cn-android-anmt1/index.html?ca=dat">Android 动画框架详解，第 1 部分</a> )，但不会致使从新layout，等到动画都结束后，会调用onAllAnimationsEnd，会调用requestlayout，这样会引发从新布局，便回到了前面讲到的onLayout函数。当menu打开了，咱们点击了一下item则会调用item的监听函数。

<div class="csharpcode"> <pre class="alt"> 1: private OnClickListener getItemClickListener(final OnClickListener listener) {</pre>

<pre> 2: return new OnClickListener() {</pre>

<pre> 4: @Override</pre>

<pre class="alt"> 5: public void onClick(final View viewClicked) {</pre>

<pre> 6: Animation animation = bindItemAnimation(viewClicked, true, 400);</pre>

<pre class="alt"> 7: animation.setAnimationListener(new AnimationListener() {</pre>

<pre class="alt"> 9: @Override</pre>

<pre> 10: public void onAnimationStart(Animation animation) {</pre>

<pre> 14: @Override</pre>

<pre class="alt"> 15: public void onAnimationRepeat(Animation animation) {</pre>

<pre class="alt"> 19: @Override</pre>

<pre> 20: public void onAnimationEnd(Animation animation) {</pre>

<pre class="alt"> 21: postDelayed(new Runnable() {</pre>

<pre class="alt"> 23: @Override</pre>

<pre> 24: public void run() {</pre>

<pre class="alt"> 25: itemDidDisappear();</pre>

<pre class="alt"> 31: final int itemCount = mRayLayout.getChildCount();</pre>

<pre class="alt"> 33: View item = mRayLayout.getChildAt(i);</pre>

<pre> 34: if (viewClicked != item) {</pre>

<pre class="alt"> 35: bindItemAnimation(item, false, 300);</pre>

<pre class="alt"> 39: mRayLayout.invalidate();</pre>

<pre> 40: mHintView.startAnimation(createHintSwitchAnimation(true));</pre>

<pre> 42: if (listener != null) {</pre>

<pre class="alt"> 43: listener.onClick(viewClicked);</pre>

</div>

和上一个同样，添加动画，被点击的item和其余item会被添加不一样的动画，当动画结束后便会调用itemDIdDisappear()：

<div class="csharpcode"> <pre class="alt"> 1: private void itemDidDisappear() {</pre>

<pre> 2: final int itemCount = mRayLayout.getChildCount();</pre>

<pre> 4: View item = mRayLayout.getChildAt(i);</pre>

<pre class="alt"> 5: item.clearAnimation();</pre>

<pre> 8: mRayLayout.switchState(false);</pre>

</div>

还记得以前讲的setClipChildren(false); 被点击的item有一个放大的动画，若不设置这个属性，则致使放大效果的上下部分都看不到。这涉及到canvas的剪裁，默认的父控件在调用子控件的draw函数时会，剪裁canvas是其尺寸为分配给子控件的大小。你不妨将menu Item的大小和红色Button的大小设成同样。就会发现会有一些问题。

<blockquote> <h2 align="center">RayMenu的改进：</h2> </blockquote>

<h3>可以让其放在两侧：</h3>

RayMenu只能从左向右弹出，有时候不能适应屏幕布局。

固然实现的方式有不少种，可是都要解决两个问题，1. controlLayout的位置  2. 根据controlLayout的位置变换item的布局和动画

这里讲一个最简单的，也是最粗暴的。由于Item动画的设置，是根据子Item的布局位置来的。因此控制好Item布局就可以知足第2点。至于第1点，不能在xml中设置，由于使用的merge，将会被RelativeLayout替换掉，android:layout_gravity不会有什么做用。

RayMenu.java

<div class="csharpcode"> <pre class="alt"> 1: public void setHolderSide(boolean right) {</pre>

<pre> 2: mRayLayout.setHolderSide(right);</pre>

<pre class="alt"> 3: LayoutParams lp = (LayoutParams) findViewById(R.id.control_layout).getLayoutParams();</pre>

<pre> 4: if (right) {</pre>

<pre class="alt"> 5: lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT, 0);</pre>

<pre> 6: lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);</pre>

<pre> 8: lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);</pre>

<pre class="alt"> 9: lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 0);</pre>

</div> <style type="text/css">

RayLayout.java

<div class="csharpcode"> <pre class="alt"> 1: private boolean mHolderSide = false;</pre>

<pre class="alt"> 3: public void setHolderSide(boolean right) {</pre>

<pre> 4: mHolderSide = right;</pre>

<pre class="alt"> 7: private Rect computeChildFrame(final boolean expanded, final int paddingLeft, final int childIndex,</pre>

<pre> 8: final int gap, final int size) {</pre>

<pre class="alt"> 9: int left = expanded ? (paddingLeft + childIndex * (gap + size) + gap) : ((paddingLeft - size) / 2);</pre>

<pre> 10: if (mHolderSide) {</pre>

<pre class="alt"> 11: left = getMeasuredWidth() - (left + size);</pre>

<pre class="alt"> 13: return new Rect(left, 0, left + size, size);</pre>

</div> <style type="text/css">

在你使用的java文件中添加

<div class="csharpcode"> <pre class="alt"> 1: rayMenu.setHolderSide(true);</pre> </div> <style type="text/css">

<h3>当Item很大时，1.关闭RayMenu后，红色Button不能挡住item  2.item被点击时，出现的放大效果时上下部分会被截断。</h3>

咱们不是设置了RayMenu的setClipChildren(false);吗？为甚还会出现这种状况，由于这个设置只对RayMenu内部的canvas传递有效，RayMenu设置的高度为LayoutParams.WRAP_CONTENT，因此最大也就是Max（红色button的高度，item的size），当item动画的高度超过RayMenu的高度时就会出现这种状况。

针对第1个问题，有两种解决办法：1.当关闭Raymenu后会有从新布局的机会，这个时候能够控制其布局，这个不推荐，由于布局还涉及到动画等等一些问题。

2. 当关闭Raymenu后，简单粗暴的将rayLayout设置为invisible就能够了，在这里要注意的设置为invisible和gone会对动画产生很大的不一样（我并不清楚具体缘由，不过在viewGroup的drawchild()函数中应该能找到缘由）。

RayLayout.java

<div class="csharpcode"> <pre class="alt"> 1: public void switchState(final boolean showAnimation) {</pre>

<pre> 2: if (showAnimation) {</pre>

<pre class="alt"> 3: final int childCount = getChildCount();</pre>

<pre class="alt"> 5: bindChildAnimation(getChildAt(i), i, 300);</pre>

<pre class="alt"> 9: mExpanded = !mExpanded;</pre>

<pre class="alt"> 11: if (!showAnimation) {</pre>

<pre> 12: if (!mExpanded) {</pre>

<pre class="alt"> 13: setVisibility(GONE);</pre>

<pre class="alt"> 15: requestLayout();</pre>

<pre> 18: invalidate();</pre>

<pre class="alt"> 21: private void onAllAnimationsEnd() {</pre>

<pre> 22: final int childCount = getChildCount();</pre>

<pre> 24: getChildAt(i).clearAnimation();</pre>

<pre class="alt"> 27: if (!mExpanded) {</pre>

<pre> 28: setVisibility(INVISIBLE);</pre>

<pre> 30: requestLayout();</pre>

</div> <style type="text/css">

RayMenu.java

<div class="csharpcode"> <pre class="alt"> 1: controlLayout.setOnTouchListener(new OnTouchListener() {</pre>

<pre class="alt"> 3: @Override</pre>

<pre> 4: public boolean onTouch(View v, MotionEvent event) {</pre>

<pre class="alt"> 5: if (event.getAction() == MotionEvent.ACTION_DOWN) {</pre>

<pre> 6: mHintView.startAnimation(createHintSwitchAnimation(mRayLayout.isExpanded()));</pre>

<pre class="alt"> 7: if (!mRayLayout.isExpanded()) {</pre>

<pre> 8: mRayLayout.setVisibility(VISIBLE);</pre>

<pre> 10: mRayLayout.switchState(true);</pre>

<pre class="alt"> 13: return false;</pre>

</div> <style type="text/css">

针对第2个问题，有两种解决办法：1. 将RayMenu的父控件也一样设置为setClipChildren(false); 2. 因为放大动画是发大2倍。

RayLayout.java

<div class="csharpcode"> <pre class="alt"> 1: private Rect computeChildFrame(final boolean expanded, final int paddingLeft, final int childIndex,</pre>

<pre> 2: final int gap, final int size) {</pre>

<pre class="alt"> 3: int left = expanded ? (paddingLeft + childIndex * (gap + size) + gap) : ((paddingLeft - size) / 2);</pre>

<pre> 4: if (mHolderSide) {</pre>

<pre class="alt"> 5: left = getMeasuredWidth() - (left + size);</pre>

<pre class="alt"> 7: int top = (getSuggestedMinimumHeight()-size)/2;</pre>

<pre> 8: return new Rect(left, top, left + size, top+size);</pre>

<pre class="alt"> 11: @Override</pre>

<pre> 12: protected int getSuggestedMinimumHeight() {</pre>

<pre class="alt"> 13: return mChildSize * 2;</pre>

</div>

第1种解决办法更好一些。

还有另一些变态要求，好比当RayMenu关闭后，可以随便移动，便可以拖拽红色Button。而且还要知足前面的要求。

我写了一个例子，这里就不详细讲了。放一个链接<a title="http://pan.baidu.com/share/link?shareid=1437532240&uk=405092275" href="http://pan.baidu.com/share/link?shareid=1437532240&uk=405092275">http://pan.baidu.com/share/link?shareid=1437532240&uk=405092275</a>。