更改ui和Android应用程序

Question

我正在制作一个视频应用，并且在屏幕上我想要一个图像查看和播放按钮以及一些描述文字。 我想使图像全屏显示，并在图像中间显示播放按钮。 然后，文字应位于按钮和图像下方。

以下是我目前在以下布局中得到的内容

我的布局

 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@color/black">


<RelativeLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" 
        android:background="@color/list_second_white"
        android:id="@+id/relative_header">

        <TextView
            android:id="@+id/text_category"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:padding="5dp"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceMedium" />

         <TextView
            android:id="@+id/second"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:padding="5dp"
            android:text=""
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/picture"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/relative_header"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/desc"
        android:src="@drawable/ic_launcher" />

    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/picture"
        android:layout_marginTop="60dp"
        android:layout_centerHorizontal="true"
        android:contentDescription="@string/desc"
        android:src="@drawable/video_thumb_small"
        />


    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/picture"
        android:layout_centerHorizontal="true"
        android:text=""
        android:textStyle="bold"
        android:textColor="@color/list_second_white"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/text_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text"
        android:padding="10dp"
        android:textColor="@color/blue"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

 </ScrollView>

这就是我要实现的

在第一张图像上，按钮未完全与图像预览重叠。

Answer 1

我将解决问题的方式将是..

--ScrollView
  --LinearLayout 
    --RelativeLayout
      --TextView
      --TextView
    --FrameLayout
      --ImageView
      --ImageView
    --TextView
    --TextView

垂直方向的LinearLayout会在其中一个接一个地放置视图。 注意：每个布局都占据父布局的整个宽度。

如您所知，RelativeLayout会相对于彼此或父级放置子视图。

FrameLayout将一个视图放在另一个视图之上

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/black">


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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/list_second_white"
    android:id="@+id/relative_header">

    <TextView
        android:id="@+id/text_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:padding="5dp"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium" />

     <TextView
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:padding="5dp"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<ImageView
    android:id="@+id/picture"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:adjustViewBounds="true"
    android:contentDescription="@string/desc"
    android:src="@drawable/ic_launcher" />

<ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_gravity="center"
    android:contentDescription="@string/desc"
    android:src="@drawable/video_thumb_small" />

</FrameLayout>


<TextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text=""
    android:textStyle="bold"
    android:gravity="center"
    android:layout_gravity="center"
    android:textColor="@color/list_second_white"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/text_desc"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="@color/blue"
    android:text=""
    android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

</ScrollView>

更新：

尝试添加

    android:gravity="center"
    android:layout_gravity="center"
    //will put text in center 

到@+id/text

还添加

    android:scaleType="centerCrop"
    android:adjustViewBounds="true"
    // will scale preview image 

到@+id/picture

同样在ImageView使用android:src="@drawable/video_thumb_small"

更改

    android:gravity="center"
    android:layout_gravity="center"
    // will center the play button