CardView มุมรัศมี

มีวิธีทำให้ CardView มีรัศมีมุมที่ด้านบนหรือไม่?

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="10dp"
    >

ถ้าคุณพยายามที่จะขยาย Android ชั้นเรียนคุณไม่สามารถปรับแต่งแอตทริบิวต์จากCardViewXML

อย่างไรก็ตามมีวิธีที่จะได้รับผลกระทบนั้น

วางCardViewด้านในอีกด้านหนึ่งCardViewและใช้พื้นหลังโปร่งใสกับด้านนอกของคุณCardViewและลบรัศมีมุม ( "cornerRadios = 0dp") ภายในของคุณCardViewจะมีค่า cornerRadius เป็น 3dp เช่น จากนั้นใช้ marginTop การภายในของคุณดังนั้นขอบเขตด้านล่างของมันจะถูกตัดจากด้านนอกCardView CardViewวิธีนี้รัศมีมุมด้านล่างของด้านในของคุณCardViewจะถูกซ่อนไว้

โค้ด XML มีดังต่อไปนี้:

 <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>

และเอฟเฟกต์ภาพมีดังต่อไปนี้:

ใส่เนื้อหาของคุณไว้ในตัวคุณCardViewเสมอ CardView ด้านนอกของคุณทำหน้าที่ในการ "ซ่อน" มุมมนด้านล่างของด้านในCardViewเท่านั้น

dependencies: compile 'com.android.support:cardview-v7:23.1.1'

<android.support.v7.widget.CardView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:elevation="12dp"
    android:id="@+id/view2"
    app:cardCornerRadius="40dp"
    android:layout_centerHorizontal="true"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9">
    <ImageView
        android:layout_height="80dp"
        android:layout_width="match_parent"
        android:id="@+id/imageView1"
        android:src="@drawable/Your_image"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">
    </ImageView>
</android.support.v7.widget.CardView>

คุณสามารถใช้มาตรฐานMaterialCardรวมอย่างเป็นทางการในห้องสมุดวัสดุส่วนประกอบ

ใช้ในเค้าโครงของคุณ:

<com.google.android.material.card.MaterialCardView
        style="@style/MyCardView"
        ...>

ในสไตล์ของคุณให้ใช้shapeAppearanceOverlayแอตทริบิวต์เพื่อปรับแต่งรูปร่าง (รัศมีมุมเริ่มต้นคือ4dp)

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
  </style>


  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

คุณยังสามารถใช้:

<com.google.android.material.card.MaterialCardView
     app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
     ...>

มันคือผลลัพธ์:

มีตัวอย่างวิธีการบรรลุเมื่อการ์ดอยู่ที่ด้านล่างสุดของหน้าจอ หากมีคนมีปัญหาเช่นนี้ให้ทำบางสิ่งเช่น

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-5dp"
    card_view:cardCornerRadius="4dp">

    <SomeView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp">

    </SomeView>

</android.support.v7.widget.CardView>

มุมมองการ์ดมีขอบล่างติดลบ มุมมองภายในมุมมองการ์ดมีเหมือนกัน แต่ขอบล่างเป็นบวก วิธีนี้จะซ่อนส่วนที่โค้งมนไว้ด้านล่างของหน้าจอ แต่ทุกอย่างจะเหมือนกันทุกประการเนื่องจากมุมมองด้านในมีระยะขอบเคาน์เตอร์

คุณสามารถใช้ xml ที่วาดได้นี้และตั้งเป็นพื้นหลังให้กับ cardview:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffffff"/>

    <stroke android:width="1dp"
        android:color="#ff000000"
        />

    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"
        />

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

ฉันเขียน lib ที่วาดได้ไปยังตำแหน่งมุมรอบที่กำหนดเองดูเหมือนว่า:

คุณสามารถรับ lib นี้ได้ที่นี่:

https://github.com/mthli/Slice

คุณต้องทำ 2 สิ่ง:

1) โทรหาsetPreventCornerOverlap(false)CardView ของคุณ

2) ใส่Imageview แบบโค้งมนภายใน CardView

เกี่ยวกับการปัดเศษมุมมองภาพของคุณฉันมีปัญหาเดียวกันฉันจึงสร้างไลบรารีที่คุณสามารถกำหนดรัศมีที่แตกต่างกันในแต่ละมุมได้ ในที่สุดก็ได้ผลลัพธ์ตามที่ต้องการด้านล่างนี้

https://github.com/pungrue26/SelectableRoundedImageView

คุณสามารถใช้ไลบรารี: OptionRoundCardview

คุณสามารถใส่ ImageView ของคุณใน CardView และเพิ่มคุณสมบัติเหล่านั้นลงใน ImageView:

android:cropToPadding="true"
android:paddingBottom="15dp"

ด้วยวิธีนี้คุณจะกำจัดมุมด้านล่างที่โค้งมนออกไป แต่โปรดทราบว่าสิ่งนี้มาพร้อมกับราคาของการตัดภาพส่วนน้อยออกไป

