Android自定义控件--仿 path 效果 ArcMenu
效果:
概述
Path2.0的扇形菜单,相关开源库：ArcMenu@[Github]相关blog：Android 自定义ViewGroup手把手教你实现ArcMenu
ArcMenu
其原理主要就是通过自定义ViewGroup配合动画来实现的,
使用起来也非常简单
<com.capricorn.ArcMenu
android:id="@+id/arc_menu_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
arc:fromDegrees="@dimen/menuFromDegrees"
arc:toDegrees="@dimen/menuToDegrees"
arc:childSize="@dimen/menuChildSize"/>private static final int[] ITEM_DRAWABLES = { R.drawable.composer_camera, R.drawable.composer_music,
R.drawable.composer_place, R.drawable.composer_sleep, R.drawable.composer_thought, R.drawable.composer_with };
private void initArcMenu(ArcMenu menu, int[] itemDrawables) {
final int itemCount = itemDrawables.length;
for (int i = 0; i < itemCount; i++) {
ImageView item = new ImageView(this);
item.setImageResource(itemDrawables[i]);
final int position = i;
menu.addItem(item, new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();
}
});
}
}这里需要注意的是它有三个属性
custom:childSize="50px"
custom:fromDegrees="0.0"
custom:toDegrees="300.0"一般如果想要实现Path 效果,是将其按钮 添加到CENTER_BOTTOM的,那么该怎么设置才能达到这种效果呢,
通过源码,我们知道ArcMenu是一个正方形的布局,我们需要设置相关margin 及 fromDegrees 和 toDegrees 即可
hongyang blog
这款扇形菜单实现的也是非常的好,提供半径 radius 设置和 位置 position设置
主要设计思路详见源blog
使用过程中也遇到一些问题，主要做了如下加强
- 新增底部居中位置控制 CENTER_BOTTOM。
- 背景根据状态改变监听 statusListener。
- 点击外部关闭 outsideClosable。
添加 CENTER_BOTTOM,MARGIN支持
<declare-styleable name="ArcMenu">
<attr name="position">
<enum name="left_top" value="0" />
<enum name="right_top" value="1" />
<enum name="right_bottom" value="2" />
<enum name="left_bottom" value="3" />
<enum name="center_bottom" value="4" />
attr>
<attr name="radius" format="dimension" />
<attr name="margin" format="dimension" />
declare-styleable>
获取自定义属性
public enum Position {
LEFT_TOP, RIGHT_TOP, RIGHT_BOTTOM, LEFT_BOTTOM, CENTER_BOTTOM;
}
/**
* 初始化属性
*
* @param context
* @param attrs
* @param defStyle
*/
public ArcMenu(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// dp convert to px
mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
mRadius, getResources().getDisplayMetrics());
TypedArray a = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.ArcMenu, defStyle, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.ArcMenu_position:
int val = a.getInt(attr, 0);
switch (val) {
case 0:
mPosition = Position.LEFT_TOP;
break;
case 1:
mPosition = Position.RIGHT_TOP;
break;
case 2:
mPosition = Position.RIGHT_BOTTOM;
break;
case 3:
mPosition = Position.LEFT_BOTTOM;
break;
case 4:
mPosition = Position.CENTER_BOTTOM;
}
break;
case R.styleable.ArcMenu_radius:
// dp convert to px
mRadius = a.getDimensionPixelSize(attr, mRadius);
break;
case R.styleable.ArcMenu_margin:
mMargin = a.getDimensionPixelSize(attr, mMargin);
}
}
a.recycle();
}通过如上属性.我们就可以将 Path 按钮放在屏幕的 底部居中,而且 可以设置 距底部 的距离bottom_margin 属性,下面我们来看 一下 怎么将这些属性 设置到我们的 控件中
onLayout
我们都知道 onLayout方法 ,在自定义控件中 ,是给自定义控件设置位置的
首先是layoutButton() ,也就是中间 加号 按钮 位置的设定,将margin 设置进去
/**
* 第一个子元素为按钮，为按钮布局且初始化点击事件
*/
private void layoutButton() {
View cButton = getChildAt(0);
cButton.setOnClickListener(this);
int l = 0;
int t = 0;
int width = cButton.getMeasuredWidth();
int height = cButton.getMeasuredHeight();
switch (mPosition) {
case LEFT_TOP:
l = t = mMargin;
break;
case LEFT_BOTTOM:
l = mMargin;
t = getMeasuredHeight() - height - mMargin;
break;
case RIGHT_TOP:
l = getMeasuredWidth() - width - mMargin;
t = mMargin;
break;
case RIGHT_BOTTOM:
l = getMeasuredWidth() - width - mMargin;
t = getMeasuredHeight() - height - mMargin;
break;
case CENTER_BOTTOM:
l = getMeasuredWidth() / 2 - width / 2;
t = getMeasuredHeight() - height - mMargin;
break;
}
Log.e(TAG, l + " , " + t + " , " + (l + width) + " , " + (t + height));
cButton.layout(l, t, l + width, t + height);
}其次,其 扇形菜单 Item/这里 是从1 开始的 ,因为要去掉中间的 那个 Item
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if (changed) {
layoutButton();
int count = getChildCount();
/**
* 设置所有孩子的位置 例如(第一个为按钮)： 左上时，从左到右 ] 第2个：mRadius(sin0 , cos0)
* 第3个：mRadius(sina ,cosa) 注：[a = Math.PI / 2 * (cCount - 1)]
* 第4个：mRadius(sin2a ,cos2a) 第5个：mRadius(sin3a , cos3a) ...
*/
for (int i = 0; i < count - 1; i++) {
View child = getChildAt(i + 1);
child.setVisibility(View.GONE);
int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2)
* i));
int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2)
* i));
// childview width
int cWidth = child.getMeasuredWidth();
// childview height
int cHeight = child.getMeasuredHeight();
if (mPosition == Position.LEFT_TOP) {
cl += mMargin;
ct += mMargin;
}
if (mPosition == Position.LEFT_BOTTOM) {
ct = getMeasuredHeight() - cHeight - ct - mMargin;
cl += mMargin;
}
if (mPosition == Position.RIGHT_BOTTOM) {
ct = getMeasuredHeight() - cHeight - ct - mMargin;
cl = getMeasuredWidth() - cWidth - cl - mMargin;
}
if (mPosition == Position.RIGHT_TOP) {
cl = getMeasuredWidth() - cWidth - cl - mMargin;
ct += mMargin;
}
if (mPosition == Position.CENTER_BOTTOM) {
ct = (int) (mRadius * Math.sin(Math.PI / count * (i + 1)));
cl = (int) (mRadius * Math.cos(Math.PI / count * (i + 1)));
cl = getMeasuredWidth() / 2 - cWidth / 2 - cl;
ct = getMeasuredHeight() - cHeight - ct - mMargin;
}
child.layout(cl, ct, cl + cWidth, ct + cHeight);
}
}
}onClick
在 源blog 中.当 菜单被 完全打开的时候,显示的依然是 + 号,而我们看像 QQ 空间 或者 Path ,都会是 x ,那这个该 怎么办呢.
其实很简单的 不是吗? 这里面有个 Status,我们根据 其状态是Status.OPEN 或者 Status.CLOSE 来做不同的 处理即可
/**
* 为按钮添加点击事件
*/
@Override
public void onClick(View v) {
if (mButton == null) {
mButton = getChildAt(0);
}
rotateView(mCurrentStatus);
toggleMenu(300);
}public void rotateView(Status mCurrentStatus) {
if (mCurrentStatus == Status.OPEN) {
rotateView(mButton, 135f, 0f, 300);
} else {
rotateView(mButton, 0f, 135f, 300);
}
}同时,因为中间 按钮 位置的 改变,这里的 旋转 操作的 起始 和 终止 位置 也是变化的
if (mPosition == Position.CENTER_BOTTOM) {
ct = (int) (mRadius * Math.sin(Math.PI / count * (i + 1)));
cl = (int) (mRadius * Math.cos(Math.PI / count * (i + 1)));
} else {
// child left
cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
// child top
ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));
}这里需要 记住 ,当前状态是 Status.CLOSE的时候,就会 to OPEN,和 rotateView 是相同的
private void changeStatus() {
if (mCurrentStatus == Status.CLOSE) {
// 在arcMenu 要被打开的时候 给整个arcMenu 设置点击事件,
setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
ArcMenu.this.onClick(v);
}
});
} else {
setClickable(false);
}
// 切换状态
mCurrentStatus = (mCurrentStatus == Status.CLOSE ? Status.OPEN : Status.CLOSE);
// 设置状态回调,给用户设置,比如可以设置背景变暗等
if (null != statusChange) statusChange.arcMenuStatus(mCurrentStatus);
}StatusChange
public interface StatusChange {
void arcMenuStatus(Status mStatus);
}
public StatusChange getStatusChange() {
return statusChange;
}
public void setStatusChange(StatusChange statusChange) {
this.statusChange = statusChange;
}测试
布局文件
<com.bobomee.arcmenu.ArcMenu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_arcmenu"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:margin="15dp"
app:position="center_bottom"
app:radius="130dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/chooser_button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@mipmap/composer_camera"
android:tag="Camera" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/composer_music"
android:tag="Music" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/composer_place"
android:tag="Place" />
com.bobomee.arcmenu.ArcMenu>java 代码
ImageView people = new ImageView(this);
people.setImageResource(R.mipmap.composer_sleep);
people.setTag("Sleep");
mArcMenu.addView(people);
mArcMenu.setOnMenuItemClickListener(new ArcMenu.OnMenuItemClickListener() {
@Override
public void onClick(View view, int pos) {
Toast.makeText(MainActivity.this, view.getTag() + "; position :" + pos, Toast.LENGTH_LONG).show();
}
});
mArcMenu.setStatusChange(new ArcMenu.StatusChange() {
@Override
public void arcMenuStatus(ArcMenu.Status mStatus) {
mArcMenu.setBackgroundColor(mStatus == ArcMenu.Status.OPEN ? Color.LTGRAY : Color.TRANSPARENT);
}
});
相关源码：
ArcMenu@[Github]