我如何将两个文本视图对齐到可绘制对象的顶部，以防止它们相互堆积

Question

大家好Whosebug 成员。我正在努力实现这一目标：http://imgur.com/dqwOAOf

但由于某些原因，这两个文本不能像这样采取这些立场http://imgur.com/lyYg8Ei 谁能解释我做错了什么？请原谅我的艺术天赋。

我已经添加了整个 xml 文件。

想法是timer和typegekookt这两个textviews均匀分布在backgroundtypegekookt的中心。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:id="@+id/eggContainer"
android:layout_height="wrap_content"
android:padding="15dp">


<ImageView android:id="@+id/eggtimerimage"
    android:src="@drawable/eiwit"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:gravity="center_vertical"
    />
<ImageView android:id="@+id/backgroundtypegekookt"
    android:src="@drawable/timerwijzer"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"

    android:layout_centerHorizontal="true"
    android:layout_centerInParent="true"
    />


<TextView
    android:id="@+id/typegekookt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="zacht"
    android:textSize="20sp"
    android:textStyle="bold"
    android:textColor="@android:color/black" 
    android:layout_alignTop="@+id/divider2"
    android:layout_centerHorizontal="true"/>
<TextView
    android:id="@+id/timer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="10:00"
    android:textSize="22sp"
    android:textStyle="bold"
    android:textColor="@android:color/black"
    android:layout_centerHorizontal="true"
    android:layout_alignBottom="@+id/divider2"
/>

<TextView
    style="?android:listSeparatorTextViewStyle"
    android:id="@+id/divider1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/eggtimerimage"
    android:layout_marginBottom="-30dp"
    />
<TextView
    style="?android:listSeparatorTextViewStyle"
    android:id="@+id/divider2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_alignLeft="@+id/backgroundtypegekookt"
    android:layout_alignStart="@+id/backgroundtypegekookt"
    android:layout_alignRight="@+id/backgroundtypegekookt"
    android:layout_alignEnd="@+id/backgroundtypegekookt" />

   </RelativeLayout>

Answer 1

不要使用 ImageView android:id="@+id/backgroundtypegekookt"，而是使用具有该背景 (android:background="@drawable/timerwijzer") 的 RelativeLayout（或 LinearLayout），并将您的 TextView 放入其中

这就是我的意思：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/eggContainer"
    android:layout_height="wrap_content"
    android:padding="15dp"
    >

    <ImageView
        android:id="@+id/eggtimerimage"
        android:src="@drawable/eiwit"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:gravity="center_vertical"
    />

    <LinearLayout
        android:id="@+id/backgroundtypegekookt"
        android:background="@drawable/timerwijzer"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/typegekookt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="zacht"
            android:textSize="20sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_centerHorizontal="true"
        />
        <TextView
            android:id="@+id/timer"
            android:below="@id/typegekookt"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="10:00"
            android:textSize="22sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:layout_centerHorizontal="true"
        />
    </LinearLayout>

    <!-- You can use 2 Views instead of 2 TextViews, more efficiently -->
    <!-- Anyway, in your screenshots I only see 1 - I guess you'll have to fix that -->
    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/divider1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="-30dp"
    />
    <TextView
        style="?android:listSeparatorTextViewStyle"
        android:id="@+id/divider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignLeft="@id/backgroundtypegekookt"
        android:layout_alignStart="@id/backgroundtypegekookt"
        android:layout_alignRight="@id/backgroundtypegekookt"
        android:layout_alignEnd="@id/backgroundtypegekookt"
    />
</RelativeLayout>

我还将已弃用的 fill_parent 修复为 match_parent 并将 @+id（预期参考）修复为 @id（参考），在需要的地方。

另请参阅我在最后 2 个视图的布局中的评论。

我如何将两个文本视图对齐到可绘制对象的顶部，以防止它们相互堆积

How do i align both textviews on top of the drawable preventing them to pile up on eachother

java

xml

layout

android