主体较小的 CardView 和漂浮在其外部的图像
CardView with a smaller body and Image floating outside it
我正在尝试在 Android
中创建一个 CardView
,使图像看起来像是漂浮在框外,而覆盖它的 CardView
框看起来会更小。
因为不知道怎么形容比较好所以找了个类似的设计图画在了Paint
.
让我感到困惑的部分是让盒子看起来比实际 CardView
小。
您应该尝试使用 CardView
和 ImageView
的 FrameLayout
。然后,给 CardView
一些余量,你就会得到它。
希望对您有所帮助。
只是不要将 ImageView 放在 CardView 中。
尝试这样的事情:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:elevation="16dp"
/>
<CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:margin_top="8dp"
android:margin_start="8dp">
<!-- CardView contents -->
</CardView>
</FrameLayout>
您需要调整尺寸以适合您的布局。
试试这段代码(用于您项目的布局文件):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@android:color/holo_green_dark"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="25dp"
app:cardBackgroundColor="@android:color/holo_orange_light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView One"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@android:color/black"
android:layout_marginStart="70dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView Two"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@android:color/black"
android:layout_marginStart="70dp"
android:layout_marginBottom="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView Three"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@android:color/black"
android:layout_marginStart="70dp"
android:layout_marginBottom="15dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="14dp"
android:layout_marginStart="12dp"
android:elevation="2dp"
android:background="@android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
注意: 你必须给必须放在 CardView
上面的 ImageView
更多的 elevation
因为 CardView
默认情况下已经有一些自己的高度。
在你的 build.gradle (Module: app) 文件中,在 dependencies 下添加这两个依赖如下:
dependencies {
// For ConstraintLayout:
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
// For CardView:
implementation 'com.android.support:cardview-v7:27.1.1'
}
截图(以上代码):
对于屏幕尺寸 - 5.0 英寸(1080 x 1920 像素)[设备:Pixel 2]
希望对您有所帮助。
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="20dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@color/cinza_claro"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:foregroundGravity="bottom"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@color/red_app_accent"
android:foregroundGravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
我想你可以像这个例子一样,使用边距来调整图像。
我正在尝试在 Android
中创建一个 CardView
,使图像看起来像是漂浮在框外,而覆盖它的 CardView
框看起来会更小。
因为不知道怎么形容比较好所以找了个类似的设计图画在了Paint
.
让我感到困惑的部分是让盒子看起来比实际 CardView
小。
您应该尝试使用 CardView
和 ImageView
的 FrameLayout
。然后,给 CardView
一些余量,你就会得到它。
希望对您有所帮助。
只是不要将 ImageView 放在 CardView 中。
尝试这样的事情:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:elevation="16dp"
/>
<CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:margin_top="8dp"
android:margin_start="8dp">
<!-- CardView contents -->
</CardView>
</FrameLayout>
您需要调整尺寸以适合您的布局。
试试这段代码(用于您项目的布局文件):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@android:color/holo_green_dark"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="25dp"
app:cardBackgroundColor="@android:color/holo_orange_light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView One"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@android:color/black"
android:layout_marginStart="70dp"
android:layout_marginTop="15dp"
android:layout_marginBottom="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView Two"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@android:color/black"
android:layout_marginStart="70dp"
android:layout_marginBottom="5dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView Three"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="@android:color/black"
android:layout_marginStart="70dp"
android:layout_marginBottom="15dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="14dp"
android:layout_marginStart="12dp"
android:elevation="2dp"
android:background="@android:color/holo_red_dark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
注意: 你必须给必须放在 CardView
上面的 ImageView
更多的 elevation
因为 CardView
默认情况下已经有一些自己的高度。
在你的 build.gradle (Module: app) 文件中,在 dependencies 下添加这两个依赖如下:
dependencies {
// For ConstraintLayout:
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
// For CardView:
implementation 'com.android.support:cardview-v7:27.1.1'
}
截图(以上代码):
对于屏幕尺寸 - 5.0 英寸(1080 x 1920 像素)[设备:Pixel 2]
希望对您有所帮助。
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="20dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@color/cinza_claro"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:foregroundGravity="bottom"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@color/red_app_accent"
android:foregroundGravity="center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
我想你可以像这个例子一样,使用边距来调整图像。