android(6) 扇形菜单实现

一.扇形菜单的实现:

    借鉴了大神们的源码,那我们来看一下扇形菜单是怎么实现的:

效果图:

技术分享    

技术分享 

技术分享


主界面布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@drawable/background">
    
    <!-- 
    android:clipChildren的意思:是否限制子View在其范围内
    android:clipToPadding就是说控件的绘制区域是否在padding里面的
     -->
    <RelativeLayout
        android:id="@+id/buttons_wrapper_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:clipChildren="false"
        android:clipToPadding="false" >

        <ImageButton
            android:id="@+id/button_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="142dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/path2_composer_camera"
            android:visibility="gone" />

        <ImageButton
            android:id="@+id/button_people"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="135dp"
            android:layout_marginRight="52dp"
            android:background="@drawable/path2_composer_with"
            android:visibility="gone" />

        <ImageButton
            android:id="@+id/button_place"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="116dp"
            android:layout_marginRight="89dp"
            android:background="@drawable/path2_composer_place"
            android:visibility="gone" />

        <ImageButton
            android:id="@+id/button_music"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="87dp"
            android:layout_marginRight="118dp"
            android:background="@drawable/path2_composer_music"
            android:visibility="gone" />

        <ImageButton
            android:id="@+id/button_thought"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="50dp"
            android:layout_marginRight="137dp"
            android:background="@drawable/path2_composer_thought"
            android:visibility="gone" />

        <ImageButton
            android:id="@+id/button_sleep"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="144dp"
            android:background="@drawable/path2_composer_sleep"
            android:visibility="gone" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/buttons_show_hide_button_layout"
        android:layout_width="60dp"
        android:layout_height="57dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/path2_composer_button" >

        <ImageView
            android:id="@+id/buttons_show_hide_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/path2_composer_icn_plus" />
    </RelativeLayout>
</RelativeLayout>

Activity:

public class MainActivity extends Activity {

	private boolean isShowing;
	private RelativeLayout buttons_wrapper_layout;
	private ImageView buttons_show_hide_button;
	private RelativeLayout buttons_show_hide_button_layout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sector_menu);
        
		MyAnimations.initOffset(MainActivity.this);
		
		buttons_wrapper_layout = (RelativeLayout) findViewById(R.id.buttons_wrapper_layout);
		buttons_show_hide_button_layout = (RelativeLayout) findViewById(R.id.buttons_show_hide_button_layout);
		buttons_show_hide_button = (ImageView) findViewById(R.id.buttons_show_hide_button);

		buttons_show_hide_button_layout.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (!isShowing) {
					MyAnimations.startAnimationsIn(buttons_wrapper_layout, 300);
					buttons_show_hide_button
							.startAnimation(MyAnimations.getRotateAnimation(0,
									-270, 300));
				} else {
					MyAnimations
							.startAnimationsOut(buttons_wrapper_layout, 300);
					buttons_show_hide_button
							.startAnimation(MyAnimations.getRotateAnimation(
									-270, 0, 300));
				}
				isShowing = !isShowing;
			}
		});
		for (int i = 0; i < buttons_wrapper_layout.getChildCount(); i++) {
			buttons_wrapper_layout.getChildAt(i).setOnClickListener(new OnClickImageButton());
		}

    }
     
    
    class OnClickImageButton implements View.OnClickListener{

		@Override
		public void onClick(View arg0) {
			switch(arg0.getId()){
			case R.id.button_photo:
				Toast.makeText(MainActivity.this, "photo", Toast.LENGTH_SHORT).show();
				break;
			case R.id.button_people:
				Toast.makeText(MainActivity.this, "people", Toast.LENGTH_SHORT).show();
				break;
			case R.id.button_place:
				Toast.makeText(MainActivity.this, "place", Toast.LENGTH_SHORT).show();
				break;
			case R.id.button_music:
				Toast.makeText(MainActivity.this, "music", Toast.LENGTH_SHORT).show();
				break;
			case R.id.button_thought:
				Toast.makeText(MainActivity.this, "thought", Toast.LENGTH_SHORT).show();
				break;
			case R.id.button_sleep:
				Toast.makeText(MainActivity.this, "sleep", Toast.LENGTH_SHORT).show();
				break;
			}
		}
    	
    }

}


动画实现:

public class MyAnimations {

	private static int xOffset = 15;
	private static int yOffset = -13;

	public static void initOffset(Context context) {
		//获取屏幕的密度 context.getResources().getDisplayMetrics().density 设置移动的距离
		xOffset = (int) (10 * context.getResources().getDisplayMetrics().density);
		yOffset = -(int) (8 * context.getResources().getDisplayMetrics().density);
	}

	public static Animation getRotateAnimation(float fromDegrees,
			float toDegrees, int durationMillis) {
		//旋转,前两个参数设置旋转角度,后四个设置旋转中心
		RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				0.5f);
		//持续时间
		rotate.setDuration(durationMillis);
		//动画结束后,停留在最后一秒
		rotate.setFillAfter(true);
		return rotate;
	}

	public static void startAnimationsIn(ViewGroup viewgroup, int durationMillis) {
		for (int i = 0; i < viewgroup.getChildCount(); i++) {
			ImageButton inoutimagebutton = (ImageButton) viewgroup
					.getChildAt(i);
			//显示图片
			inoutimagebutton.setVisibility(View.VISIBLE);
			
			MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton
					.getLayoutParams();
			//位移距离
			Animation animation = new TranslateAnimation(mlp.rightMargin
					- xOffset, 0F, yOffset + mlp.bottomMargin, 0F);
            //动画结束后,停留在最后一帧
			animation.setFillAfter(true);
			//动画持续时间
			animation.setDuration(durationMillis);
			//启动时间
			animation.setStartOffset((i * 100)
					/ (-1 + viewgroup.getChildCount()));
			animation.setInterpolator(new OvershootInterpolator(2F));
			//加入动画
			inoutimagebutton.startAnimation(animation);

		}
	}

	public static void startAnimationsOut(ViewGroup viewgroup,
			int durationMillis) {
		for (int i = 0; i < viewgroup.getChildCount(); i++) {
			final ImageButton inoutimagebutton = (ImageButton) viewgroup
					.getChildAt(i);
			MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton
					.getLayoutParams();
			Animation animation = new TranslateAnimation(0F, mlp.rightMargin
					- xOffset, 0F, yOffset + mlp.bottomMargin);
           
			animation.setFillAfter(true);
			animation.setDuration(durationMillis);
			animation.setStartOffset(((viewgroup.getChildCount() - i) * 100)
					/ (-1 + viewgroup.getChildCount()));
			animation.setInterpolator(new AnticipateInterpolator(2F));
			//设置动画监听
			animation.setAnimationListener(new Animation.AnimationListener() {
				@Override
				public void onAnimationStart(Animation arg0) {
				}

				@Override
				public void onAnimationRepeat(Animation arg0) {
				}
                //动画结束后,隐藏imageButton
				@Override
				public void onAnimationEnd(Animation arg0) {
					inoutimagebutton.setVisibility(View.GONE);
				}
			});
			inoutimagebutton.startAnimation(animation);
		}

	}

}

这就是全部的实现了。









郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。