android-將圖像置於透明文本視圖的頂部

Question

我想要制定出android中的圖像視圖放置在帶有透明文本和其下文本的文本視圖頂部的佈局。這是我的嘗試的代碼片段

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:padding="10dp" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
<ImageView 
     android:id="@+id/image" 
     android:layout_width="70dp" 
     android:layout_height="70dp" 
     android:src="@drawable/writeups" /> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toEndOf="@id/image" 
     android:orientation="vertical"> 

     <TextView 
      android:id="@+id/tips_title" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="5dp" 
      android:text="tips_title" 
      android:textSize="20sp" /> 

     <TextView 
      android:id="@+id/tips_writeup" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toEndOf="@id/image" 
      android:text="Tips writeups" 
      android:textSize="15sp" /> 

    </LinearLayout> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 

     <TextView 
      android:id="@+id/tips_share" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="5dp" 
      android:text="SHARE" 
      android:textSize="20sp" /> 

     <TextView 
      android:id="@+id/tips_readmore" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="READ MORE" 
      android:textSize="15sp" /> 

    </LinearLayout></RelativeLayout> 

請如何從我的嘗試到目前爲止達到上述目的。

Answer 1

使用LinearLayout作爲根佈局和使用屬性android:orientation="vertical"。

2.添加RelativeLayout作爲LinearLayout直接孩子，並把ImageView和tranparent TextView內RelativeLayout。使用android:layout_alignParentBottom="true"至TextView將其與ImageView的底部對齊。

下面RelativeLayout添加另一個TextView爲tips_writeup。

4.對於ShareRead More和，使用LinearLayout作爲容器屬性android:orientation="horizontal"。使用Button與style="?android:attr/borderlessButtonStyle"而不是TextView。

更新您的佈局如下結構：

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

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

     <ImageView 
      android:id="@+id/image" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scaleType="centerCrop" 
      android:src="@drawable/dummy" /> 

     <TextView 
      android:id="@+id/tips_title" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:padding="16dp" 
      android:maxLines="1" 
      android:ellipsize="end" 
      android:text="Tips Title" 
      android:textSize="18sp" 
      android:textColor="@android:color/white" 
      android:textStyle="bold" 
      android:background="#88000000"/> 

    </RelativeLayout> 

    <TextView 
     android:id="@+id/tips_writeup" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="16dp" 
     android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium elit eu purus viverra, eu lobortis mi malesuada" 
     android:maxLines="2" 
     android:ellipsize="end" 
     android:textSize="16sp" 
     android:textColor="#727272"/> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:layout_margin="4dp"> 

     <TextView 
      android:id="@+id/tips_share" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="SHARE" 
      android:textColor="@android:color/holo_blue_light" 
      android:textStyle="bold" 
      style="?android:attr/borderlessButtonStyle"/> 

     <TextView 
      android:id="@+id/tips_readmore" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="READ MORE" 
      android:textColor="#727272" 
      android:textStyle="bold" 
      style="?android:attr/borderlessButtonStyle"/> 

    </LinearLayout> 
</LinearLayout> 

OUTPUT：

希望這將有助於〜

Answer 2

對於TextView的

的android：背景= 「＃CCD3D3D3」

對於答案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical"> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/music" 
    android:layout_weight="1"> 

    <ImageView 
     android:id="@+id/image" 
     android:layout_width="100dp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_margin="10dp" 
     android:scaleType="fitXY" 
     android:src="@drawable/profilebanner" /> 
    <TextView 
     android:id="@+id/Treating_cough" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="5dp" 
     android:text="Treating_cough text" 
     android:textAlignment="center" 
     android:background="@color/black1" 
     android:layout_alignParentBottom="true" 
     android:textSize="20sp" /> 
    </RelativeLayout> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:orientation="vertical"> 

     <TextView 
      android:id="@+id/tips_writeup" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Tips writeups .............." 
      android:textSize="15sp" /> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 
     <TextView 
      android:id="@+id/tips_share" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="15dp" 
      android:text="SHARE" 
      android:textColor="@color/Blue" 
      android:textSize="20sp" /> 

     <TextView 
      android:id="@+id/tips_readmore" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_margin="15dp" 
      android:text="READ MORE" 
      android:textSize="15sp" /> 
     </LinearLayout> 
    </LinearLayout> 

</LinearLayout>