หมายเหตุ: นี่เป็นวิธีแก้ปัญหาหากคุณต้องการให้ได้มุมโค้งมนที่ด้านล่างเท่านั้นและมุมปกติที่ด้านบน สิ่งนี้จะใช้ไม่ได้หากคุณต้องการให้มีรัศมีที่แตกต่างกันสำหรับมุมทั้งสี่มุมของมุมมองการ์ด คุณจะต้องใช้ Material Cardview สำหรับมันหรือใช้ไลบรารีของบุคคลที่สาม

นี่คือสิ่งที่ดูเหมือนจะใช้ได้ผลสำหรับฉัน:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#F9F9F9">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/profile_bg"/>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cvProfileHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="32dp">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:orientation="vertical"
            android:background="@drawable/profile_bg"
            android:id="@+id/llProfileHeader"
            android:gravity="center_horizontal">

            <!--Enter your code here-->

        </LinearLayout>
    
    </androidx.cardview.widget.CardView>

</RelativeLayout>

มีสองมุมมองทั้งหมด มุมมองที่สองคือมุมที่จะมีมุมโค้งมน (ทุกด้านตามปกติ) และจะมีมุมมองย่อยอื่น ๆ ทั้งหมด มุมมองการ์ดแรกด้านบนยังอยู่ในระดับเดียวกัน (ของระดับความสูง) และมีพื้นหลังเหมือนกัน แต่มีความสูงเพียงครึ่งหนึ่งของมุมมองการ์ดที่สองและไม่มีมุมโค้งมน (เป็นเพียงมุมที่คมตามปกติ) ด้วยวิธีนี้ฉันสามารถบรรลุมุมมนบางส่วนที่ด้านล่างและมุมปกติที่ด้านบน แต่สำหรับทั้งสี่ด้านคุณอาจต้องใช้มุมมองวัสดุ

คุณสามารถทำสิ่งนี้กลับด้านเพื่อให้ได้มุมโค้งมนที่ด้านบนและมุมปกติที่ด้านล่างกล่าวคือปล่อยให้มุมมองการ์ดแรกมีมุมมนและมุมมองที่สองมีมุมปกติ

วิธีที่ง่ายที่สุดในการบรรลุผลใน Android Studio มีคำอธิบายด้านล่าง:

ขั้นตอนที่ 1:
เขียนบรรทัดด้านล่างในการอ้างอิงในbuild.gradle:

compile 'com.android.support:cardview-v7:+'

ขั้นตอนที่ 2:
คัดลอกโค้ดด้านล่างในไฟล์ xml ของคุณเพื่อรวมไฟล์CardView.

เพื่อcardCornerRadiusให้ใช้งานได้โปรดอย่าลืมใส่บรรทัดด้านล่างในเค้าโครงหลัก: xmlns:card_view="http://schemas.android.com/apk/res-auto"

และอย่าลืมใช้card_viewเป็นเนมสเปซสำหรับการใช้cardCornerRadiusคุณสมบัติ

ตัวอย่างเช่น : card_view:cardCornerRadius="4dp"

รหัส XML:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_outer"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp" >

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view_inner"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        card_view:cardBackgroundColor="@color/green"
        card_view:cardCornerRadius="4dp"
        card_view:cardElevation="0dp" >
    </android.support.v7.widget.CardView>

</android.support.v7.widget.CardView>

วิธีง่ายๆในการบรรลุเป้าหมายนี้คือ:

1. สร้างทรัพยากรพื้นหลังที่กำหนดเอง (เช่นรูปทรงสี่เหลี่ยมผืนผ้า) ที่มีมุมโค้งมน

2. ตั้งค่าพื้นหลังที่กำหนดเองโดยใช้คำสั่ง -

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

สิ่งนี้ได้ผลสำหรับฉัน

XMLรูปแบบที่ผมทำกับด้านบนซ้ายและรัศมีล่างขวา

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

ในกรณีของคุณคุณต้องเปลี่ยนเฉพาะ topLeftRadius และ topRightRadius

หากคุณมีเค้าโครงที่ทับซ้อนกับมุมของมุมมองการ์ดและอาจมีสีที่แตกต่างออกไปคุณอาจต้องใช้ไฟล์ทรัพยากรพื้นหลังอื่นสำหรับเค้าโครงและใน xml ตั้งค่าทรัพยากรพื้นหลังนี้เป็นเค้าโครงของคุณ

ฉันลองและทดสอบวิธีการข้างต้นแล้ว หวังว่านี่จะช่วยคุณได้

หากคุณกำลังตั้งค่าพื้นหลังการ์ดโดยใช้โปรแกรมให้ใช้งานที่คุณใช้cardView.setCardBackgroundColor()และไม่ใช้cardView.setBackgroundColor()และตรวจสอบให้แน่ใจว่าใช้app:cardPreventCornerOverlap="true"บน cardView.xml ที่แก้ไขให้ฉัน

Btw รหัสด้านบน (ในใบเสนอราคา) อยู่ใน Kotlin ไม่ใช่ Java ใช้ Java ที่เทียบเท่าหากคุณใช้ Java