Question

我想创建一个如下所示的布局：

-- Scrollview --
-------Top -----
 [Image view 1]
    n% margin
 [Image view 2]
    m% margin
 [Image view 3] 
    l% margin
------Bottom----
-- /Scrollview--

使用“图像视图”将其高度调整为图像宽高比，填充100％宽度。

这是我使用的布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.motionportrait.hokuto_malts.ChooseVideoActivity">

    <ScrollView android:layout_width="match_parent" android:layout_height="match_parent">
        <android.support.percent.PercentFrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
         >
            <ImageView
                       android:id="@+id/choose_movie_1"
                       android:layout_height="wrap_content"
                       app:layout_marginTopPercent="0%"
                       android:layout_width="match_parent"
                       android:adjustViewBounds="true"
                       android:onClick="play"
                      />
            <ImageView
                android:id="@+id/choose_movie_2"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:adjustViewBounds="true"
                android:layout_marginTop="0dp"
                app:layout_marginTopPercent="20%"
                android:onClick="play"
            />
            <ImageView
                android:id="@+id/choose_movie_3"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:adjustViewBounds="true"
                app:layout_marginTopPercent="40%"
                android:onClick="play"/>
            <ImageView
                android:id="@+id/choose_movie_4"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:adjustViewBounds="true"
                app:layout_marginTopPercent="60%"
                android:onClick="play"/>
            <ImageView
                android:id="@+id/choose_movie_5"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:adjustViewBounds="true"
                app:layout_marginTopPercent="80%"
                android:onClick="play"/>


        </android.support.percent.PercentFrameLayout>

</ScrollView>
</RelativeLayout>

然而，使用此布局时，不会考虑上边距，并且每个图像都会在视图顶部被压扁。

我的要求是能够定义％边距，因为我需要图片部分覆盖自己

Answer 1

使用android:scaleType="fitXY"让Imageview根据图片宽高比调整其高度。

Answer 2

请试一试。

<ImageView
    android:id="@id/img"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter" />

Answer 3

您只需将android.support.percent.PercentFrameLayout更改为LinearLayout

即可

你可以使用

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

而不是

<android.support.percent.PercentFrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

这很简单： - ）

您还可以进一步使用android:layout_weight。

如果还有任何疑问，请随时询问。快乐的编码： - ）

Answer 4

这是我最终使用的。

诀窍在于app:layout_widthPercent="100%" 如果没有这个，似乎视图的大小不能正确

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.motionportrait.hokuto_malts.ChooseVideoActivity">
    <ScrollView android:layout_width="match_parent" android:layout_height="match_parent">
        <android.support.percent.PercentFrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
         >
            <android.support.percent.PercentFrameLayout
                app:layout_aspectRatio="21%"
                app:layout_widthPercent="100%"
            >
                <ImageView
                    android:id="@+id/choose_movie_1"
                    android:layout_height="wrap_content"
                    app:layout_marginTopPercent="4.5%"
                    android:src="@drawable/movie01"
                    android:adjustViewBounds="true"
                    android:layout_width="match_parent"
                    android:onClick="play"
                />

                <ImageView
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:adjustViewBounds="true"
                    android:src="@drawable/choose_movie_title"
                    android:layout_width="match_parent"/>
                <ImageView
                android:id="@+id/choose_movie_2"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:adjustViewBounds="true"
                android:src="@drawable/movie02"
                app:layout_marginTopPercent="19%"
                android:onClick="play"
            />
            <ImageView
                android:id="@+id/choose_movie_3"
                android:layout_height="wrap_content"
                android:src="@drawable/movie03"
                app:layout_marginTopPercent="38%"
                android:adjustViewBounds="true"
                android:layout_width="match_parent"
                android:onClick="play"/>
                <ImageView
                    android:id="@+id/choose_movie_5"
                    android:src="@drawable/movie05"
                    android:adjustViewBounds="true"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    app:layout_marginTopPercent="74.5%"
                    android:onClick="play"/>
            <ImageView
                android:id="@+id/choose_movie_4"
                android:layout_height="wrap_content"
                android:src="@drawable/movie04"
                android:adjustViewBounds="true"
                android:layout_width="match_parent"
                app:layout_marginTopPercent="55%"
                android:onClick="play"/>

<ImageView
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:src="@drawable/back_manga"
    android:layout_gravity="bottom"
    android:layout_marginBottom="0dp"
    android:onClick="back"
    android:layout_width="match_parent"/>

            </android.support.percent.PercentFrameLayout>
        </android.support.percent.PercentFrameLayout>

</ScrollView>
</LinearLayout>

Android百分比布局

4 个答案: