android - 如何在android xml中实现这个 View ？

Question

在我的应用程序中，我需要创建一个这样的屏幕。

当文本较少时，菱形图标应位于屏幕中央。但是当文本更多时，图标应该与 TextView 的顶部对齐。

这是我的代码:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:orientation="vertical">

<RelativeLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_bg_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop" />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/series_banner_gradient" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:overScrollMode="ifContentScrolls">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="17dp"
            android:paddingEnd="30dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:paddingStart="30dp"
            android:paddingTop="18dp">

            <android.support.v4.widget.Space
                android:id="@+id/top_space"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_alignParentTop="true" />

            <ImageView
                android:id="@+id/iv_btn_play"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_above="@+id/ll_content"
                android:layout_centerInParent="true"
                android:contentDescription="@string/app_name"
                android:src="@drawable/play" />

            <LinearLayout
                android:id="@+id/ll_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="bottom"
                android:orientation="vertical">

                <android.support.v4.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="20dp" />

                <TextView
                    android:id="@+id/txt_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="11dp"
                    android:ellipsize="end"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state. "
                    android:textColor="@color/white"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/txt_description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="20dp"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state.India has its first fully organic state.India has its first fully organic state.India has its first fully organic state."
                    android:textColor="@color/white"
                    android:textSize="16sp" />

                <android.support.v4.widget.Space
                    android:id="@+id/bottom_space"
                    android:layout_width="match_parent"
                    android:layout_height="40dp" />
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>
</FrameLayout>

我不知道该怎么做。我不想要完整的代码。

Answer 1

您可以通过编程方式设置标题文本和 ImageView 之间的间距高度。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:orientation="vertical" >

<RelativeLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/iv_bg_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop" />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/series_banner_gradient" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:overScrollMode="ifContentScrolls" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="17dp"
            android:paddingEnd="30dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp"
            android:paddingStart="30dp"
            android:paddingTop="18dp" >

            <android.support.v4.widget.Space
                android:id="@+id/top_space"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_alignParentTop="true" />

            <LinearLayout
                android:id="@+id/ll_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="bottom|center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/iv_btn_play"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:contentDescription="@string/app_name"
                    android:src="@drawable/play" />

                <android.support.v4.widget.Space
                    android:id="@+id/middle_space"
                    android:layout_width="match_parent"
                    android:layout_height="20dp" />

                <TextView
                    android:id="@+id/txt_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="11dp"
                    android:ellipsize="end"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state."
                    android:textColor="@color/white"
                    android:textSize="30sp" />

                <TextView
                    android:id="@+id/txt_description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="20dp"
                    android:lineSpacingExtra="3sp"
                    android:text="India has its first fully organic state."
                    android:textColor="@color/white"
                    android:textSize="16sp" />

                <android.support.v4.widget.Space
                    android:id="@+id/bottom_space"
                    android:layout_width="match_parent"
                    android:layout_height="40dp" />
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

        txt_title.post(new Runnable() {
        @Override
        public void run() {
            int titleHeight = txt_title.getHeight();
            int descHeight = txt_description.getHeight();
            int windowHeight = getWindowHeight();
            int marginsDP = paddingBottom + bottomSpaceHeight + marginBottomDesc
                    + paddingBottomTitle + btnPlayHeight / 2;
            int marginsPX = convertDpToPixel(marginsDP);
            int spaceHeight = windowHeight / 2 - marginsPX - titleHeight - descHeight;
            // Log.i("log", "spaceHeight: " +spaceHeight);
            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) middle_Space
                    .getLayoutParams();
            if (spaceHeight > 0) {
                params.height = spaceHeight;
                middle_Space.setLayoutParams(params);
            } else {
                params.height = 0;
                middle_Space.setLayoutParams(params); // or
                                                        // setVisibility(View.GONE)
            }
        }
    });