開源項目學習與分析系列——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>。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。