Linearlayout Imageview 设计 所有设备

Question

我如何使用线性布局在所有设备上查看相同的视图？我想显示为第一张图片。所有设备上的图像必须相同。

720X1280

1280x800

所有设备屏幕方向纵向视图 对象总数 25 imageview, 8 linearlayout

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

        <LinearLayout android:id="@+id/linearLayout0" 
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_alignParentLeft="true" 
        android:layout_width="fill_parent"
        android:orientation="horizontal">

        </LinearLayout>   

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="fill_parent"
            android:layout_height="65dp"
            android:layout_alignParentLeft="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView5"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="fill_parent"
            android:layout_height="65dp"
            android:layout_alignParentLeft="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView6"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView8"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView9"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView10"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout3"
            android:layout_width="fill_parent"
            android:layout_height="65dp"
            android:layout_alignParentLeft="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView11"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView12"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView13"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView14"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView15"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="fill_parent"
            android:layout_height="65dp"
            android:layout_alignParentLeft="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView16"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView17"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView18"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView19"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView20"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout5"
            android:layout_width="fill_parent"
            android:layout_height="65dp"
            android:layout_alignParentLeft="true"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imageView21"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView22"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView23"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView24"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

            <ImageView
                android:id="@+id/imageView25"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_margin="3dp"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/s2" />

        </LinearLayout>

        <LinearLayout android:id="@+id/linearLayout6" 
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_alignParentLeft="true" 
        android:layout_width="fill_parent"
        android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView26"
                android:layout_width="75dp"
                android:layout_height="60dp"
                android:layout_weight="1"
                android:src="@drawable/left" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="10dp"
                android:layout_height="60dp"
                android:layout_weight="1"
                android:text="1"
                android:textAlignment="center"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <ImageView
                android:id="@+id/imageView27"
                android:layout_width="75dp"
                android:layout_height="60dp"
                android:layout_weight="1"
                android:src="@drawable/right" />

        </LinearLayout>

        </LinearLayout>

Answer 1

尝试使用weighSum 和weight 之类的：

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:weightSum="5">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

      <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        />

      <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />
</LinearLayout>

参考此链接：http://developer.android.com/reference/android/widget/LinearLayout.html#attr_android:weightSum

希望它会有所帮助。

Answer 2

您可以通过使用ConstraintLayout 在屏幕中间创建一个正方形来解决此问题，然后将按钮和文本标签放置在其下方。无论屏幕大小，中间的正方形总是和宽度一样高，并且总是填满屏幕宽度。

请注意，这意味着如果屏幕处于横向，则顶部和底部将不可见。

我已将内容分解为更小的布局文件，这些文件可以<include>-ed 相互合并，以使内容尽可能可读。

• cell.xml

<View
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_margin="1dp"
    android:background="#7fc9a1"/>

• row.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal">

    <include layout="@layout/cell"/>
    <include layout="@layout/cell"/>
    <include layout="@layout/cell"/>
    <include layout="@layout/cell"/>
    <include layout="@layout/cell"/>

</LinearLayout>

• activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffd">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1">

        <include layout="@layout/row"/>
        <include layout="@layout/row"/>
        <include layout="@layout/row"/>
        <include layout="@layout/row"/>
        <include layout="@layout/row"/>

    </LinearLayout>

    <ImageView
        android:id="@+id/back"
        android:layout_width="75dp"
        android:layout_height="60dp"
        android:layout_marginLeft="48dp"
        app:layout_constraintTop_toBottomOf="@+id/container"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/label"
        app:srcCompat="@drawable/ic_chevron_left_black_24dp"/>

    <TextView
        android:id="@+id/label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        app:layout_constraintTop_toBottomOf="@+id/container"
        app:layout_constraintLeft_toRightOf="@+id/back"
        app:layout_constraintRight_toLeftOf="@+id/forward"
        tools:text="1"/>

    <ImageView
        android:id="@+id/forward"
        android:layout_width="75dp"
        android:layout_height="60dp"
        android:layout_marginRight="48dp"
        app:layout_constraintTop_toBottomOf="@+id/container"
        app:layout_constraintLeft_toRightOf="@+id/label"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@drawable/ic_chevron_right_black_24dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

获得中间方形视图的关键是app:layout_constraintDimensionRatio="1:1"属性。

手机预览：

平板预览：