避免Android在布局中将项目推离屏幕?

时间:2016-11-12 11:04:30

标签: android android-layout android-linearlayout android-view android-relativelayout

我有两个类似的问题,都涉及ImageView推动TextView(s),我无法弄清楚原因。对于卡片列表,我希望图像的高度与其父级匹配,同时宽度适当缩放,文本左对齐恰好在图像右侧。对于弹出窗口,请使用下面的文本将宽度调整为父级和缩放高度。

Current CardLayout output Current CardInfoLayout output

我期待/寻找的是什么:

enter image description here enter image description here

当前card_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="120dp" >

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_margin="10dp"
    android:layout_height="120dp"
    card_view:cardCornerRadius="4dp"
    card_view:elevation="14dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image"
            android:layout_height="match_parent"
            android:layout_width="wrap_content"
            android:scaleType="fitStart"
            android:padding="4dp"
            android:layout_gravity="left"
            android:layout_weight="1">
        </ImageView>

        <TextView
            android:id="@+id/location"
            android:textSize="16dip"
            android:layout_toRightOf ="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:gravity="top" >
        </TextView>

        <TextView
            android:id="@+id/abbreviation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/location"
            android:layout_toRightOf="@+id/image"
            android:layout_toEndOf="@+id/image">
        </TextView>

    </RelativeLayout>
</android.support.v7.widget.CardView>

</RelativeLayout>

当前location_info_card.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/info_image"
    android:layout_height="0dp"
    android:layout_width="match_parent"
    android:scaleType="fitStart"
    android:padding="10dp"
    android:layout_weight="1">
</ImageView>

<TextView
    android:id="@+id/info_abbreviation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingBottom="4dp">
</TextView>

<TextView
    android:id="@+id/info_location"
    android:textSize="16sp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingBottom="4dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
</TextView>
</LinearLayout>

我已尝试过教程中的几个解决方案以及具有单一和嵌套布局的SO帖子,但到目前为止似乎没有任何工作。这只是我目前所拥有的。

  1. 解决方案?
  2. 为什么文本在LinearLayout中被推到底部而不是直接出现在下面?或者,当RelativeLayout上的wrap_contentImageView使用layout_toRightOf时,为什么会在TextView内将其推离屏幕?
  3. 关于#2,由于SO上的类似问题的答案只发布了针对该问题的解决方案而没有任何解释,我似乎无法将其应用于我的情况。我正在寻找一种资源来理解布局和视图如何交互(单个和嵌套时),如果解释太长了答案。

1 个答案:

答案 0 :(得分:0)

关于card_layout.xml布局,看起来您对最顶层的TextView没有任何垂直对齐方式。您有android:gravity参数,但它与android:layout_gravity不同。它仅设置视图内容在视图中的显示方式,它不会定位视图本身。你应该添加一行像`android:layout_alignTop =“@ id / image”而不是引力。

至于第二个,你已经将卡的高度设置为与父母相匹配,所以毫不奇怪它正在填满整个屏幕。您需要将所有内容(包括布局和内部元素)的高度设置为wrap_content并删除权重属性,它们需要设置为所有视图以执行任何有用的操作。

另一件重要的事情。我注意到您没有在android:adjustViewBounds上指定ImageView。您必须将其设置为true,否则视图将尝试设置与固有可绘制大小相关的比例,而不是缩放以保持纵横比。

关于学习材料,我会首先了解线性和相对布局的工作原理,你的问题不一定与嵌套事物有关。现在网上有很多它们,我相信你可以自己找到它们。另外,不要害怕在Android Studio中进行实验。