使用ConstraintLayout

时间：2019-06-05 14:59:11

标签： android xml android-constraintlayout android-scrollview android-imagebutton

TL; DR

我想将ImageButton中的ScrollView居中对齐，我对纵向模式下的结果感到非常满意。但是，对于风景模式，我不能说相同的话，将不胜感激。

但是让我解释一下

我在这里使用两个布局文件；第一个是我用于MainActivity类的课程，称为activity_main.xml。当fragment_main.xml加载activity_main.xml时，第二个（称为MainActivity）嵌套到MainFragment中。

fragment_main.xml的预览在纵向和横向模式下看起来很有希望： fragment_main.xml in landscape fragment_main.xml in portrait

在纵向模式下activity_main.xml的呈现方式恰好是我想要的样子： activity_main.xml in portrait

但是，activity_main.xml在横向模式下看起来很奇怪，我不知道为什么： activity_main.xml in landscape

以下是activity_main.xml和fragment_main.xml的XML合并为ScollView的子代：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:titleTextAppearance="@style/Toolbar.TitleText"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <ScrollView
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="?attr/actionBarSize"
            app:layout_constraintTop_toBottomOf="@id/toolbar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent">

            <!-- Content of fragment_main.xml -->
            <androidx.constraintlayout.widget.ConstraintLayout
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingStart="50dp"
                android:paddingEnd="50dp"
                tools:context=".MainFragment">


                <ImageButton
                    android:id="@+id/overlay_button"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="@null"
                    android:contentDescription="@string/start_speedometer"
                    android:scaleType="fitCenter"
                    android:src="@drawable/btn_circle_green"
                    app:layout_constraintDimensionRatio="1:1"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"/>

                <TextView
                    android:id="@+id/overlay_button_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="false"
                    android:text="@string/start_speedometer"
                    android:textColor="@color/white"
                    android:textSize="40sp"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"/>

            </androidx.constraintlayout.widget.ConstraintLayout>

        </ScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="false"
        app:menu="@menu/nav_drawer_view"
        app:headerLayout="@layout/nav_drawer_header"
        app:itemIconTint="@drawable/nav_drawer_item_icon_color"
        app:itemTextColor="@drawable/nav_drawer_item_text_color" />

</androidx.drawerlayout.widget.DrawerLayout>

我正在寻找仅需对fragment_main.xml（即ScollView内部的所有内容）进行更改的解决方案。该解决方案应仅涉及XML。

我尝试过的

我尝试摆弄app:layout_constraintDimensionRatio（W,1:1，H,1:1），app:layout_constrainedHeight，app:layout_constraintHeight_max，layout_constraintHeight_min，许多其他约束和甚至尝试将fragment_main.xml的内容嵌套在其他布局中，从ConstraintLayout移至RelativeLayout，LinearLayout和FrameLayout，但没有一个给我想要的结果， ConstraintLayout是最接近的那个。

可能的解决方案

到目前为止，唯一可行的解​​决方案是使用app:layout_constraintWidth_default="percent"和app:layout_constraintWidth_percent="0.5" desired look of activity_main.xml in landscape

虽然在16：9的手机上看起来不错，但可能会导致在使用宽高比不同的手机时出现与以前相同的问题。因此，我正在寻找一种更通用的方法。

其他详细信息

这是我用于按钮的可绘制btn_circle_green.xml的内容：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ic_circle_green_pressed" />
    <item android:state_focused="true" android:drawable="@drawable/ic_circle_green_focused" />
    <item android:state_selected="true" android:drawable="@drawable/ic_circle_green_focused" />
    <item android:drawable="@drawable/ic_circle_green_default" />
</selector>

每个ic_circle_green_*都是带有不同颜色的矢量资产，

<vector
    android:viewportWidth="300"
    android:viewportHeight="300"
    android:height="120dp"
    android:width="120dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@color/green"
        android:pathData="M150,150m-140,0a140,140 0,1 1,280 0a140,140 0,1 1,-280 0"
        android:strokeWidth="5"
        android:strokeColor="@color/green_light"/>
</vector>

非常感谢！

1 个答案:

答案 0 :(得分：0)

在我意识到ScrollView是使我头疼的元素（再次感谢@glucaio！）之后，我发现this answer并能够解决我的问题。

ScrollView收到android:fitsSystemWindows="true"，内部ConstraintLayout的宽度和高度属性已切换（android:layout_width="wrap_content"和android:layout_height="match_parent"），收到了{{1 }}和paddingTop（而不是paddingBottom和paddingStart）并包装在paddingEnd中：

LinearLayout

此解决方案仅适用于横向模式。因此，我将这个答案中的一个用于风景，将我的问题中的一个用于肖像模式。

这是用于风景模式的最终XML的样子：

Rendered activity_main.xml

这是实际的XML：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center" />
相关问题
最新问题