[英]Placing an ImageView below a TextView
我有一個帶有TextView
和ImageView
的RelativeLayout
,如下所示:
橙色是ImageView
的背景色,用於說明圖像本身的開始與ImageView
的開始之間有多少空間。 如何使圖像顯示在ImageView
的頂部,以便標題直接位於圖像上方,而中間沒有橙色?
這是我的布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Recyclerview -->
<com.sometimestwo.moxie.MultiClickRecyclerView
android:id="@+id/recycler_zoomie_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Container for title and image-->
<RelativeLayout
android:id="@+id/hover_view_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center|top"
android:visibility="gone">
<!-- Title -->
<TextView
android:id="@+id/hover_view_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorBgBlackTint"
android:gravity="center"
android:textColor="@color/colorWhite"
android:visibility="visible" />
<!-- Imageview that holds dog picture -->
<ImageView
android:id="@+id/hover_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/hover_view_title"
android:background="@color/colorDarkThemeAccent"
android:visibility="visible" />
</RelativeLayout>
</FrameLayout>
您可以通過以下方式使用RelativeLayout
實現:
<?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="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:text="TextView"
android:textSize="24sp"
android:textStyle="bold" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="216dp"
android:layout_height="217dp"
android:layout_below="@+id/textView"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:background="@drawable/ic_launcher_background" />
</RelativeLayout>
這是我的結果的屏幕截圖
同樣,通過LinearLayout
以這種方式:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<TextView
android:layout_gravity="center"
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:text="TextView"
android:textSize="24sp"
android:textStyle="bold" />
<ImageView
android:layout_gravity="center"
android:id="@+id/imageView2"
android:layout_width="216dp"
android:layout_height="217dp"
android:background="@drawable/ic_launcher_background" />
</LinearLayout>
這里有幾個選項,我真的建議您使用ConstraintLayout,但這確實是另一個問題。 為了使您的布局按預期工作,我建議添加scaleType="fit_start"
。 這將縮放圖像,使其適合您的ImageView並將其對齊到頂部/左側(在rtl布局中為右側)。 除非您在所有情況下都需要圖像高,否則設置adjustViewBounds="true"
也很有可能也會起作用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.