如何在CardView的一侧应用边框?

问题描述 投票:0回答:2

我正在尝试制作一个左侧带有彩色圆形边框的自定义 CardView。我怎样才能实现以下目标?

我尝试了两种不同的方法,在 CardView 中使用 FrameLayout。在第一个中,我将形状作为背景,在另一个中,我将 ImageView 放在左侧。

<?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"
    android:layout_margin="8dp"
    card_view:cardElevation="2dp"
    card_view:cardCornerRadius="5dp">

    <FrameLayout
        android:background="@drawable/card_edge"
        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>

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="5dp"
    app:cardElevation="2.5dp"
    android:layout_marginTop="15dp"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:layout_marginBottom="2dp"
    android:id="@+id/background"
    android:background="@drawable/rectangle_skylightblue">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56.3dp"
            android:orientation="horizontal">

            <TextView
                android:fontFamily="@font/sfpro_display_regular"
                android:id="@+id/text"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
                android:layout_weight="1"
                android:text="BASF GUARA - SP"
                android:textColor="#00c0ff"
                android:textSize="15sp" />

            <ImageView
                android:id="@+id/forward"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="11.7dp"
                android:src="@drawable/ic_arrow_skyblue" />
        </LinearLayout>
    </FrameLayout>

    <ImageView
        android:id="@+id/line"
        android:layout_width="5dp"
        android:layout_height="56.3dp"
        android:src="@drawable/rectangle_skyblue" />

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

但是,正如您所看到的,两次尝试都没有达到预期的结果,并且第二次使用 ImageView 的尝试是最糟糕的,因为颜色会根据操作类型而改变。 那么,我首先需要更改什么才能实现边框细节?

android android-cardview
2个回答
4
投票

我在网上找到了这个答案,它与您正在寻找的内容很接近。 https://www.android-examples.com/show-add-one-side-left-border/

您需要添加的只是曲角半径。


0
投票
<item android:id="@+id/cardbackground">
    <shape
        android:shape="rectangle">


        <solid android:color="@color/colorPrimary" />
        <corners android:bottomLeftRadius="@dimen/size_8dp"
                android:bottomRightRadius="@dimen/size_8dp"
                android:topLeftRadius="@dimen/size_8dp"
            android:topRightRadius="@dimen/size_8dp"/>

    </shape>

</item>

<item
    android:bottom="0dp"
    android:left="@dimen/size_2dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="1dp"
            android:color="@color/darkgrey" />

        <corners
            android:bottomLeftRadius="@dimen/size_8dp"
            android:bottomRightRadius="@dimen/size_8dp"
            android:topLeftRadius="@dimen/size_8dp"
            android:topRightRadius="@dimen/size_8dp" />
        <solid android:color="@color/white"/>
    </shape>


</item>
© www.soinside.com 2019 - 2024. All rights reserved.