programing

카드뷰에 색 테두리를 추가하는 방법?

oldcodes 2023. 10. 1. 21:55
반응형

카드뷰에 색 테두리를 추가하는 방법?

저는 안드로이드가 처음이고 여기서 첫번째 질문입니다.

카드뷰 시작 부분에 세로 테두리 색을 추가하려고 합니다.xml에서 어떻게 할 수 있나요? 빈 텍스트 뷰로 추가하려고 했는데 전체 카드 뷰 자체를 엉망으로 만들고 있습니다.예를 들어 아래에 게시된 사진 링크를 확인해주시기 바랍니다.

Colored boroder on cardview

activity_main.xml

<android.support.v7.widget.CardView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    card_view:contentPadding="16dp"
    card_view:cardElevation="2dp"
    card_view:cardCornerRadius="5dp">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Headline"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Title" />

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Body1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Content here" />
            
    </LinearLayout>

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

대단히 고맙습니다

시작 자재 디자인 업데이트부터 지원합니다.app:strokeColor이 외에도app:strokeWidth. 보기

재료 설계 업데이트를 사용합니다.다음 코드 추가build.gradle(:앱)

dependencies {
    // ...
    implementation 'com.google.android.material:material:1.0.0'
    // ...
  }

그리고 체인지CardView로.MaterialCardView

다음을 시도합니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:cardElevation="2dp"
    card_view:cardCornerRadius="5dp">

    <FrameLayout
        android:background="#FF0000"
        android:layout_width="4dp"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Headline"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Title" />

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Body1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Content here" />

    </LinearLayout>

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

카드 뷰에서 패딩을 제거하고 색상이 있는 프레임 레이아웃을 추가합니다.그런 다음 다른 필드에 대해 선형 레이아웃에서 패딩을 수정해야 합니다.

갱신하다

카드 모서리 반지름을 보존하려면 그리기 가능한 폴더에 card_edge.xml을 만듭니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#F00" />
    <size android:width="10dp"/>
    <padding android:bottom="0dp" android:left="0dp" android:right="0dp" android:top="0dp"/>
    <corners android:topLeftRadius="5dp" android:bottomLeftRadius="5dp"
        android:topRightRadius="0.1dp" android:bottomRightRadius="0.1dp"/>
</shape>

프레임 레이아웃에서 사용할 수 있습니다.android:background="@drawable/card_edge"

승인된 답변에는 프레임 레이아웃을 추가해야 하므로, 재료 설계로 이를 수행할 수 있는 방법을 소개합니다.

아직 추가하지 않은 경우 추가

implementation 'com.google.android.material:material:1.0.0'

이제 Cardview를 MaterialCardView로 변경합니다.

<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardCornerRadius="8dp"
app:cardElevation="2dp"

app:strokeWidth="1dp"
app:strokeColor="@color/black">

이제 활동 테마를 테마로 변경해야 합니다.재료.테마를 사용하는 경우.앱콤팩트 테마로 이동할 것을 제안합니다.앱에서 더 나은 재료 설계를 위한 향후 프로젝트를 위한 재료입니다.

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

저는 이 해결책이 효율적이지 않을 수도 있다고 생각하지만, 목적에 부합하고 국경 폭에 유연성을 더합니다.

 <android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="40dp"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@color/some_color"
    card_view:cardCornerRadius="20dp"
    card_view:contentPadding="5dp"> <!-- Change it to customize the border width -->

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        card_view:cardCornerRadius="20dp"
        card_view:contentPadding="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

         <!-- Add your UI elements -->

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

CardView프레임 레이아웃을 확장하여 다음을 지원합니다.foreground기여하다.사용.foreground속성을 통해 쉽게 테두리를 추가할 수도 있습니다.

레이아웃은 다음과 같습니다.

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/link_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="@drawable/bg_roundrect_ripple_light_border"
    app:cardCornerRadius="23dp"
    app:cardElevation="0dp">
</androidx.cardview.widget.CardView>

bg_roundrect_ripple_light_border.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_color_light">

    <item>
        <shape android:shape="rectangle">
            <stroke
                android:width="0.5dp"
                android:color="#DDDDDD" />
            <corners android:radius="23dp" />
        </shape>
    </item>

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="23dp" />
            <solid android:color="@color/background" />
        </shape>
    </item>

</ripple>

나의 해결책:

파일 카드_view_border.xml 만들기

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white_background"/>
<stroke android:width="2dp" 
    android:color="@color/red" />
<corners android:radius="20dip"/>
</shape>

프로그래밍 방식으로 설정합니다.

cardView.setBackgroundResource(R.drawable.card_view_border);

Amit에서 제안한 솔루션을 개선하고 싶습니다.추가하지 않고 주어진 리소스를 활용하고 있습니다.shapes아니면Views. 주고 있습니다.CardView배경색과 중첩된 레이아웃, 일부와 함께 덮어쓸 흰색leftMargin...

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:cardElevation="2dp"
    card_view:cardBackgroundColor="@color/some_color"
    card_view:cardCornerRadius="5dp">


    <!-- The left margin decides the width of the border -->

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:layout_marginLeft="5dp"
        android:background="#fff"
        android:orientation="vertical">

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Headline"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Title" />

        <TextView
            style="@style/Base.TextAppearance.AppCompat.Body1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Content here" />

    </LinearLayout>

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

저는 상대 배치에 두 개의 카드 뷰를 넣음으로써 이 문제를 해결했습니다.테두리 색의 배경이 있는 것과 이미지가 있는 것.(또는 사용하고 싶은 모든 것)

두 번째 CardView(카드 보기)의 상단과 시작에 추가된 여백을 기록합니다.제 경우에는 2dp 두께의 테두리를 사용하기로 했습니다.

            <android.support.v7.widget.CardView
            android:id="@+id/user_thumb_rounded_background"
            android:layout_width="36dp"
            android:layout_height="36dp"
            app:cardCornerRadius="18dp"
            android:layout_marginEnd="6dp">

            <ImageView
                android:id="@+id/user_thumb_background"
                android:background="@color/colorPrimaryDark"
                android:layout_width="36dp"
                android:layout_height="36dp" />

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

        <android.support.v7.widget.CardView
            android:id="@+id/user_thumb_rounded"
            android:layout_width="32dp"
            android:layout_height="32dp"
            app:cardCornerRadius="16dp"
            android:layout_marginTop="2dp"
            android:layout_marginStart="2dp"
            android:layout_marginEnd="6dp">

        <ImageView
            android:id="@+id/user_thumb"
            android:src="@drawable/default_profile"
            android:layout_width="32dp"
            android:layout_height="32dp" />

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

유지해도 좋습니다.<androidx.cardview.widget.CardView와 함께android:foreground="@drawable/black_border"

black_border :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>

언급URL : https://stackoverflow.com/questions/35369691/how-to-add-colored-border-on-cardview

반응형