Android 如何创建具有两条垂直线的圆形布局?

Android 如何创建具有两条垂直线的圆形布局?,android,android-layout,Android,Android Layout,我想在圆形布局中放置两条垂直线(线性或相对) 就像这张照片: 编辑: 我的尝试: <RelativeLayout android:background="@drawable/rounded_bg" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:layout_width="5dp"

我想在圆形布局中放置两条垂直线(线性或相对)

就像这张照片:

编辑:

我的尝试:

<RelativeLayout
    android:background="@drawable/rounded_bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <View
        android:layout_width="5dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:background="@color/colorPrimaryDark" />


</RelativeLayout>

结果:


如果您需要圆角背景之外的透明区域,则无法遮盖垂直线的多余部分。在这种情况下,您可以使用自定义的
视图
,该视图适用于API级别17+:

public class RoundedCornersLinearLayout extends LinearLayout{

        private Paint backgroundPaint;
        private Paint linePaint;

        private float cornerRadius;
        private float line_width;
        private float line_margin;
        private RectF rect = new RectF(0, 0, 0,0);

        private Path rectPath = new Path();
        private Path linePath = new Path();

        public RoundedCornersLinearLayout(Context context) {
            super(context);
            init();
        }

        public RoundedCornersLinearLayout(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        public RoundedCornersLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }

        private void init() {
            setWillNotDraw(false);

            // add this so Canvas.clipPath() will give the desired result also for devices running Api level 17,
            // see https://stackoverflow.com/a/30354461/5015207
            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
                setLayerType(LAYER_TYPE_SOFTWARE, null);
            }
            backgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            backgroundPaint.setColor(Color.GREEN);
            backgroundPaint.setStyle(Paint.Style.FILL);
            linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            linePaint.setColor(Color.BLUE);
            linePaint.setStyle(Paint.Style.FILL);

            // with  <dimen name="corner_radius">60dp</dimen> in res/values/dimens.xml
            cornerRadius = getResources().getDimensionPixelSize(R.dimen.corner_radius);
            //  <dimen name="line_width">5dp</dimen>
            line_width =  getResources().getDimensionPixelSize(R.dimen.line_width);
            //  <dimen name="margin_10dp">10dp</dimen>
            line_margin = getResources().getDimensionPixelSize(R.dimen.margin_10dp);
        }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        float measuredWidth = right - left;
        float measuredHeight = bottom - top;
        rect.set(0, 0, measuredWidth, measuredHeight);

        rectPath.reset();
        linePath.reset();

        rectPath.addRoundRect(rect, cornerRadius, cornerRadius, Path.Direction.CW);
        linePath.addRect(measuredWidth - (line_margin + line_width), 0, measuredWidth - line_margin, measuredHeight, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, backgroundPaint);    
        canvas.clipPath(rectPath);
        canvas.drawPath(linePath, linePaint);
    }
}
公共类圆形角落线性布局扩展了线性布局{
私人涂料背景涂料;
私人油漆;
私有浮动半径;
专用浮动线的宽度;
私人浮动线;
private RectF rect=新的RectF(0,0,0,0);
私有路径rectPath=新路径();
私有路径linePath=新路径();
公共圆形拐角附近布局(上下文){
超级(上下文);
init();
}
公共RoundedCornersLinearLayout(上下文上下文,@Nullable AttributeSet attrs){
超级(上下文,attrs);
init();
}
公共RoundedCornersLinearLayout(上下文上下文,@Nullable AttributeSet attrs,int defStyleAttr){
super(上下文、attrs、defStyleAttr);
init();
}
私有void init(){
setWillNotDraw(假);
//添加此选项,这样Canvas.clipPath()也将为运行Api级别17的设备提供所需的结果,
//看https://stackoverflow.com/a/30354461/5015207
if(Build.VERSION.SDK\u INT
棒棒糖(仿真器)的屏幕截图

。。。和Jellybean 4.2.2(设备):


剪辑是一项昂贵的操作,只有棒棒糖和更高版本才真正支持

如果您只喜欢棒棒糖+,并且确实想使用
RelativeLayout
,则可以调用
myView.setCliptOutline(true)
。如果您的
myView
具有圆形背景,这将告诉系统将所有子对象剪裁为该圆形

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    myView.setClipToOutline(true);
}
如果你需要在棒棒糖前的版本上进行圆角剪裁,那么最好的方法就是使用覆盖来遮罩你不想看到的部分视图。也就是说,创建一个具有不透明角和透明中心的可绘制视图,并将其应用于要剪裁的视图的顶部。这实际上不会剪裁您的视图,但会提供这样做的错觉


有关此策略的更多信息,请参见:

从圆角开始。这已经被谈论了很多次了。然后在线路上工作。提示:这些都是用XML完成的。@Droidv请帮我举个例子。@Zardchoobe请停止懒惰。这里有很多关于android视图的圆形摄像机的例子。@DroiDev我试了三天。我想要圆形布局中的圆形线条!!这是一项困难的任务。想要一个更简单的方法吗?研究如何使用9patch png。可能会容易得多。别对我大喊大叫CardView剪辑在android 4.3上不起作用。只要5岁以上就可以了。我只想要线性或相对布局。我有疑问地说。@Zardchoobe-花了我一些时间,但我认为即使在较旧的设备上,这也应该是可能的-新方法使用自定义视图并在Android 4.2.2上工作