web-dev-qa-db-fra.com

Arrondi in the coin supérieur of cardview

Je veux acculer seulement au sommet d'une cardview.

J'ai utilisé ci-dessous la propriété et elle arrondit tout le coin.

Je veux montrer un chevauchement de toutes les cartes

card_view:cardCornerRadius="4dp"

voici ma mise en page

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/card_view"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    card_view:cardCornerRadius="4dp"
    card_view:cardPreventCornerOverlap="false"
    >

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="100dp"
        Android:id="@+id/re1">

        <TextView
            Android:id="@+id/title"
            Android:layout_width="match_parent"
            Android:layout_height="20dp"
            Android:background="@color/colorAccent"
            Android:text="contact det"
            Android:gravity="center_vertical"
            Android:textColor="@Android:color/white"
            Android:textSize="14dp"/>

        <TextView
            Android:id="@+id/txtName"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Name"
            Android:gravity="center_vertical"
            Android:textSize="10dp"
            Android:layout_below="@id/title"
            Android:layout_marginTop="10dp"
            Android:layout_marginLeft="5dp"/>

        <TextView
            Android:id="@+id/txtSurname"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Surname"
            Android:gravity="center_vertical"
            Android:textSize="10dp"
            Android:layout_below="@id/txtName"
            Android:layout_marginTop="10dp"
            Android:layout_marginLeft="5dp"
            />

        <TextView
            Android:id="@+id/txtEmail"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Email"
            Android:textSize="10dp"
            Android:layout_marginTop="10dp"
            Android:layout_alignParentRight="true"
            Android:layout_marginRight="150dp"
            Android:layout_alignBaseline="@id/txtName"/>

        <TextView
            Android:id="@+id/txtAdd"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="Address"
            Android:textSize="10dp"
            Android:layout_alignLeft="@id/txtEmail"
            Android:layout_alignBaseline="@id/txtSurname"/>

    </RelativeLayout>


    </Android.support.v7.widget.CardView>
androidandroid-layoutandroid-cardview
14
Puneet Kushwah

Nous pouvons définir le marginBottom de la vue de la carte en valeur négative.La marge doit être identique à celle du rayon de la carte ..

    <FrameLayout
        Android:id="@+id/rootview"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

   <Android.support.v7.widget.CardView
         Android:id="@+id/card_view"
         Android:layout_marginBottom="-3dp"
         project:cardCornerRadius="3dp"
         Android:layout_width="match_parent"
         Android:layout_height="match_parent">

         <!--The child view inside the cardview should have extra padding,so that negative margin will not affect the bottom padding of its child.Here normally we have 16dp bottom padding for child + margin bottom of the parent is 3dp=19dp comes.-->

       <FrameLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:paddingBottom="19dp"/>

   </Android.support.v7.widget.CardView>
   </FrameLayout>

Cela fonctionne pour moi. Mais je doute que ce soit la bonne façon de procéder. Toutes les suggestions sont les bienvenues.

24
Swathi

Android Cardview qui vous permet de personnaliser la position des coins arrondis . Référence: https://github.com/captain-miao/OptionRoundCardview

enter image description here

8
qinmiao

J'ai essayé la même chose, mais aucune des solutions fournies n'a fonctionné pour moi. 

La seule chose qui a fonctionné était: 

1) Créez une ressource d’arrière-plan personnalisée (telle qu’un rectangle) avec des coins arrondis.

2) définir cet arrière-plan personnalisé en utilisant la commande -

cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);

A parfaitement fonctionné pour moi! J'espère que cela vous aide.

La mise en page XML que j'ai faite avec le rayon en haut à gauche et en bas à droite.

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="@color/white" />
<corners Android:topLeftRadius="18dp" Android:bottomRightRadius="18dp" />
</shape>

Dans votre cas, vous devez modifier uniquement topLeftRadius ainsi que topRightRadius.

2
Ankit Deshmukh

Ce qui est délicat parce que vous ne pouvez pas faire cela avec CardView. En interne, il utilise RoundRectDrawable (paquet privé) qui utilise roundRect comme ceci:

// rectf, rx, ry, Paint
canvas.drawRoundRect(mBoundsF, mRadius, mRadius, Paint);

Par conséquent, vous avez besoin d'une solution différente, par exemple, j'ai trouvé ce Gist d'Ahmed-Abdelmeged où ils utilisent un découpage de la toile à chaque coin en utilisant un chemin pour décrire le contour.

Ainsi, bien que ce ne soit pas moi qui ai créé ce code, je le posterai ici pour les futurs voyageurs.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundedView">
        <attr name="topLeftCornerRadius" format="dimension" />
        <attr name="topRightCornerRadius" format="dimension" />
        <attr name="bottomLeftCornerRadius" format="dimension" />
        <attr name="bottomRightCornerRadius" format="dimension" />
    </declare-styleable>
</resources>

et

package com.abdelmeged.ahmed.roundedlayout;

/**
 * Created by ahmed on 9/17/2017.
 */

import Android.content.Context;
import Android.content.res.TypedArray;
import Android.graphics.Canvas;
import Android.graphics.Path;
import Android.graphics.RectF;
import Android.graphics.Region;
import Android.support.annotation.NonNull;
import Android.support.annotation.Nullable;
import Android.util.AttributeSet;
import Android.view.View;
import Android.widget.FrameLayout;

/**
 * Custom wrapper view to get round corner round view
 */
public class RoundedView extends FrameLayout {

    /**
     * The corners than can be changed
     */
    private float topLeftCornerRadius;
    private float topRightCornerRadius;
    private float bottomLeftCornerRadius;
    private float bottomRightCornerRadius;

    public RoundedView(@NonNull Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundedView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

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

    private void init(Context context, AttributeSet attrs, int defStyle) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundedView, 0, 0);

        //get the default value form the attrs
        topLeftCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_topLeftCornerRadius, 0);
        topRightCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_topRightCornerRadius, 0);
        bottomLeftCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_bottomLeftCornerRadius, 0);
        bottomRightCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_bottomRightCornerRadius, 0);

        typedArray.recycle();
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        int count = canvas.save();

        final Path path = new Path();

        float[] cornerDimensions = {
                topLeftCornerRadius, topLeftCornerRadius,
                topRightCornerRadius, topRightCornerRadius,
                bottomRightCornerRadius, bottomRightCornerRadius,
                bottomLeftCornerRadius, bottomLeftCornerRadius};

        path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight())
                , cornerDimensions, Path.Direction.CW);

        canvas.clipPath(path);

        super.dispatchDraw(canvas);
        canvas.restoreToCount(count);
    }

    public void setTopLeftCornerRadius(float topLeftCornerRadius) {
        this.topLeftCornerRadius = topLeftCornerRadius;
        invalidate();
    }

    public void setTopRightCornerRadius(float topRightCornerRadius) {
        this.topRightCornerRadius = topRightCornerRadius;
        invalidate();
    }

    public void setBottomLeftCornerRadius(float bottomLeftCornerRadius) {
        this.bottomLeftCornerRadius = bottomLeftCornerRadius;
        invalidate();
    }

    public void setBottomRightCornerRadius(float bottomRightCornerRadius) {
        this.bottomRightCornerRadius = bottomRightCornerRadius;
        invalidate();
    }
}

Cela vous permettra de découper le bord des images et des vues avant qu'elles ne soient rendues. Par conséquent, il fait exactement ce que vous voulez.

0
EpicPandaForce