android - 如何在Android中将图标垂直对齐到第一行textview的中心
问题描述
我想放置我的左侧图标(请参阅下图),垂直居中于 TextView 中文本的第一行。我找不到办法,我在文本视图、重力和约束上尝试了 drawableLeft,但这并没有帮助。有谁能够帮我?
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<ImageView
android:id="@+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_tick_mark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintStart_toEndOf="@+id/iv_itm_tick"
app:layout_constraintTop_toTopOf="parent"
android:text="Concepts of deep learning and machine learning workflow" />
</androidx.constraintlayout.widget.ConstraintLayout>
解决方案
如果ImageView是TextView,您可以简单地将其基线约束到另一个TextView的基线。不幸的是,ImageViews并没有真正可行的基线概念,因此您不能简单地将ImageView的基线限制为TextView。(试试看会发生什么。)
一种方法是将ImageView替换为TextView,将图标设置为TextView 的背景并约束两个基线。如果没有特别考虑,这种技术将导致刻度线的缩放并导致失真。为了解决这个问题,将刻度线drawable放在图层列表drawable中并指定重力。阻止缩放的是重力:
tick_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/ic_tick_mark"
android:gravity="center" />
</layer-list>
刻度线可能如下所示:
ic_tick_mark.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#66A8DD"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z" />
</vector>
如果底层图标是位图,则图层列表也可以是可绘制的 XML 位图。
另一种可行的方法是创建一个空的TextView ,它具有与要附加刻度线的TextView相同的特征。将空TextView约束到另一个TextView的基线。这会将空的 textview 放置在另一个TextView的第一行旁边。
现在,获取ImageView并将其顶部和底部限制为空的TextView。刻度线将按需要排列。
这是一个仅限 XML 的解决方案。其他解决方案可能涉及一些编码。
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
tools:context=".MainActivity">
<ImageView
android:id="@+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_tick_mark"
app:layout_constraintBottom_toBottomOf="@id/dummyView"
app:layout_constraintEnd_toStartOf="@id/textView"
app:layout_constraintTop_toTopOf="@id/dummyView" />
<TextView
android:id="@+id/textView"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Concepts of deep learning and machine learning workflow"
android:textAppearance="@style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/dummyView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.AppCompat.Display1"
app:layout_constraintBaseline_toBaselineOf="@id/textView"
app:layout_constraintEnd_toStartOf="@+id/textView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
推荐阅读
- sql - 将数据(.xls 文件)导入 SQL Server - 我收到此错误
- php - 本地主机索引页面上的问题不起作用
- android - Qpython Androidhelper 在后台语音识别 - Android
- c# - 如何在 F# 中初始化 YouTubeService?
- java - 有没有办法在 Java 方法中使用 HTML/JSP?
- payment-gateway - 如何通过 Rest API 从 woocommerce 网站获得额外费用?
- node.js - 服务于 REST api 的 nodejs Web 服务,同时也是消息队列的消费者
- python - 如何运行这个必须检查 2 x 10^25 组合的 python 程序?
- excel - 如何:根据表格外单元格中设置的值在公式中动态选择表格字段名称
- c# - 我正在从 ADAL 迁移到 MSAL 并收到无效范围错误