使用卡片视图时无法获得精确的圆形答案

【问题标题】：Unable to get exact circle shape when using card view使用卡片视图时无法获得精确的圆形
【发布时间】：2015-05-18 10:37:45
【问题描述】：

我在 android 材料设计中使用卡片视图作为浮动操作按钮。我正在使用以下代码获取圆圈

<android.support.v7.widget.CardView
    android:id="@+id/fab"
    android:layout_width="38dp"
    android:layout_height="38dp"
    android:layout_marginBottom="10dp"
    android:layout_marginRight="10dp"
    card_view:background="@color/blue"
    card_view:cardCornerRadius="19dp"
    card_view:cardPreventCornerOverlap = "false"
    card_view:cardElevation="6dp" >
</android.support.v7.widget.CardView>

我已将角半径设置为宽度的一半。但我仍然无法得到圆形。

【问题讨论】：

你能上传你看到的截图吗？
对不起，我无法上传截图。卡片视图看起来像圆角矩形。
是否保持宽度和高度为 38 dp？
没有 hoomi，它看起来不像 38dp。看起来小于 38dp。实际上我试图增加圆半径。但它也会增加高度和宽度。
你有这个问题的答案吗？

标签： android material-design android-cardview

【解决方案1】：

要使用 卡片视图 实现圆形，您可以设置 shape 属性 android:shape="ring"。
app:cardCornerRadius 应设置为子视图宽度或高度的一半

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:innerRadius="0dp"
        android:shape="ring"
        app:cardCornerRadius="75dp">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:background="@drawable/image" />
     </android.support.v7.widget.CardView>

【讨论】：

你不需要添加 shape 属性，因为 cardCornerRadius 就足够了。

【解决方案2】：

我已经解决了这个问题。现在android提供了material design的设计库，有FloatingActionButton.浮动动作按钮不需要自定义卡片视图。

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"  />

在gradle依赖中添加设计库

compile 'com.android.support:design:23.1.1'

更多详情请参考link

【讨论】：

但是我们如何设置动态图像也应该四舍五入

【解决方案3】：

要使用卡片视图获得完美的圆形，角半径应为宽度或高度的 1/2（考虑到它是正方形）。另外，我注意到您正在使用 card_view 参数，不要。

<android.support.v7.widget.CardView
android:layout_width="38dp"
android:layout_height="38dp"
app:cardCornerRadius="19dp"
app:cardElevation="6dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:id="@+id/fab"
android:background="@color/blue"
>

【讨论】：

不是可维护或可扩展的解决方案

【解决方案4】：

使用

形状=“环”

使用相同的 layout_height 和 layout_weight

和

app:cardCornerRadius= layout_height 或 layout_weight 的一半

例子

<android.support.v7.widget.CardView
                        android:id="@+id/cardview"
                        android:layout_width="110dp"
                        android:layout_height="110dp"
                        android:shape="ring"
                        app:cardCornerRadius="55dp">
</android.support.v7.widget.CardView>

【讨论】：

【解决方案5】：

我想出了使用 Drawable 的简单解决方案，它看起来很棒！

在此处获取可绘制对象 https://drive.google.com/drive/folders/0B4Vo_ku-aIKzUFFnUjYxYVRLaGc?resourcekey=0-RiH8lUO0i1kwnZsqquqjnQ&usp=sharing

【讨论】：

是的，这样看起来很棒，但是背景颜色不能从白色更改为所需的颜色，因为它是 PNG 而不是 XML。

【解决方案6】：

<androidx.cardview.widget.CardView
        android:layout_width="60dp"
        android:layout_marginStart="150dp"
        app:cardCornerRadius="360dp"
        android:layout_height="60dp">

【讨论】：

请添加一些解释来证实您的答案。
我给 CardCornerRadius 360dp

【解决方案7】：

我尝试了您的代码，发现卡片相对于卡片高度值的增加而变得不那么圆。尝试将其设置为零，这至少使它看起来更好。

