Textviews неправильно расположены в Android
Я хочу разместить текстовые представления непосредственно под панелью поиска в Android. К сожалению, показанный макет в эмуляторе выглядит некорректно, хотя в редакторе макетов макет выглядит правильно. Вы можете увидеть это на скриншотах
Есть две проблемы:
- Текстовое представление слева от панели поиска находится слишком высоко, хотя в редакторе макета оно находится на том же уровне, что и панель поиска.
- Ярлыки для каждой точки панели поиска слишком сильно смещены в правую сторону.
Здесь у вас есть код XML-макета:
<?xml version = "1.0" encoding = "utf-8"?>
<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">
<TextView
android:id = "@+id/textView50"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "41dp"
android:layout_marginLeft = "41dp"
android:text = "50"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
app:layout_constraintStart_toEndOf = "@+id/textView40"
app:layout_constraintTop_toBottomOf = "@+id/seekBar"
app:layout_constraintVertical_bias = "0.1" />
<TextView
android:id = "@+id/textView60"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "41dp"
android:layout_marginLeft = "41dp"
android:text = "60"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
app:layout_constraintStart_toEndOf = "@+id/textView50"
app:layout_constraintTop_toBottomOf = "@+id/seekBar"
app:layout_constraintVertical_bias = "0.1" />
<ImageView
android:id = "@+id/imageView"
android:layout_width = "match_parent"
android:layout_height = "245dp"
android:scaleType = "fitXY"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.0"
tools:ignore = "ContentDescription" />
<TextView
android:id = "@+id/textViewS"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "RButton"
android:textColor = "#000000"
android:textSize = "20sp"
android:textStyle = "bold"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.016"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.395" />
<ImageButton
android:id = "@+id/commentButton"
android:layout_width = "100dp"
android:layout_height = "50dp"
android:background = "@null"
android:contentDescription = "comment_Button"
android:scaleType = "fitCenter"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.83"
app:srcCompat = "@mipmap/comment" />
<TextView
android:id = "@+id/textView2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "@string/comment"
android:textSize = "18dp"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.025"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.76" />
<Button
android:id = "@+id/o_button"
android:layout_width = "163dp"
android:layout_height = "72dp"
android:background = "@drawable/custom_button"
android:text = "Button"
android:textAllCaps = "false"
android:textColor = "#121212"
android:textSize = "25sp"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.5"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.87" />
<RadioGroup
android:id = "@+id/radioGroup_Size"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:orientation = "horizontal"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintVertical_bias = "0.4"
app:layout_constraintHorizontal_bias = "0.871"
app:layout_constraintTop_toTopOf = "parent">
<RadioButton
android:id = "@+id/r_Button_Small"
android:layout_width = "95dp"
android:layout_height = "35dp"
android:layout_weight = "1"
android:background = "@drawable/background_selector"
android:text = "@string/small"
android:textColor = "@drawable/text_selector"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.322"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
android:layout_marginLeft = "50dp"
app:layout_constraintVertical_bias = "0.584" />
<RadioButton
android:id = "@+id/r_Button_Medium"
android:layout_width = "95dp"
android:layout_height = "35dp"
android:layout_weight = "1"
android:background = "@drawable/background_selector"
android:checked = "true"
android:text = "@string/Medium"
android:textColor = "@drawable/text_selector"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.962"
app:layout_constraintStart_toStartOf = "parent"
android:layout_marginLeft = "10dp"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.583" />
<RadioButton
android:id = "@+id/r_Button_Large"
android:layout_width = "95dp"
android:layout_height = "35dp"
android:layout_marginLeft = "10dp"
android:layout_weight = "1"
android:background = "@drawable/background_selector"
android:text = "@string/Large"
android:textColor = "@drawable/text_selector"
app:layout_constraintBottom_toBottomOf = "parent"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.962"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toTopOf = "parent"
app:layout_constraintVertical_bias = "0.584" />
</RadioGroup>
<Spinner
android:id = "@+id/spinner1"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_marginStart = "130dp"
android:layout_marginLeft = "120dp"
android:layout_marginEnd = "70dp"
android:layout_marginRight = "80dp"
android:popupBackground = "#5fe0f5"
android:textSize = "25sp"
app:layout_constraintBottom_toTopOf = "@+id/spinner2"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.0"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/radioGroup_Size"
app:layout_constraintVertical_bias = "0.4" />
<Spinner
android:id = "@+id/spinner2"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:popupBackground = "#5fe0f5"
android:textSize = "120sp"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
app:layout_constraintEnd_toEndOf = "@id/spinner1"
app:layout_constraintHorizontal_bias = "0.59"
app:layout_constraintStart_toStartOf = "@id/spinner1"
app:layout_constraintTop_toBottomOf = "@+id/radioGroup_Size"
app:layout_constraintVertical_bias = "0.44" />
<TextView
android:id = "@+id/textView8"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "8dp"
android:layout_marginLeft = "8dp"
android:layout_marginTop = "32dp"
android:text = "Spinner 1"
android:textColor = "#000000"
android:textSize = "20sp"
android:textStyle = "bold"
app:layout_constraintEnd_toStartOf = "@+id/spinner1"
app:layout_constraintHorizontal_bias = "0.102"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/textViewS" />
<TextView
android:id = "@+id/textView9"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "4dp"
android:layout_marginLeft = "4dp"
android:layout_marginTop = "36dp"
android:layout_marginEnd = "28dp"
android:layout_marginRight = "28dp"
android:text = "Spinner 2"
android:textColor = "#000000"
android:textSize = "20sp"
android:textStyle = "bold"
app:layout_constraintEnd_toStartOf = "@+id/spinner2"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/textView8" />
<SeekBar
android:id = "@+id/seekBar"
style = "@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width = "260dp"
android:layout_height = "26dp"
android:layout_marginBottom = "60dp"
android:max = "4"
android:maxHeight = "4dip"
android:minHeight = "4dip"
android:progress = "2"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.89"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/spinner2"
app:layout_constraintVertical_bias = "1" />
<TextView
android:id = "@+id/textView10"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Seekbar"
android:textColor = "#000000"
android:textSize = "20sp"
android:textStyle = "bold"
app:layout_constraintBottom_toTopOf = "@+id/textView2"
app:layout_constraintEnd_toStartOf = "@+id/seekBar"
app:layout_constraintHorizontal_bias = "0.218"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/textView9"
app:layout_constraintVertical_bias = "0.45" />
<TextView
android:id = "@+id/textView30"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "57dp"
android:layout_marginLeft = "57dp"
android:text = "30"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
app:layout_constraintEnd_toStartOf = "@+id/textView12"
app:layout_constraintHorizontal_bias = "0.3"
app:layout_constraintStart_toEndOf = "@+id/textView2"
app:layout_constraintTop_toBottomOf = "@+id/seekBar"
app:layout_constraintVertical_bias = "0.1" />
<TextView
android:id = "@+id/textView40"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "41dp"
android:layout_marginLeft = "41dp"
android:text = "40"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
app:layout_constraintStart_toEndOf = "@+id/textView30"
app:layout_constraintTop_toBottomOf = "@+id/seekBar"
app:layout_constraintVertical_bias = "0.1" />
<TextView
android:id = "@+id/textView70"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "70"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
android:layout_marginStart = "42dp"
android:layout_marginLeft = "42dp"
app:layout_constraintStart_toEndOf = "@+id/textView60"
app:layout_constraintTop_toBottomOf = "@+id/seekBar"
app:layout_constraintVertical_bias = "0.1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Можете ли вы сказать мне, почему возникает эта проблема? Для меня это довольно странно, потому что в редакторе раскладок все отображается правильно и я не понимаю, почему вообще между редактором раскладок и раскладкой на эмуляторе в Android иногда бывают отличия. Я ценю каждый комментарий и был бы признателен за вашу помощь.
Ответы 1
Эй, я вижу здесь есть некоторые проблемы с ограничениями, которые вы установили и чего вы пытаетесь достичь: - В этом :-
<SeekBar
android:id = "@+id/seekBar"
style = "@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width = "260dp"
android:layout_height = "26dp"
android:layout_marginBottom = "60dp"
android:max = "4"
android:maxHeight = "4dip"
android:minHeight = "4dip"
android:progress = "2"
app:layout_constraintBottom_toTopOf = "@+id/o_button"
app:layout_constraintEnd_toEndOf = "parent"
app:layout_constraintHorizontal_bias = "0.89"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/spinner2"
app:layout_constraintVertical_bias = "1" />
<TextView
android:id = "@+id/textView10"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "Seekbar"
android:textColor = "#000000"
android:textSize = "20sp"
android:textStyle = "bold"
app:layout_constraintBottom_toTopOf = "@+id/textView2"
app:layout_constraintEnd_toStartOf = "@+id/seekBar"
app:layout_constraintHorizontal_bias = "0.218"
app:layout_constraintStart_toStartOf = "parent"
app:layout_constraintTop_toBottomOf = "@+id/textView9"
app:layout_constraintVertical_bias = "0.45" />
Вы можете видеть, что вы установили верхние и нижние ограничения Seekbar textview на app:layout_constraintBottom_toTopOf = "@+id/textView2" и app:layout_constraintTop_toBottomOf = "@+id/textView9" измените это на app:layout_constraintTop_toTopOf = "@id/seekBar" и app:layout_constraintBottom_toBottomOf = "@id/seekBar" Это сделает ваш Seekbar textview в центре вашего фактического seekbar.
Теперь, переходя к разделу values, я вижу, что вы не настроили свои представления должным образом, поэтому очень сложно найти, какое текстовое представление установлено, где из вашего XML-кода. Хотя я бы посоветовал вам взять макет constraint или linear с тем же width, что и ваш seekbar, и ниже seekbar, а затем установить текст в этом макете с помощью constraintWidthPercent (при использовании макета с ограничениями) в соответствии с максимальными значениями, которые у вас есть в вашем seekbar.
Вы написали: «Вы не настроили свои представления должным образом, поэтому очень сложно найти, какое текстовое представление установлено, где из вашего xml-кода». Вы используете Android Studio? Там вы можете просто скопировать и вставить мой XML-код в XML-файл, и тогда вы увидите, как они выровнены, и вы увидите, что они правильно выровнены в соответствии с редактором макетов. Как вы можете видеть на опубликованных снимках экрана, выравнивание для текстовых представлений значения правильное (я потратил довольно много времени, чтобы выровнять эти текстовые представления непосредственно под правильным местом seekBar).
Привет, @VanessaF, вы можете видеть в своем xml, что вы объявили свои textView50 и textView60 в первом, а затем в некоторых других представлениях, а затем приходит ваш другой texviews как textView3040 и так далее. Как вы говорите, что это в правильном формате?
Опять же, возвращаясь к linear layout, это хорошо, если у вас есть фиксированный размер, такой же, как у вашего seekbar размера, чтобы вы могли легко управлять макетами вместо того, чтобы вычислять для каждого из них.
Ваша проблема с просмотром текста SeekBar решена?
для использования "android:constraintWidthPercent = "60" вам нужно создать новый constraint layout внутри вашего layout с тем же размером, что и ваш seekbar
Спасибо Мохаммед Ханиф за ваши комментарии и усилия. Я очень ценю это. Да, моя проблема с просмотром текста на панели поиска была решена по вашему предложению. Большое спасибо за это. Тем не менее, я все еще борюсь с value-textViews
Вы проверили в Android Studio мой код? Редактор компоновки неправильно отображает value-textViews? Это было бы довольно удивительно, потому что в моем редакторе макетов Android Studio они отображаются правильно, но, как ни странно, в эмуляторе они все смещены вправо. Для меня это действительно странно, потому что почему редактор макетов отображает их правильно, а в эмуляторе они находятся на разных позициях. Я потратил довольно много времени, чтобы настроить представления значения-текста с помощью редактора макетов Android Studio.
Ханиф: Вы написали «textView50 и textView60 в первом, а затем некоторые другие представления, а затем идут другие ваши текстовые представления, такие как textView30 40 и так далее. Как вы говорите, что это в правильном формате?» --> в основном порядок не важен. насколько я понимаю. Вам просто нужно правильно установить ограничения, и, согласно редактору макетов Android Studio, отдельные текстовые представления находятся именно там, где они должны быть.
Привет, @VanessaF, боюсь, я не смогу скопировать это и проверить в студии Android. Однако вы можете использовать приведенную ниже библиотеку для достижения желаемого: github.com/warkiz/IndicatorSeekBar
Пожалуйста, проголосуйте и примите ответ, если он помог вам, чтобы другие могли легко его найти.
Спасибо Мохаммед Ханиф за ваш ответ. В основном я не хочу использовать какую-либо стороннюю библиотеку или код. Извини. Я проголосовал за ваш ответ, но не принял его, так как мой вопрос не был решен. Я до сих пор не понимаю, почему мои текстовые представления позиционируются правильно в соответствии с редактором макетов Android Studio, но неправильно отображаются в эмуляторе. Согласно редактору макетов, я все правильно выровнял.
Единственная проблема, которая, я думаю, заключается в ваших ограничениях, если вы измените редактор макета на какое-то другое устройство или в портретном режиме, тогда вы также можете увидеть в них разные результаты из-за ограничений.
Спасибо Мохаммеду Ханифу за ваши дальнейшие комментарии и усилия. Я очень ценю это. Да, в принципе, может быть проблема с ограничениями. Но вопрос в том, как мне правильно установить ограничения. С моей точки зрения, они установлены правильно.
Как я могу убедиться, что редактор макета отображает правильный макет, а не (как в моем случае) ложный макет?
Как сделать макет независимым от устройства, которое его отображает? В основном я всегда использую dp и sp, которые должны быть независимыми от устройства. Однако изменение макета эмулятора или LayoutEditor приводит к другим макетам. Вы знаете, как я могу решить такие проблемы?
Есть ли у вас какие-либо комментарии к моим последним 3 комментариям? Я был бы признателен за любые дальнейшие комментарии от вас.
Эй, единственный вариант - правильно установить ограничения. Например: - у вас есть ваш первый textView50 с некоторым запасом, а затем ваша панель поиска находится в центре экрана с некоторым горизонтальным смещением, так что на устройствах с маленьким размером экрана они могут быть слишком близко, а на устройствах с экраном karge или в портретном режиме они могут быть слишком далеко друг от друга в соответствии с вашим запасом. Вот почему я предложил вам использовать вложенные макеты в первую очередь.
Также я бы посоветовал вам использовать ssp и sdp вместо sp и dp. Вы можете найти подробности здесь: - github.com/intuit/ssp
Спасибо Мохаммеду Ханифу за ваш ответ и усилия. Я очень ценю это. Можно ли как-то масштабировать предопределенный макет на больший экран? Я создал много разных макетов (около 20), используя Constrained Layout, но, к сожалению, они хорошо смотрятся только на 5-дюймовом экране смартфона. Я думал, что при использовании sp, dp и ограниченного макета разработанный макет будет гибким.
Знаете ли вы какой-нибудь хороший учебник о том, как создавать макеты для нескольких экранов с использованием ограниченного макета? Официальная документация google (developer.android.com/training/constraint-layout) совсем плохая. Это на самом деле не объясняет, как вы должны проектировать свой макет.
Любые дальнейшие комментарии? Я был бы очень признателен.
Привет. Вы можете ознакомиться с этим: - developer.android.com/training/constraint-layout
Спасибо, Мохаммед Ханиф, за ваш комментарий. Как уже говорилось в моем последнем комментарии, я прочитал эту официальную страницу и думаю, что это очень плохо (я разместил ту же ссылку, что и вы). Он не объясняет, как вы должны разработать свой макет. Я просил учебник/веб-страницу, в которой объясняется, как вы должны разрабатывать свой макет с использованием ограниченного макета, чтобы макет выглядел хорошо на разных размерах экрана. Учебник должен быть лучше, чем эта (на мой взгляд) плохая страница разработчика Android
Откуда мне знать, как установить ограничения и поля каждого компонента в limitedLayout так, чтобы макет масштабировался до разных размеров экрана?
Вы всегда должны давать ограничение в отношении других представлений, например, если у вас есть одно текстовое поле в центре экрана, тогда вы должны указать другое текстовое поле в отношении этого, если это возможно, чтобы они оба выглядели в одной и той же позиции на разных экранах, и если вы перемещаете первое текстовое поле, затем другие текстовые поля обновляются соответственно.
Спасибо Мохаммеду Ханифу за ваш ответ и усилия. Я очень ценю вашу ценную помощь. У меня есть 2 вопроса относительно вашего комментария: 1) Как мне установить ограничения для других представлений? Каждый элемент имеет 4 возможных ограничения. Как мне узнать, сколько из них и каким образом я должен использовать (назначение ограничений)? 2) А как насчет размера кнопок, textViews и ImageViews? Как я могу спроектировать их так, чтобы они масштабировались до текущего размера макета. Если вы зафиксируете размер, он не будет масштабироваться, однако, если вы не зафиксируете, вам придется определить некоторые ограничения. я не понимаю как это сделать
для вашего первого вопроса, пожалуйста, посмотрите мой ответ еще раз, поскольку я установил нижнее и верхнее ограничения по отношению к вашей панели поиска, чтобы они были выровнены одинаково. аналогичным образом вы должны попытаться управлять как можно большим количеством ограничений по отношению к другим представлениям. для вашего второго вопроса вы можете использовать sdp и ssp.
Спасибо Мохаммеду Ханифу за ваш дальнейший ответ и поддержку. В вашем примере вы просто установили нижнее и верхнее ограничения. А как насчет горизонтальных ограничений слева и справа. Какой подход вы бы посоветовали мне выбрать для установки этих ограничений? Что касается sdp и ssp: я не хочу использовать какую-либо стороннюю библиотеку, а просто официально признал и оценил элементы Android. Насколько я знаю, ваша опубликованная ссылка на githut не является официальной, и поэтому я не могу представить, что это лучшая практика для высококачественной разработки Android. Как я могу установить размер рекомендуемым способом
Любые дополнительные комментарии к моему последнему комментарию? Буду очень признателен, так как не знаю что делать.
Как мне установить ограничения и поля?
Спасибо Мохаммеду Ханифу за вашу большую помощь и усилия. я принял твой ответ
Спасибо Мохаммед Ханиф за ваш ответ. По сути, я не хочу использовать LinearLayout, потому что тогда у меня будет много вложенных представлений, и это усложняется. Поэтому я не понимаю, как реализовать ваше предложение, поскольку я уже использовал ConstrainedLayout. Далее я попробовал атрибут "android:constraintWidthPercent = "60"" и другие значения в textViews, но, похоже, это не дало никакого эффекта.