我在我的应用程序中使用ConstraintLayout
来进行应用程序布局。我正在尝试创建一个屏幕,其中一个EditText
和Button
应位于中心,Button
应低于EditText
且marginTop仅为16dp。
这是我的布局和屏幕截图,现在看起来如何。
activity_authenticate_content.xml
<android.support.constraint.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:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context="com.icici.iciciappathon.login.AuthenticationActivity">
<android.support.design.widget.TextInputLayout
android:id="@+id/client_id_input_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_client_id"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.v7.widget.AppCompatButton
android:id="@+id/authenticate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="@string/login_auth"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
app:layout_constraintTop_toTopOf="@id/client_id_input_layout" />
</android.support.constraint.ConstraintLayout>
答案 0 :(得分:239)
有一种更简单的方法。如果您按如下方式设置布局约束,并且EditText的大小是固定的,则它将在约束布局中居中:
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
左/右对水平居中视图,顶/底对垂直居中。这是因为当您设置左,右或顶部,底部约束大于其自身的视图时,视图将在两个约束之间居中,即偏差设置为50%。您也可以通过设置偏差来上/下或左/右移动视图。稍微玩一下,你会看到它如何影响观点位置。
答案 1 :(得分:108)
<强>链强>
您现在可以使用chain
模式中的packed
功能,如Eugene的回答所述。
<强>准则强>
您可以在50%位置使用水平指南,并在编辑文字和按钮时添加底部和顶部(8dp)约束:
<android.support.constraint.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:paddingLeft="16dp"
android:paddingRight="16dp">
<android.support.design.widget.TextInputLayout
android:id="@+id/client_id_input_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="@+id/guideline"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_client_id"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>
<android.support.v7.widget.AppCompatButton
android:id="@+id/authenticate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/login_auth"
app:layout_constraintTop_toTopOf="@+id/guideline"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
</android.support.constraint.ConstraintLayout>
答案 2 :(得分:45)
带有指南的解决方案仅适用于具有单行EditText的此特定情况。要使其适用于多行EditText,您应该使用&#34; packed&#34;链
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<android.support.design.widget.TextInputLayout
android:id="@+id/client_id_input_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="@+id/authenticate"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_client_id"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.v7.widget.AppCompatButton
android:id="@+id/authenticate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="@string/login_auth"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@id/client_id_input_layout"
app:layout_constraintRight_toRightOf="@id/client_id_input_layout"
app:layout_constraintTop_toBottomOf="@id/client_id_input_layout" />
</android.support.constraint.ConstraintLayout>
以下是它的外观:
您可以在以下帖子中阅读有关使用链的更多信息:
答案 3 :(得分:6)
您可以将视图居中显示为屏幕尺寸的百分比。
此示例使用50%的宽度和高度:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF0000"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent=".5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent=".5"></LinearLayout>
</android.support.constraint.ConstraintLayout>
这是使用ConstraintLayout 1.1.3版完成的。不要忘记将其添加到gradle中的依赖项中,如果有新版本,请增加版本:
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}
答案 4 :(得分:5)
将这些标签添加到您的视图中
app:layout_constraintCircleRadius="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
,您可以在设计模式下单击鼠标右键,然后选择“中心”。
答案 5 :(得分:3)
您可以将layout_constraintCircle用于ConstraintLayout中的中心视图。
<android.support.constraint.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:id="@+id/mparent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="@+id/btn_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_home_black_24dp"
app:layout_constraintCircle="@id/mparent"
app:layout_constraintCircleRadius="0dp"
/>
</android.support.constraint.ConstraintLayout>
在constraintCircle到父级且半径为零的情况下,可以使视图成为父级的中心。
答案 6 :(得分:3)
只需添加
android:gravity="center"
完成:)
答案 7 :(得分:1)
使用
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
示例
<ImageView
android:id="@+id/ivIcohn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_background"
android:contentDescription="@string/app_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />