Исходя из iOS
и Xcode
I ', запутался в компоновке и ограничениях в android studio
. В настоящее время мой макет выглядит так, что подходит для телефона небольшого размера. Но на телефоне с большой высотой он оставляет большое пространство внизу. Я хочу, чтобы макет соответствовал высоте телефона.
Мой XML
выглядит так:
<?xml version = "1.0" encoding = "utf-8"?>
<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:theme = "@style/NoBar"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "@color/colorWhite"
tools:context = "com.sdc_nollvision_relative.myapp.MainActivity">
<ImageView
android:id = "@+id/logo"
android:layout_width = "80dp"
android:layout_height = "70dp"
android:scaleType = "centerCrop"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:srcCompat = "@drawable/logo" />
<TextView
android:id = "@+id/main_header"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:elevation = "3dp"
android:text = "DEMENSVÅRD"
android:textAlignment = "center"
android:textAppearance = "@style/TextAppearance.AppCompat.Title"
android:textColor = "@android:color/black"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/logo" />
<TextView
android:id = "@+id/subHeader"
android:typeface = "monospace"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:text = "UTAN TVÅNG"
android:textAlignment = "center"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/main_header" />
<TextView
android:id = "@+id/chapter1Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
android:typeface = "serif"
app:layout_constraintBottom_toBottomOf = "@+id/chapter1"
app:layout_constraintEnd_toEndOf = "@+id/chapter1"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder1"
app:layout_constraintTop_toTopOf = "@+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app = "http://schemas.android.com/apk/res-auto"
android:id = "@+id/iconHolder1"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon1"
app:civ_border_color = "@color/colorPrimary"
app:civ_border_width = "0dp"
app:layout_constraintBottom_toBottomOf = "@+id/chapter1"
app:layout_constraintStart_toStartOf = "@+id/chapter1"
app:layout_constraintTop_toTopOf = "@+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app = "http://schemas.android.com/apk/res-auto"
android:id = "@+id/iconHolder2"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon2"
app:civ_border_color = "@color/chapter1"
app:civ_border_width = "0dp"
app:layout_constraintBottom_toBottomOf = "@+id/chapter2"
app:layout_constraintStart_toStartOf = "@+id/chapter2"
app:layout_constraintTop_toTopOf = "@+id/chapter2" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app = "http://schemas.android.com/apk/res-auto"
android:id = "@+id/iconHolder3"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon3"
app:layout_constraintBottom_toBottomOf = "@+id/chapter3"
app:layout_constraintStart_toStartOf = "@+id/chapter3"
app:layout_constraintTop_toTopOf = "@+id/chapter3" />
<de.hdodenhof.circleimageview.CircleImageView xmlns:app = "http://schemas.android.com/apk/res-auto"
android:id = "@+id/iconHolder4"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon4"
app:layout_constraintBottom_toBottomOf = "@+id/chapter4"
app:layout_constraintStart_toStartOf = "@+id/chapter4"
app:layout_constraintTop_toTopOf = "@+id/chapter4" />
<Button
android:id = "@+id/chapter1"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@drawable/backgroundview"
android:elevation = "0dp"
android:text = ""
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/subHeader" />
<TextView
android:id = "@+id/chapter2Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
app:layout_constraintBottom_toBottomOf = "@+id/chapter2"
app:layout_constraintEnd_toEndOf = "@+id/chapter2"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder2"
app:layout_constraintTop_toTopOf = "@+id/chapter2" />
<Button
android:id = "@+id/chapter2"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@drawable/backgroundview"
android:elevation = "0dp"
android:text = ""
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter1" />
<TextView
android:id = "@+id/chapter3Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
app:layout_constraintBottom_toBottomOf = "@+id/chapter3"
app:layout_constraintEnd_toEndOf = "@+id/chapter3"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder3"
app:layout_constraintTop_toTopOf = "@+id/chapter3" />
<Button
android:id = "@+id/chapter3"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@drawable/backgroundview"
android:elevation = "0dp"
android:text = ""
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter2" />
<TextView
android:id = "@+id/chapter4Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
app:layout_constraintBottom_toBottomOf = "@+id/chapter4"
app:layout_constraintEnd_toEndOf = "@+id/chapter4"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder4"
app:layout_constraintTop_toTopOf = "@+id/chapter4" />
<Button
android:id = "@+id/chapter4"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@drawable/backgroundview"
android:elevation = "0dp"
android:text = ""
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter3" />
<ImageButton
android:id = "@+id/about_button"
android:layout_width = "15dp"
android:layout_height = "35dp"
android:layout_marginEnd = "8dp"
android:layout_marginRight = "24dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:background = "#0000"
android:scaleType = "fitXY"
android:src = "@drawable/about"
app:layout_constraintEnd_toStartOf = "@+id/language_button"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintStart_toEndOf = "@+id/version_button"
app:layout_constraintTop_toBottomOf = "@+id/chapter4" />
<Button
android:id = "@+id/version_button"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "24dp"
android:layout_marginTop = "4dp"
android:background = "@color/colorWhite"
android:text = "version"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter4" />
<Button
android:id = "@+id/language_button"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginEnd = "24dp"
android:layout_marginTop = "4dp"
android:background = "@color/colorWhite"
android:text = "language"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter4" />
И да, я в курсе, что у меня фиксированный размер кнопок. Но я понятия не имею, как заставить их динамически повторять высоту телефона. Извините за такой простой вопрос, но я все еще изучаю основы здесь :)
Вам предстоит построить вертикальную цепочку элементов. Ознакомьтесь с подробным объяснением здесь: https://medium.com/@nomanr/constraintlayout-chains-4f3b58ea15bb
Вам нужно создать вертикальную цепочку с ее chainStyle
как spread
или spread_inside
, чтобы добиться того, чего вы хотите, с небольшими настройками полей и отступов для ваших самых верхних и самых нижних представлений.
Код XML:
<?xml version = "1.0" encoding = "utf-8"?>
<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:theme = "@android:style/Theme.NoTitleBar.Fullscreen"
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "@android:color/white"
tools:context = "com.stackoverflow.MainActivity">
<ImageView
android:id = "@+id/logo"
android:layout_width = "80dp"
android:layout_height = "70dp"
android:scaleType = "centerCrop"
app:layout_constraintBottom_toTopOf = "@+id/main_header"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_chainStyle = "spread"
app:srcCompat = "@android:drawable/btn_star_big_on" />
<TextView
android:id = "@+id/main_header"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:elevation = "3dp"
android:text = "DEMENSVÅRD"
android:textAlignment = "center"
android:textAppearance = "@style/TextAppearance.AppCompat.Title"
android:textColor = "@android:color/black"
app:layout_constraintBottom_toTopOf = "@+id/subHeader"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/logo" />
<TextView
android:id = "@+id/subHeader"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:text = "UTAN TVÅNG"
android:textAlignment = "center"
android:typeface = "monospace"
app:layout_constraintBottom_toTopOf = "@+id/chapter1"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/main_header" />
<TextView
android:id = "@+id/chapter1Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
android:typeface = "serif"
app:layout_constraintBottom_toBottomOf = "@+id/chapter1"
app:layout_constraintEnd_toEndOf = "@+id/chapter1"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder1"
app:layout_constraintTop_toTopOf = "@+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView
android:id = "@+id/iconHolder1"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon1"
app:civ_border_color = "@color/colorPrimary"
app:civ_border_width = "0dp"
app:layout_constraintBottom_toBottomOf = "@+id/chapter1"
app:layout_constraintStart_toStartOf = "@+id/chapter1"
app:layout_constraintTop_toTopOf = "@+id/chapter1" />
<de.hdodenhof.circleimageview.CircleImageView
android:id = "@+id/iconHolder2"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon2"
app:civ_border_color = "@color/chapter1"
app:civ_border_width = "0dp"
app:layout_constraintBottom_toBottomOf = "@+id/chapter2"
app:layout_constraintStart_toStartOf = "@+id/chapter2"
app:layout_constraintTop_toTopOf = "@+id/chapter2" />
<de.hdodenhof.circleimageview.CircleImageView
android:id = "@+id/iconHolder3"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon3"
app:layout_constraintBottom_toBottomOf = "@+id/chapter3"
app:layout_constraintStart_toStartOf = "@+id/chapter3"
app:layout_constraintTop_toTopOf = "@+id/chapter3" />
<de.hdodenhof.circleimageview.CircleImageView
android:id = "@+id/iconHolder4"
android:layout_width = "80dp"
android:layout_height = "0dp"
android:elevation = "3dp"
android:padding = "8dp"
android:src = "@drawable/icon4"
app:layout_constraintBottom_toBottomOf = "@+id/chapter4"
app:layout_constraintStart_toStartOf = "@+id/chapter4"
app:layout_constraintTop_toTopOf = "@+id/chapter4" />
<Button
android:id = "@+id/chapter1"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@android:drawable/spinner_background"
android:elevation = "0dp"
android:text = ""
app:layout_constraintBottom_toTopOf = "@+id/chapter2"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/subHeader" />
<TextView
android:id = "@+id/chapter2Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
app:layout_constraintBottom_toBottomOf = "@+id/chapter2"
app:layout_constraintEnd_toEndOf = "@+id/chapter2"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder2"
app:layout_constraintTop_toTopOf = "@+id/chapter2" />
<Button
android:id = "@+id/chapter2"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@android:drawable/spinner_background"
android:elevation = "0dp"
android:text = ""
app:layout_constraintBottom_toTopOf = "@+id/chapter3"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter1" />
<TextView
android:id = "@+id/chapter3Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
app:layout_constraintBottom_toBottomOf = "@+id/chapter3"
app:layout_constraintEnd_toEndOf = "@+id/chapter3"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder3"
app:layout_constraintTop_toTopOf = "@+id/chapter3" />
<Button
android:id = "@+id/chapter3"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@android:drawable/spinner_background"
android:elevation = "0dp"
android:text = ""
app:layout_constraintBottom_toTopOf = "@+id/chapter4"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter2" />
<TextView
android:id = "@+id/chapter4Header"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:elevation = "3dp"
android:text = "Placeholder"
android:textColor = "@android:color/black"
android:textSize = "18sp"
android:textStyle = "bold"
app:layout_constraintBottom_toBottomOf = "@+id/chapter4"
app:layout_constraintEnd_toEndOf = "@+id/chapter4"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toEndOf = "@+id/iconHolder4"
app:layout_constraintTop_toTopOf = "@+id/chapter4" />
<Button
android:id = "@+id/chapter4"
android:layout_width = "0dp"
android:layout_height = "75dp"
android:layout_marginLeft = "24dp"
android:layout_marginRight = "24dp"
android:layout_marginTop = "8dp"
android:background = "@android:drawable/spinner_background"
android:elevation = "0dp"
android:text = ""
app:layout_constraintBottom_toTopOf = "@+id/about_button"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter3" />
<ImageButton
android:id = "@+id/about_button"
android:layout_width = "15dp"
android:layout_height = "35dp"
android:layout_marginBottom = "8dp"
android:layout_marginEnd = "8dp"
android:layout_marginStart = "8dp"
android:layout_marginTop = "8dp"
android:background = "#0000"
android:scaleType = "fitXY"
android:src = "@android:drawable/btn_star_big_on"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toStartOf = "@+id/language_button"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintStart_toEndOf = "@+id/version_button"
app:layout_constraintTop_toBottomOf = "@+id/chapter4"
app:layout_constraintVertical_bias = "0.0" />
<Button
android:id = "@+id/version_button"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "24dp"
android:layout_marginTop = "4dp"
android:background = "@android:color/white"
android:text = "version"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter4" />
<Button
android:id = "@+id/language_button"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginEnd = "24dp"
android:layout_marginTop = "4dp"
android:background = "@android:color/white"
android:text = "language"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/chapter4" />
</android.support.constraint.ConstraintLayout>
Скриншоты (для приведенного выше кода):
1] Для экрана размером 5,0 дюйма (1080 x 1920 пикселей) [Устройство: Nexus 5]
2] Для экрана - 7,0 дюйма (1200 x 1920 пикселей) [Устройство: Nexus 7]
Для получения дополнительной информации о том, как создать цепочку в ConstraintLayout
, ее правильном использовании и различных стилях цепочки, пожалуйста, пройдите:
https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains
Я надеюсь, это поможет вам.
Потрясающие! Большое спасибо за то, что нашли время, чтобы помочь мне! :) Действительно ценю это :)