android 圆弧progressbar android圆形按钮

Android 类遥控器圆形控件 扇形按钮 带中间按钮

• 前言
• 效果图
• 使用方法

• 添加依赖
• 在布局中使用
• 参数设定

• 设定是否有中间按钮
• 设定正常情况下的中间按钮的背景颜色
• 设定中间按钮的圆圈描边颜色
• 设定中间按钮的圆圈描边边框大小
• 设定中间按钮被点击时的背景颜色
• 设定中心按钮图片
• 设定中心按钮的圆形半径
• 设定菜单数量
• 设定菜单偏移角度
• 设定菜单图片
• 设定是否画每个菜单扇形到中心点的直线
• 设定是否画每个菜单扇形到中心点的直线
• 设定菜单正常背景颜色
• 设定菜单点击背景颜色
• 设定菜单描边颜色
• 设定菜单描边宽度
• 菜单图片与中心点的距离

• 代码

• GitHub
• 完事

前言

永远做不完的自定义控件之UI又出了新交互

看设计图

我都不知道怎么描述这个是啥东西，所以这次标题的关键词有点多。

反正要实现的功能就是，能够点击4个扇形区域和中间圆形区域；按下的时候有背景颜色变化；能够更改图片的更换；等等等等。。。

当然最终实现了。
顺带做了个开源控件

效果图

使用方法

添加依赖

Step 1. Add the JitPack repository to your build file

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Step 2. Add the dependency

dependencies {
	        implementation 'com.github.D10NGYANG:DL10RoundMenuView:1.0.5'
	}

在布局中使用

<com.dlong.rep.dlroundmenuview.DLRoundMenuView
        android:id="@+id/dl_rmv"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:RMCoreMenuDrawable="@mipmap/circle"
        app:RMRoundMenuDrawable="@mipmap/go"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

参数设定

设定是否有中间按钮

布局中

app:RMHasCoreMenu="true"

代码中

dlRoundMenuView.setHasCoreMenu(true);

设定正常情况下的中间按钮的背景颜色

布局中

app:RMCoreMenuNormalBackgroundColor="#ffffffff"

代码中

dlRoundMenuView.setCoreMenuNormalBackgroundColor(0xffffffff);

设定中间按钮的圆圈描边颜色

布局中

app:RMCoreMenuStrokeColor="#cc999999"

代码中

dlRoundMenuView.setCoreMenuStrokeColor(0xcc999999);

设定中间按钮的圆圈描边边框大小

布局中

app:RMCoreMenuStrokeSize="1dp"

代码中

dlRoundMenuView.setCoreMenuStrokeSize(2.0f);

设定中间按钮被点击时的背景颜色

布局中

app:RMCoreMenuSelectedBackgroundColor="#cc999999"

代码中

dlRoundMenuView.setCoreMenuSelectedBackgroundColor(0xcc999999);

设定中心按钮图片

布局中

app:RMCoreMenuDrawable="@mipmap/circle"

代码中

dlRoundMenuView.setCoreMenuDrawable(mContext.getResources().getDrawable(R.mipmap.circle));

设定中心按钮的圆形半径

布局中

app:RMCoreMenuRoundRadius="50dp"

代码中

dlRoundMenuView.setCoreMenuRoundRadius(50f);

设定菜单数量

布局中

app:RMRoundMenuNumber="4"

代码中

dlRoundMenuView.setRoundMenuNumber(4);

设定菜单偏移角度

布局中

app:RMRoundMenuDeviationDegree="45"

代码中

dlRoundMenuView.setRoundMenuDeviationDegree(45f);

设定菜单图片

统一图片即可，程序里有旋转处理
布局中

app:RMRoundMenuDrawable="@mipmap/go"

代码中
可单独设定每个位置的图片，0代表位置0，如果是4个菜单的话就是正上方的位置。

dlRoundMenuView.setRoundMenuDrawable(0,mContext.getResources().getDrawable(R.mipmap.go));

设定是否画每个菜单扇形到中心点的直线

布局中

app:RMIsDrawLineToCenter="false"

代码中

dlRoundMenuView.setIsDrawLineToCenter(false);

设定是否画每个菜单扇形到中心点的直线

布局中

app:RMIsDrawLineToCenter="false"

代码中

dlRoundMenuView.setIsDrawLineToCenter(false);

设定菜单正常背景颜色

布局中

app:RMRoundMenuNormalBackgroundColor="@color/white"

代码中

dlRoundMenuView.setRoundMenuNormalBackgroundColor(0xffffffff);

设定菜单点击背景颜色

布局中

app:RMRoundMenuSelectedBackgroundColor="#cc999999"

代码中

dlRoundMenuView.setRoundMenuSelectedBackgroundColor(0xcc999999);

设定菜单描边颜色

布局中

app:RMRoundMenuStrokeColor="#cc999999"

代码中

dlRoundMenuView.setRoundMenuStrokeColor(0xcc999999);

设定菜单描边宽度

布局中

app:RMRoundMenuStrokeSize="1dp"

代码中

dlRoundMenuView.setRoundMenuStrokeSize(2f);

菜单图片与中心点的距离

布局中

app:RMRoundMenuDistance="80%"

代码中

dlRoundMenuView.setRoundMenuDistance(0.8f);

代码

public class MainActivity extends AppCompatActivity {
    private Context mContext = this;
    private DLRoundMenuView dlRoundMenuView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        dlRoundMenuView = findViewById(R.id.dl_rmv);
        dlRoundMenuView.setOnMenuClickListener(new OnMenuClickListener() {
            @Override
            public void OnMenuClick(int position) {
                //Toast.makeText(mContext, "点击了："+position,Toast.LENGTH_SHORT).show();
                Log.e("TAG", "点击了："+position);
            }
        });
    }
}

GitHub

完事