[英]how to make imageview border with two color and fix size border width in andorid
[英]How to make a second color border with MaterialCardView?
我在網上找不到任何專門要求這個的問題
我將如何像圖像中那樣在一側實現紅色的“第二”邊框? 我正在使用 MaterialCardView 作為主要外部邊框。 我是否只制作一個左側帶有紅色邊框的自定義形狀並將其用作 MaterialCardView 的背景?
這可以通過三個嵌套的MaterialCardViews
輕松實現,只需更改每張卡片的app:cardBackgroundColor
、 app:cardCornerRadius
和android:layout_margin
屬性即可。
以下是 Xml 布局示例:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"
app:cardBackgroundColor="#81afdc"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
app:cardBackgroundColor="#a70e09"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="6dp"
app:cardBackgroundColor="#ffffff"
app:cardCornerRadius="6dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Sample Text"/>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
結果:
首先,創建兩個可繪制資源文件,如下所示:
bg_cardView_inner_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/holo_red_dark"/>
<corners android:radius="7dp"/>
</shape>
bg_cardView_outline_color.xml
<?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:color="@android:color/holo_blue_light"
android:width="5dp"/>
<corners android:radius="10dp"/>
</shape>
然后,在您的 XML 文件中,如下添加這些文件:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DemoActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="@drawable/bg_cardview_outline_color"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
android:paddingBottom="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="@drawable/bg_cardview_inner_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:gravity="center_vertical|center"
android:layout_marginStart="10dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/your_image"
app:tint="@color/black"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="your text"
android:textSize="30sp"
android:gravity="center"
android:textStyle="bold"
/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.