編輯:關於Android編程
衛星菜單可能網上已經有很多博文了,but,這裡僅記錄下自己的學習路程~剛看到自定義衛星菜單的時候真的是一臉懵逼,看完所有的源碼覺得還可以接受,自己寫難度較大,功力太薄嗚嗚。這個還是學習蠻不錯的實例,涉及到動畫,自定義的ViewGroup,接口,如何全面的考慮問題等等,最重要的是 思想!
一:自定義的ViewGroup
自定義屬性
a.編寫attrs.xml
b.在布局文件中使用
c.在自定義控件中獲取屬性
對子view的測量 onMeasure()
確定子view的位置 onLayout() 設置主按鈕的旋轉動畫1.屬性文件 res->value->attrs.xml
<’declare-styleable name=”NAME”>
<’attr name=”” format=”string/dimension/color/reference”/>
………
<’/declare-styleable>
2.在構造方法中用代碼來獲取在attr.xml文件中自定義的那些屬性
TypeArray ta=context.obtainStyledAttributes(attrs,R.Styleable.NAME);
3.通過ta.getColor(),getString()…來獲取這些定義的屬性值
4.ta.recycle()
獲取玩所以得屬性值後,一般調用recycle方法來避免重新創建的時候的錯誤
a、attrs.xml
新建一個menu_right_bottom_layout.xml
就是一個主按鈕和幾個菜單按鈕
你可以在這裡自定義半徑的大小,子菜單的個數,菜單的位置(上下左右)
b、在主布局文件中調用
接下來是最重要的自定義view文件ArcMenu.java
首先要定義一些變量,比如菜單的半徑,位置(上下左右),控制菜單打開關閉的主按鈕,菜單當前的狀態等
/** * 菜單的位置 */ private Position mposition =Position.RIGHT_BOTTOM; private static final int LEFT_TOP=0; private static final int LEFT_BOTTOM=1; private static final int RIGHT_TOP=2; private static final int RIGHT_BOTOM=3; /** * 菜單的半徑 */ private int mRadius; /** * 菜單的中心按鈕 */ private View mCenterBtn; /** * 菜單的當前狀態 */ private Status mCurrentStatus=Status.CLOSE; private OnMenuItemClickListener menuItemClickListener; /** * 菜單的位置的枚舉類型 */ private enum Position{ LEFT_TOP,LEFT_BOTTOM,RIGHT_TOP,RIGHT_BOTTOM }; /** * 菜單的狀態 */ private enum Status{ OPEN,CLOSE }; public interface OnMenuItemClickListener{ void onClick(View view,int pos); } public void setOnMenuItemClickListener(OnMenuItemClickListener menuItemClickListener) { this.menuItemClickListener = menuItemClickListener; }
這裡還寫了一個子菜單點擊的回調接口,在主活動中可以通過回調實現它的具體點擊內容。
接口的一般寫法,只要改名稱和方法即可:
1、寫一個接口類
public interface onMenuItemClickListener(名稱){ void onFinish(方法名)([參數]); ….;(多個方法) }
2、實例一個接口
private onMenuItemClickListener mListener;
3、寫set方法
public void setOnMenuItemClickListener(onMenuItemClickListener listener ){ this.mListener = listener; }
4、在活動中實現接口回調
targetView.setOnMenuItemClickListener(new onMenuItemClickListener(名稱){ void onFinish(方法名)([參數]){ //具體實現.. }; ….(多個方法) });
c、然後在它的構造方法中對自定義控件進行讀取
public ArcMenu(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); /* 半徑默認值 100dp,TypedValue.applyDimension() 是轉變尺寸的函數,這裡COMPLEX_UNIT_DIP是單位,20是 數值,也就是20dp。 */ mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,100,getResources().getDisplayMetrics()); //獲取自定義屬性的值 TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.ArcMenu); mRadius = (int) ta.getDimension(R.styleable.ArcMenu_radius, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,100,getResources().getDisplayMetrics())); //這裡要考慮主按鈕的位置,根據布局文件傳過來我們設置的位置,在這裡賦 給mposion int pos = ta.getInt(R.styleable.ArcMenu_position,RIGHT_BOTOM); switch (pos){ case LEFT_TOP: mposition = Position.LEFT_TOP; break; case LEFT_BOTTOM: mposition = Position.LEFT_BOTTOM; break; case RIGHT_TOP: mposition = Position.RIGHT_TOP; break; case RIGHT_BOTOM: mposition = Position.RIGHT_BOTTOM; break; } Log.e("TAG","position="+mposition+",radius="+mRadius); ta.recycle(); }
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int count = getChildCount(); for (int i = 0; i <'count; i++) { //測量child measureChild(getChildAt(i),widthMeasureSpec,heightMeasureSpec); } }
有時候,當ViewGroup的寬和高是wrap_content的情況下,控件的寬和高要根據子view的寬和高去決定,要在onMeasure方法下做一些其他的操作,比如說遍歷它的子view,獲取它們的寬和高等,最後setMeasureDimension得到它最終的寬和高。這裡由於控件都是全屏的(match_parent),不用根據子view去獲得它的寬和高。
a、首先要確定主按鈕的位置
/** * 確定主按鈕的位置 */ private void layoutCenterBtn() { mCenterBtn = getChildAt(0);//獲取主按鈕 mCenterBtn.setOnClickListener(this);//為其注冊點擊事件 int l=0; int t=0; int width = mCenterBtn.getMeasuredWidth(); int height = mCenterBtn.getMeasuredHeight(); switch (mposition){ case LEFT_TOP: l = 0; t = 0; break; case LEFT_BOTTOM: l = 0; t = getMeasuredHeight()-height;//屏幕的高度-按鈕的高度 break; case RIGHT_TOP: l = getMeasuredWidth()-width; t = 0; break; case RIGHT_BOTTOM: l = getMeasuredWidth()-width; t = getMeasuredHeight()-height; break; } mCenterBtn.layout(l,t,l+width,t+height); }
這裡也是要考慮主按鈕在上下左右四種情況。
b、為主按鈕添加動畫
/** *主按鈕旋轉 */ private void rotateCenterBtn(View v, float start, float end, int duration) { //使按鈕繞自身中心旋轉360度 RotateAnimation anim = new RotateAnimation(start,end, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF,0.5f); anim.setDuration(duration); anim.setFillAfter(true);//保持改變後的狀態 v.startAnimation(anim); }
c、確定子菜單的位置
//菜單的left、top int cl = (int) (mRadius* Math.sin(Math.PI/2/(count-2)*i)); int ct = (int) (mRadius*Math.cos(Math.PI/2/(count-2)*i)); //獲取菜單按鈕的寬度和高度 int cWidth = child.getMeasuredWidth(); int cHeight = child.getMeasuredHeight(); //如果菜單在底部 if (mposition == Position.LEFT_BOTTOM||mposition == Position.RIGHT_BOTTOM){ ct = getMeasuredHeight()-cHeight-ct; } //如果菜單在右邊 if (mposition == Position.RIGHT_TOP||mposition == Position.RIGHT_BOTTOM){ cl = getMeasuredWidth()-cWidth -cl; } child.layout(cl,ct,cl+cWidth,ct+cHeight); } }
這裡的難點是確定子菜單的left和top的位置。以左上角為例,如果有四個子菜單,那麼a=90/(菜單數-1);
menu i 的坐標為:radius*sin(i*a),radius*cos(i*a)
d、切換菜單
主按鈕和子菜單的位置都確定了,接下來就是菜單的打開和關閉了。
/** * 切換菜單 */ public void toggleMenu(int duration) { // 為menuItem添加平移動畫和旋轉動畫 int count = getChildCount(); for (int i = 0; i < count - 1; i++) { final View childView = getChildAt(i + 1);//1 ~ count個子菜單 childView.setVisibility(View.VISIBLE); // end 0 , 0 // start int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i)); int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i)); //當主按鈕在不同位置時,菜單平移的增量可能為正,可能為負,這裡要進行判斷 int xflag = 1; int yflag = 1; if (mposition == Position.LEFT_TOP || mposition == Position.LEFT_BOTTOM) { xflag = -1; } if (mposition == Position.LEFT_TOP || mposition == Position.RIGHT_TOP) { yflag = -1; } AnimationSet animset = new AnimationSet(true); Animation tranAnim = null; // to open //子菜單的位置為0,0 ,只是設置為不可見,所以打開菜單時,是從四個角落裡移動到原來的位置 //如果是菜單的狀態是關閉的,就讓它打開 if (mCurrentStatus == Status.CLOSE) { tranAnim = new TranslateAnimation(xflag * cl, 0, yflag * ct, 0); childView.setClickable(true); childView.setFocusable(true); } else // to close { tranAnim = new TranslateAnimation(0, xflag * cl, 0, yflag * ct); childView.setClickable(false); childView.setFocusable(false); } tranAnim.setFillAfter(true); tranAnim.setDuration(duration); tranAnim.setStartOffset((i * 100) / count);//設置出場的偏移量,讓所有的子菜單在很短的時間內有序彈出來 tranAnim.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { if (mCurrentStatus == Status.CLOSE) { childView.setVisibility(View.GONE); } } }); // 旋轉動畫 RotateAnimation rotateAnim = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotateAnim.setDuration(duration); rotateAnim.setFillAfter(true); animset.addAnimation(rotateAnim); animset.addAnimation(tranAnim); childView.startAnimation(animset); final int pos = i + 1; childView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (menuItemClickListener != null) menuItemClickListener.onClick(childView, pos);//在主活動中會重寫這個方法 menuItemAnim(pos - 1);//為菜單添加動畫 changeStatus();//這裡若是點擊了某個菜單項,要改變菜單的狀態,如果狀態是打開的要將其關閉。 } }); } // 切換菜單狀態 changeStatus(); }
把切換菜單的源碼附上:
/** * 切換菜單狀態 */ private void changeStatus() { mCurrentStatus = (mCurrentStatus == Status.CLOSE?Status.OPEN:Status.CLOSE); }
e、剩下的就是菜單的動畫,被點擊的菜單變大,透明度降低,其他菜單變小,透明度降低,比較容易理解。主要掌握AnimationSet和視圖動畫的巧妙運用。
/** * 添加menuItem的點擊動畫 */ private void menuItemAnim(int pos) { for (int i = 0; i < getChildCount() - 1; i++) { View childView = getChildAt(i + 1); if (i == pos) { childView.startAnimation(scaleBigAnim(300)); } else { childView.startAnimation(scaleSmallAnim(300)); } childView.setClickable(false); childView.setFocusable(false); } } private Animation scaleSmallAnim(int duration) { AnimationSet animationSet = new AnimationSet(true); ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f); animationSet.addAnimation(scaleAnim); animationSet.addAnimation(alphaAnim); animationSet.setDuration(duration); animationSet.setFillAfter(true); return animationSet; } /** * 為當前點擊的Item設置變大和透明度降低的動畫 * * @param duration * @return */ private Animation scaleBigAnim(int duration) { AnimationSet animationSet = new AnimationSet(true); ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); AlphaAnimation alphaAnim = new AlphaAnimation(1f, 0.0f); animationSet.addAnimation(scaleAnim); animationSet.addAnimation(alphaAnim); animationSet.setDuration(duration); animationSet.setFillAfter(true); return animationSet; }
f、最後只剩下在活動中測試了,咳。
public class MainActivity extends AppCompatActivity { private ArcMenu arcmenu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); arcmenu = (ArcMenu) findViewById(R.id.arcmenu); arcmenu.setOnMenuItemClickListener(new ArcMenu.OnMenuItemClickListener() { @Override public void onClick(View view, int pos) { Toast.makeText(MainActivity.this,pos+":"+view.getTag(),Toast.LENGTH_SHORT).show(); } }); } }
你可以在主布局文件中添加其他的view,比如listview。
最後,來兩張截圖:
你的AndroidStudio編譯時是否很卡?你的Gradle編譯時是否很慢,運行一次要等10分鐘?如果你還沒有遇到,那可能說明你的電腦配置夠好,或者項目還不夠大。尤其像
一般而言在Android上使用JAVA實現彩圖轉換為灰度圖,與J2ME上的實現方法類似,不過遇到頻繁地轉換或者是大圖轉換時,就必須使用NDK來提高速度了。本文主要通過JA
在前面的博客中,小編介紹了Android的極光推送以及如何實現登錄的一個小demo,對於xml布局頁面,擺控件這塊的內容,小編還不是很熟練,今天小編主要簡單總結一下在An
1.場景還原之FliddlerFiddler是一款抓包神器,近日,由於項目中要嵌入H5頁面,公司又沒專門的UI設計師,所以你懂得,這個任務就要給我喽!可憐的我並沒有藝術細