[英]Center an ImageView (inside a RelativeLayout) to a LinearLayout (that is outside the RelativeLayout)
I try to achieve something like the image below : 我尝试实现如下图所示的效果:
Except that the Pin should be center to the first group of labels & the Flag to the second one. 别针应位于第一组标签的中心,而标志应位于第二组的中心。
Here is the code I currently have : 这是我目前拥有的代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".TestDesignActivity"
>
<RelativeLayout
android:id="@+id/ll01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/ll03"
android:layout_alignTop="@id/ll02"
android:layout_marginEnd="5dp"
android:padding="5dp"
>
<ImageView
android:id="@+id/iv01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@drawable/ic_pin"
/>
<View
android:layout_width="2dp"
android:layout_height="wrap_content"
android:layout_above="@+id/iv02"
android:layout_below="@+id/iv01"
android:layout_centerHorizontal="true"
android:background="@color/md_grey_500"
/>
<ImageView
android:id="@+id/iv02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="@drawable/ic_flag"
/>
</RelativeLayout>
<LinearLayout
android:id="@+id/ll02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_toEndOf="@+id/ll01"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus massa, aliquet id diam et, pellentesque tincidunt nibh. Suspendisse et sodales diam, nec porta dui. Sed."
android:textColor="@color/black"
android:textSize="16sp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="3"
android:text="Lorem ipsum dolor sit."
android:textSize="12sp"
/>
</LinearLayout>
<Space
android:id="@+id/space"
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_alignParentEnd="true"
android:layout_below="@id/ll02"
android:layout_toEndOf="@+id/ll01"
/>
<LinearLayout
android:id="@+id/ll03"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="@id/space"
android:layout_toEndOf="@+id/ll01"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque metus massa, aliquet id diam et, pellentesque tincidunt nibh. Suspendisse et sodales diam, nec porta dui. Sed."
android:textColor="@color/black"
android:textSize="16sp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="3"
android:text="Lorem ipsum dolor sit."
android:textSize="12sp"
/>
</LinearLayout>
</RelativeLayout>
I'm not quite sure if it's possible (in XML) to access from a child view to another view that isn't in the same "view level" ... 我不太确定是否有可能(在XML中)从子视图访问不在同一“视图级别”的另一个视图。
So maybe should I do it programmatically ? 因此,也许我应该以编程方式进行操作?
Like inflate my view with my content, evaluate the size of the LinearLayout and applied the half to the top margin (and do the same for bottom) ? 就像用内容填充我的视图一样,评估LinearLayout的大小并将一半应用于顶部边缘(对底部边缘也是如此)?
Note : 注意 :
The vertical grey bar should be centered to Pin and Flag . 垂直的灰色条应位于Pin和Flag的中心。
The vertical grey bar should adapt is size to the size of the two label groups. 垂直灰色条的大小应适合两个标签组的大小。
The vertical grey bar should be doted (I will create a CustomView for that, I think). 应该竖竖灰色条(我认为我将为此创建一个CustomView)。
You can achieve this by ConstraintLayout
as root. 您可以通过以
ConstraintLayout
作为root用户来实现。
Set top/bottom of Pin and Flag to be constrained at top/bottom of Layout in their right(which shows texts). 将Pin和Flag的顶部/底部设置为在其右侧的Layout顶部/底部(显示文本)。 This will center these pictures vertically for those text layout.
这会将这些图片垂直居中放置在这些文本布局中。 Then constraint vertical line between Pin and Flag , so it resize and fill up space between those two.
然后在Pin和Flag之间限制垂直线,以便调整大小并填充这两者之间的空间。 Just remember that you need 1 layout for each set of texts at right.
只要记住,右边的每组文本都需要1个布局。
In addition, I think you make make that dotted line with shape xml and setting dashGap
and dashWidth
of stroke. 另外,我认为您可以使用xml形状并设置
dashGap
和dashWidth
来使该虚线dashGap
dashWidth
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.