web-dev-qa-db-ja.com

カードビューを使用すると、正確な円の形状を取得できません

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>

コーナー半径を幅の半分に設定しました。それでも、円の形状を取得できません。enter image description here

androidmaterial-designandroid-cardview
32
Ayyappan

私は問題を解決しました。今Androidマテリアルデザインのデザインライブラリを提供します。これには 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

20
Ayyappan

カードビューを使用して完全な円の形状を得るには、角の半径を幅または高さの1/2にする必要があります（正方形であることを考慮して）。また、card_view paramsを使用していることに気づきました。

<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"
>
14
Alexandr Kotikov

カードビューを使用して円形を作成するには、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>
11
silent_control

つかいます

形状=「リング」

同じ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>
7
Gautam Kumar

あなたのコードを試してみたところ、カードはカードの標高値の増加に関してあまりラウンドではないことがわかりました。それをzeroに設定してみてください。

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" />
5
Collins Abitekaniza

Drawableを使用する簡単なソリューションを思いつきましたが、すごいですね！

ここでDrawableを取得 https://drive.google.com/open?id=0B4Vo_ku-aIKzUFFnUjYxYVRLaGc

enter image description here

5
Dhruv Kaushal

はい、CardCornerRadiusの半分をそのビューの高さに減らすことで達成しました。

1
Rahul Kushwaha

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);
    }


}
0
Kumar Ajay A.K