card_view:cardElevation="0dp";

但可能更好的选择是使用FloatingActionButton 作为圆形按钮

<android.support.design.widget.FloatingActionButton
    android:src="@drawable/your_drawble_name"
    app:fabSize="normal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

【讨论】：

【解决方案8】：

将此行添加到 CardView，它将 cardCornerRadius 设置为圆形直径。

app:cardCornerRadius="360dp"

【讨论】：

【解决方案9】：

是的，我通过将 CardCornerRadius 的一半减少到其视图的高度来实现它。

【讨论】：

【解决方案10】：

card_layout.xml

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="250dp"
    android:layout_height="200dp">

    <ImageView
        android:id="@+id/card_thumbnail_image"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        style="@style/card_thumbnail_image"/>
</android.support.v7.widget.CardView>

MainActivity.java

 ImageView imageView = (ImageView) findViewById(R.id.card_thumbnail_image);
    Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rose);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
        //Default 
        imageView.setBackgroundResource(R.drawable.rose);
    } else {
        //RoundCorners 
        RoundCornersDrawable round = new RoundCornersDrawable(mBitmap,
                getResources().getDimension(R.dimen.cardview_default_radius), 0); //or your custom radius

        CardView cardView = (CardView) findViewById(R.id.card_view);
        cardView.setPreventCornerOverlap(false); //it is very important

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
            imageView.setBackground(round);
        else
            imageView.setBackgroundDrawable(round);
    }

RoundCornersDrawable.java

    public class RoundCornersDrawable extends Drawable {

    private final float mCornerRadius;
    private final RectF mRect = new RectF();
    //private final RectF mRectBottomR = new RectF();
    //private final RectF mRectBottomL = new RectF();
    private final BitmapShader mBitmapShader;
    private final Paint mPaint;
    private final int mMargin;

    public RoundCornersDrawable(Bitmap bitmap, float cornerRadius, int margin) {
        mCornerRadius = cornerRadius;

        mBitmapShader = new BitmapShader(bitmap,
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);

        mMargin = margin;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mRect.set(mMargin, mMargin, bounds.width() - mMargin, bounds.height() - mMargin);
        //mRectBottomR.set( (bounds.width() -mMargin) / 2, (bounds.height() -mMargin)/ 2,bounds.width() - mMargin, bounds.height() - mMargin);
       // mRectBottomL.set( 0,  (bounds.height() -mMargin) / 2, (bounds.width() -mMargin)/ 2, bounds.height() - mMargin);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mPaint);
        //canvas.drawRect(mRectBottomR, mPaint); //only bottom-right corner not rounded
        //canvas.drawRect(mRectBottomL, mPaint); //only bottom-left corner not rounded

    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        mPaint.setColorFilter(cf);
    }


}

【讨论】：

【解决方案11】：

首先在您的项目中导入drawbleToolBox 库。使用此库，您可以动态创建可绘制对象。

为了让你的卡片视图圈你的半径必须是它的高度/宽度的一半。

                int radius = cardView.getHeight()/2;
                Drawable drawable = new DrawableBuilder()
                    .rectangle()
                    .solidColor(0xffffffff)

                    .topRightRadius(radius) // in pixels
                    .bottomRightRadius(radius)
                     //otherplaces
                    .build();



                holder.cardView.setBackground(drawable);

如果您在回收视图中使用 cardview，则无法获取 cardview 宽度因为它还没有创建。所以你应该这样做

holder.cardView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener()
    {
        @Override
        public boolean onPreDraw()
        {
         //codes here.
        }
     }

【讨论】：

【解决方案12】：

使用 CardView 获得带阴影的圆形背景可能会很麻烦，因为在 drawable 中使用 layer-list 来获得所需的输出。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="oval">
            <!--shadow color you want-->
            <solid android:color="#C3C1C1"/>
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="oval">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

【讨论】：