我必须开发如下所附的设计。 为了实现这一目标,我创建了 2 个独立的线性布局,并给它们
layout_weight
为 1,以便将屏幕垂直划分为 2 种背景颜色。
对于图像,我将其提取为矢量,并将其放置在Guideline的基础上。
我面临的问题是,图像没有固定在该位置,而是根据屏幕尺寸上下移动。如何确保图像保持固定在设计所示的相同位置?
到目前为止我的代码,
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#fff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff5757">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#5ce1e6">
</LinearLayout>
</LinearLayout>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/train_svg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4" />
<ImageView
android:id="@+id/ev_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="262dp"
android:maxHeight="225dp"
android:scaleType="fitCenter"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/train_svg"
app:layout_constraintBottom_toBottomOf="@id/train_svg"
app:srcCompat="@drawable/train" />
</androidx.constraintlayout.widget.ConstraintLayout>
试试这个
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ff5757" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#5ce1e6" />
</LinearLayout>
<ImageView
android:id="@+id/ev_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxWidth="262dp"
android:maxHeight="225dp"
android:scaleType="fitCenter"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@mipmap/ic_launcher" />
</androidx.constraintlayout.widget.ConstraintLayout>
您可以在 Photoshop、illustrator、xd 或任何其他程序等程序上设计图像。将图像另存为 SVG 将图像从 SVG 转换为 xml。转到 ->drawable 文件夹 -> 单击右侧 鼠标按钮->从菜单中选择新建选择victor asset
选择要转换的图像 这是xml图像代码
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="428dp"
android:height="925dp"
android:viewportWidth="428"
android:viewportHeight="925">
<path
android:pathData="M0,0h428v463h-428z"
android:fillColor="#ff5757"/>
<path
android:pathData="M0,462h428v463h-428z"
android:fillColor="#5ce1e6"/>
</vector>
您可以将此代码复制并粘贴到可绘制的 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"
android:background="@drawable/component_1___1"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>