Android CardView 使用 app:cardCornerRadius=”5dp” 时无法将角落变圆

huangapple go评论63阅读模式
英文:

Android CardView Doesn't round corners when using app:cardCornerRadius="5dp"

问题

我有一组图像数组,我想要展示,并且我在卡片视图内使用了SmartImageView图像滑块,现在我想要将此卡片视图的角落变成圆角。我在 XML 文件中使用了 app:cardCornerRadius="5dp",但没有效果,当我在 Java 文件中尝试使用 .setRadius(5) 也没有任何效果。奇怪的是,在我使用图像滑块之前,我使用了一个 ViewPager,它的角落可以很好地变成圆角。我不知道我做错了什么,如果有人发现了我的错误,我将非常感激。

XML 代码:

    <androidx.cardview.widget.CardView
        android:id="@+id/NoLinkCardview"
        android:layout_width="392dp"
        android:layout_height="258dp"
        android:layout_marginTop="10dp"
        app:cardBackgroundColor="@color/colorPrimaryDark"
        app:cardCornerRadius="5dp"
        app:cardUseCompatPadding="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <com.smarteist.autoimageslider.SliderView
            android:id="@+id/NoLinkImageSlider"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:sliderIndicatorGravity="center_horizontal|bottom"
            app:sliderIndicatorMargin="15dp"
            app:sliderIndicatorOrientation="horizontal"
            app:sliderIndicatorPadding="3dp"
            app:sliderIndicatorRadius="1.8dp"/>
    </androidx.cardview.widget.CardView>

Java 代码:

        SliderView sliderView = findViewById(R.id.NoLinkImageSlider);
        SliderAdapter adapter = new SliderAdapter(this);
        List<SliderItem> currentSliderItems = new ArrayList<>();
        currentSliderItems.clear();
        assert currentPointOfInterest != null;
        for(int j = 0; j<currentPointOfInterest.getAmountOfPictures(); j++){
            SliderItem sliderItem = new SliderItem();
            sliderItem.setImageUrl(Objects.requireNonNull(picturesMap.get(currentPointOfInterest.getID()))[j]);
            currentSliderItems.add(sliderItem);
        }
        adapter.renewItems(currentSliderItems);
        sliderView.setSliderAdapter(adapter);
        sliderView.setInfiniteAdapterEnabled(true);
        sliderView.setIndicatorAnimation(IndicatorAnimationType.COLOR); 
        sliderView.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION);
        sliderView.setIndicatorSelectedColor(getColor(R.color.colorAccent));
        sliderView.setIndicatorUnselectedColor(getColor(R.color.colorAccentTransparent));
英文:

I have an array of images that I want to display and I use smarteists image slider inside a cardview and now I want to round the corners of this cardview. I use app:cardCornerRadius="5dp" in the xml file and it doesn't work, when I try .setRadius(5) in the java file it also doesn't do anything. The strange thing is, before I used the image slider, I used a ViewPager and it rounded the corners just fine. I have no idea what I'm doing wrong so if anybody finds my mistake it would be greatly appreciated.

XML code:

    &lt;androidx.cardview.widget.CardView
        android:id=&quot;@+id/NoLinkCardview&quot;
        android:layout_width=&quot;392dp&quot;
        android:layout_height=&quot;258dp&quot;
        android:layout_marginTop=&quot;10dp&quot;
        app:cardBackgroundColor=&quot;@color/colorPrimaryDark&quot;
        app:cardCornerRadius=&quot;5dp&quot;
        app:cardUseCompatPadding=&quot;true&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintTop_toTopOf=&quot;parent&quot;&gt;
        &lt;com.smarteist.autoimageslider.SliderView
            android:id=&quot;@+id/NoLinkImageSlider&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;match_parent&quot;
            app:sliderIndicatorGravity=&quot;center_horizontal|bottom&quot;
            app:sliderIndicatorMargin=&quot;15dp&quot;
            app:sliderIndicatorOrientation=&quot;horizontal&quot;
            app:sliderIndicatorPadding=&quot;3dp&quot;
            app:sliderIndicatorRadius=&quot;1.8dp&quot;
            /&gt;
    &lt;/androidx.cardview.widget.CardView&gt;

Java Code:

        SliderView sliderView = findViewById(R.id.NoLinkImageSlider);
        SliderAdapter adapter = new SliderAdapter(this);
        List&lt;SliderItem&gt; currentSliderItems = new ArrayList&lt;&gt;();
        currentSliderItems.clear();
        assert currentPointOfInterest != null;
        for(int j = 0; j&lt;currentPointOfInterest.getAmountOfPictures(); j++){
            SliderItem sliderItem = new SliderItem();
            sliderItem.setImageUrl(Objects.requireNonNull(picturesMap.get(currentPointOfInterest.getID()))[j]);
            currentSliderItems.add(sliderItem);
        }
        adapter.renewItems(currentSliderItems);
        sliderView.setSliderAdapter(adapter);
        sliderView.setInfiniteAdapterEnabled(true);
        sliderView.setIndicatorAnimation(IndicatorAnimationType.COLOR); 
        sliderView.setSliderTransformAnimation(SliderAnimations.SIMPLETRANSFORMATION);
        sliderView.setIndicatorSelectedColor(getColor(R.color.colorAccent));
        sliderView.setIndicatorUnselectedColor(getColor(R.color.colorAccentTransparent));

答案1

得分: 1

在Java代码中,在您的NoLinkCardview上调用setClipToOutline(true)

CardView card = findViewById(R.id.NoLinkCardview);
card.setClipToOutline(true);
英文:

Call setClipToOutline(true) on your NoLinkCardview in Java code.

CardView card = findViewById(R.id.NoLinkCardview)
card.setClipToOutline(true)

答案2

得分: 0

我能够通过在滑动视图(Sliderview)中使用填充来解决这个问题。我在我的 XML 文件中添加了以下属性:

            android:paddingVertical="5dp"
            android:paddingHorizontal="5dp"

这样在我的 CardView 背景颜色所设定的背景色中,为我的图片创建了一个小框架。

英文:

I was able to fix this issue by using padding in the Sliderview. I added these attributes

            android:paddingVertical=&quot;5dp&quot;
            android:paddingHorizontal=&quot;5dp&quot;

to my XML file and these created a little frame around my pictures in the backgroundcolour that was set for my CardView.

huangapple
  • 本文由 发表于 2020年7月24日 21:50:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/63074966.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定