12

我正在尝试实现一个用圆角绘制自身的 LinearLayout 子类。根据我的研究，我设置setWillNotDraw(false)并重写onDraw()以在画布中绘制一个圆角矩形：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), drawPaint, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG);
    canvas.drawRoundRect(bounds, mCornerRadius, mCornerRadius, roundPaint);
    canvas.restoreToCount(sc);
}

在哪里：

drawPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
drawPaint.setColor(0xffffffff);
drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

roundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
roundPaint.setColor(0xffffffff);

DST_IN这里似乎是正确的选项（根据 APIDemos 示例），但是应该透明的区域（圆形区域）改为黑色背景，并且孩子的角落仍然可见。这是带有 Android 4.2.2 的 Galaxy Nexus 上的结果：

例子

有什么提示吗？

编辑：这是我想要实现的目标，对 photoshopping 的粗糙表示抱歉:)

在此处输入图像描述

编辑 2：我向 GitHub 添加了一个示例可运行项目：https ://github.com/venator85/RoundClippingLayout

谢谢 ;）

4

7 回答 7

7

不太一样：Romain Guy 做了一篇关于使用位图着色器裁剪图像边角的博文。不确定是否要扩展相同的内容。

http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/

于 2013-04-17T20:33:03.267 回答
5

尝试这个，

布局：-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout 
        android:id="@+id/linearLayout"
        android:layout_width="300dp"
        android:gravity="center"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@drawable/rounded_edge">
        <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="foo" />
    </LinearLayout>
</RelativeLayout>

形状（可绘制）：-rounded_edge.xml

<shape 
        xmlns:android="http://schemas.android.com/apk/res/android">
            <solid 
                android:color="@android:color/darker_gray">
            </solid>
            <stroke 
                 android:width="0dp" 
                 android:color="#424242">
            </stroke>
            <corners 
                 android:topLeftRadius="100dip"
                 android:topRightRadius="100dip"
                 android:bottomLeftRadius="100dip"
                 android:bottomRightRadius="100dip">
            </corners>
        </shape>
于 2013-04-18T08:31:53.207 回答
3

我可以实现这样的圆角LinearLayout。

在此处输入图像描述

步骤：

1.创建自定义布局

public class RoundedLayout extends LinearLayout {
    private RectF rect;
    private Paint paint;

    public RoundedLayout(Context context) {
        super(context);
        init();
    }
    public RoundedLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        rect = new RectF(0.0f, 0.0f, getWidth(), getHeight());
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.parseColor("#7EB5D6"));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);           
        canvas.drawRoundRect(rect, 20, 20, paint);
    }
}

2.像这样在主布局中使用它

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#336699" >

    <com.example.rounded.RoundedLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="30dp"
        android:background="@android:color/transparent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="foo" />

    </com.example.rounded.RoundedLayout>    

</LinearLayout>
于 2013-04-18T07:22:35.703 回答
3

尝试这个 ！！取自这篇文章

将以下内容添加到文件中（例如 customshape.xml），然后将其放入（res/drawable/customshape.xml）

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 android:shape="rectangle"> 
 <gradient 
     android:startColor="#SomeGradientBeginColor"
     android:endColor="#SomeGradientEndColor" 
     android:angle="270"/> 

<corners 
     android:bottomRightRadius="7dp" 
     android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" 
     android:topRightRadius="7dp"/> 
</shape>

完成创建此文件后，只需通过以下方式之一设置背景：

通过代码：

yourObject.setBackgroundResource(R.drawable.customshape);

或者通过 XML，只需将以下属性添加到容器（例如：LinearLayout 或任何字段）：

android:background="@drawable/customshape"
于 2013-04-19T21:04:39.033 回答
2

怎么样...

myLayout.setBackgroundResource(R.drawable.my_rounded_drawable);

然后...

my_rounded_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FFFFFFFF" />
            <stroke android:width="1dip" android:color="#FF000000" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</selector>
于 2013-04-16T17:42:40.133 回答
0

与其尝试削减布局的边角，不如在其顶部放置一个 Drawable 作为与背景颜色相匹配的框架？

于 2013-04-18T00:37:08.730 回答
0

[编辑：看起来这将添加到 L: https://developer.android.com/preview/material/views-shadows.html#clip，它允许您将视图剪辑为矩形、圆形、或圆形矩形drawable。]

我自己尝试了很长时间，并得到了这个答案，表明这是不可能的，因为 View 类是基于 Rect 类的。我刚刚检查了来源，从评论看来情况仍然如此。

摩托罗拉将在今年夏天晚些时候发布 Moto 360（圆面 Android Wear 手表），因此可能会有框架更新，允许使用矩形以外的其他形状的视图。

于 2014-07-02T18:29:16.603 回答