Выравнивание пользовательского интерфейса выглядит не очень хорошо, отображаются точки, как это исправить?
Я пытаюсь создать тот дизайн, который уже завершен с использованием UIKit.
Для завершения используется тот же подход, но результат выглядит не очень хорошо.
Пожалуйста, найдите мой код ниже:
struct LoanHistoryView: View {
let listContorller = LoanHistoryController()
var body: some View {
return NavigationView {
List{
ForEach(listContorller.listOfValues, id: \.self){text in
HistoryContentView()
.background(Color.white)
}
.cornerRadius(10)
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
}
.background(.green.opacity(0.6))
.listStyle(.plain)
.navigationTitle("LOAN HISTORY")
}
}
}
struct HistoryContentView: View {
var body: some View {
VStack {
HStack{
VStack(alignment: .leading){
Text("KW123456789066788")
.foregroundColor(.red)
Text("KARTHI | 7502875893")
.foregroundColor(.black)
}
Spacer()
HStack{
VStack{
Image(systemName: "menucard")
Text("REPORT")
}
VStack{
Image(systemName: "menucard")
Text("DOCUMENTS")
}
VStack{
Image(systemName: "menucard")
Text("CONTACT")
}
}
}
VStack(spacing: 10.0) {
Divider()
.frame(height: 1)
.background(.gray)
HStack(){
Text("HYNDAI CRETA 1.5 - CHENNAI")
.foregroundColor(.black)
Spacer()
Text("NEW-PRIVATE")
.foregroundColor(.cyan)
}
HStack(){
VStack(alignment: .leading, spacing: 10.0){
Text("REGNO")
Text("TN09CQ0925")
.bold()
}
Spacer()
VStack(alignment: .leading, spacing: 10.0){
Text("TENURE")
Text("60 MONTHS")
.bold()
}
Spacer()
VStack(alignment: .leading, spacing: 10.0){
Text("EMI")
Text("23456")
.bold()
}
Spacer()
VStack(alignment: .leading, spacing: 10.0){
Text("LOAN AMOUNT")
Text("3446667")
.bold()
}
}.foregroundColor(.black)
HStack(){
VStack(alignment: .leading, spacing: 10.0){
Text("DEALER")
Text("KUWY001")
.bold()
}
VStack(alignment: .leading, spacing: 10.0){
Text("LOS NUMBER")
Text("5678JKSKS888")
.bold()
}
Spacer()
}.foregroundColor(.black)
HStack {
VStack(alignment: .leading, spacing: 10.0){
Text("AXIS BANK")
Text("TEST CASE REJECED BY KAMS")
.foregroundColor(.red)
}
Spacer()
}
VStack{
HStack {
Spacer()
Text("22-04-2024")
}
HStack {
Spacer()
Button(action: {
// Button action
}) {
Text("HELP")
.foregroundColor(.blue)
.underline()
}
}
}
}
Spacer()
}
.padding(10)
// .scaledToFit()
// .padding(.all, 5)
// HStack {
// VStack(alignment: .leading) {
// Text("KW123456789066788")
// .foregroundColor(.red)
// .font(.title3)
// Text("KARTHIKEYAN | 7502875893")
// .foregroundColor(.black)
// .font(.title3)
// }
// Spacer()
// Button(action: {
// // Action for DOCUMENT button
// print("DOCUMENT button tapped")
// }) {
// VStack {
// Image(systemName: "doc.text")
// .font(.title)
// Text("DOCUMENT")
// .foregroundColor(.black)
// .font(.title3)
// }
// .padding()
// }
//
// Button(action: {
// // Action for OFFER button
// print("OFFER button tapped")
// }) {
// VStack {
// Image(systemName: "indianrupeesign.arrow.circlepath")
// .font(.title)
// Text("OFFER")
// .foregroundColor(.black)
// .font(.title3)
// }
// .padding()
// }
// Button(action: {
// // Action for CONTACT button
// print("CONTACT button tapped")
// }) {
// VStack {
// Image(systemName: "phone.connection")
// .font(.title)
// Text("CONTACT")
// .foregroundColor(.black)
// .font(.title3)
// }
// .padding()
// }
//
// }.padding(.all, 20)
}
}
Желаемый результат:
Текущий выход:
Я только что попробовал первую строку Hstack, как вы можете видеть по коду. Почему кнопки выглядят некрасиво? Я обновлю свой код..
Вы можете проверить мой обновленный вопрос: есть ли способ контролировать размер шрифта глобально? Почему название кнопки уменьшается?
@karthikeyan шрифт по умолчанию для Text, как указано в документации, — Body. Вы изменили шрифт для своей версии UIKit?
Да, я настраивал вручную, а здесь размер шрифта не задавал. Как сделать пользовательский интерфейс лучше? Нужно ли мне устанавливать размер шрифта для каждой страницы или есть способ обработать все это в одном месте?
@karthikeyan, ты можешь добавить .font(.caption2) к HistoryContentView()
Ответы 1
Вы можете приблизиться к желаемому результату, внеся несколько небольших изменений:
1. Масштабируйте изображения до необходимого размера.
Что-то вроде:
Image(systemName: "menucard")
.resizable()
.scaledToFit()
.frame(width: 30, height: 30)
2. Установите меньший общий размер шрифта и установите ширину .compressed.
VStack {
// ...
}
.padding(10)
.font(.subheadline)
.fontWidth(.compressed)
Вместо этого вы можете применять стиль сжатого шрифта более избирательно (другими словами, применять его только к выбранным частям контента, где он действительно необходим).
3. Используйте еще более мелкие шрифты для строк с подробными сведениями.
Например, используйте .footnote или даже .caption, если нужен шрифт поменьше.
4. Запретите обрезание текста там, где это необходимо.
Усечение текста (с помощью многоточий) можно предотвратить, установив ограничение на строку, а затем разрешив масштабирование шрифта в соответствии с доступным пространством. Возьмем HStack с иконками в качестве примера:
HStack{
// ...
}
.font(.caption)
.allowsTightening(true)
.lineLimit(1)
.minimumScaleFactor(0.5)
5. Используйте Grid для строк с подробностями.
Используя Grid, второй ряд деталей можно выровнять с первым рядом деталей.
- Используйте
Gridв качестве внешнего контейнера для строк, напримерVStack. - Замените вложенный
HStackнаGridRow. - Примените
.gridCellColumns(2)к содержимому, которое должно занимать ширину в 2 ячейки. - Включите
Divider()в качестве первой строки сетки, так как это заставит сетку использовать всю ширину экрана.
6. Удалите последний Spacer
Эта проставка добавляла ненужное пространство внизу.
Вот полностью обновленный код:
VStack {
HStack {
VStack(alignment: .leading) {
Text("KW123456789066788")
.foregroundColor(.red)
Text("KARTHI | 7502875893")
.foregroundColor(.black)
}
Spacer()
HStack {
VStack {
Image(systemName: "menucard")
.resizable()
.scaledToFit()
.frame(width: 30, height: 30)
Text("REPORT")
}
VStack {
Image(systemName: "menucard")
.resizable()
.scaledToFit()
.frame(width: 30, height: 30)
Text("DOCUMENTS")
}
VStack {
Image(systemName: "menucard")
.resizable()
.scaledToFit()
.frame(width: 30, height: 30)
Text("CONTACT")
}
}
.font(.caption)
.allowsTightening(true)
.lineLimit(1)
.minimumScaleFactor(0.5)
}
VStack(spacing: 10) {
Grid(alignment: .leading, verticalSpacing: 10) {
Divider()
.frame(height: 1)
.background(.gray)
.gridCellColumns(4)
GridRow {
Text("HYNDAI CRETA 1.5 - CHENNAI")
.foregroundColor(.black)
.gridCellColumns(3)
Text("NEW-PRIVATE")
.foregroundColor(.cyan)
}
GridRow {
VStack(alignment: .leading, spacing: 10.0) {
Text("REGNO")
Text("TN09CQ0925")
.bold()
}
VStack(alignment: .leading, spacing: 10.0) {
Text("TENURE")
Text("60 MONTHS")
.bold()
}
VStack(alignment: .leading, spacing: 10.0) {
Text("EMI")
Text("23456")
.bold()
}
VStack(alignment: .leading, spacing: 10.0) {
Text("LOAN AMOUNT")
Text("3446667")
.bold()
}
}
GridRow {
VStack(alignment: .leading, spacing: 10.0) {
Text("DEALER")
Text("KUWY001")
.bold()
}
.gridCellColumns(2)
VStack(alignment: .leading, spacing: 10.0) {
Text("LOS NUMBER")
Text("5678JKSKS888")
.bold()
}
.gridCellColumns(2)
}
.foregroundColor(.black)
.font(.footnote)
}
HStack {
VStack(alignment: .leading, spacing: 10.0) {
Text("AXIS BANK")
Text("TEST CASE REJECED BY KAMS")
.foregroundColor(.red)
}
Spacer()
}
VStack {
HStack {
Spacer()
Text("22-04-2024")
}
HStack {
Spacer()
Button(action: {
// Button action
}) {
Text("HELP")
.foregroundColor(.blue)
.underline()
}
}
}
}
}
.padding(10)
.font(.subheadline)
.fontWidth(.compressed)
И вот как это выглядит:
Если бы текстовые элементы были смешанного регистра (а не только прописными), их было бы легче читать, и вы, вероятно, могли бы в некоторых местах убрать сжатый стиль шрифта. Текст в верхнем регистре требует большей ширины, чем в смешанном регистре.
Как насчет пользовательского шрифта? Приятно узнать о функции GridRow и сжатии шрифтов, но пользовательский интерфейс кажется сжатым. Большое спасибо за помощь☺️☺️
Правильно ли я выполнил процедуру? Я вижу много повторяющегося кода и кажется, что большая часть кода предназначена только для пользовательского интерфейса.
Какой из них лучше, как предложил @Carsten, или ваш ответ?
@karthikeyan Я бы предпочел .fontWidth(.condensed) ИМХО, это более читабельно. Вы также можете вложить HStack и VStack другим способом, чтобы добиться того же макета, хотя Grid лучше подходит для выравнивания. Как он упомянул, вам следует точно определить макет, чтобы получить подвеску UIKit.
@karthikeyan Не знаю, видели ли вы примечание в конце (после скриншота), я добавил его в редактирование. Если вы можете отказаться от текста, состоящего только из заглавных букв, то, вероятно, в большинстве случаев вы сможете избежать использования сжатого шрифта (он все равно может понадобиться для меток изображений). Затем я бы предложил попробовать разные размеры шрифта, чтобы увидеть, какой подходит и что выглядит хорошо, используя методы, описанные в пункте 4, чтобы избежать усечения. Пс. Спасибо, что приняли ответ!
Спасибо, @Carsten. Больше практики поможет мне избежать этой проблемы в будущем, и мне нужно практиковаться в написании меньшего кода.
@Carsten Как наложить кнопку Trackloan. Я пробовал использовать zstack со смещением, но выходит внутри представления ячейки.
@BenzyNeez Как наложить кнопку Trackloan. Я пробовал использовать zstack со смещением, но выходит внутри представления ячейки.
@karthikeyan Я бы предложил применить его к внешнему VStack как .overlay(alignment: .bottom). Если вы добавите немного нижнего отступа к VStack перед добавлением наложения, наложение будет поверх отступа -> смещение не требуется.
@BenzyNeez Я добавил его, но оно отличается от изображения выше .overlay( GradientButtonView() .frame(maxWidth: .infinity) .alignmentGuide(.bottom) { $0[.bottom]} // Выравнивание по нижней части VStack // .alignmentGuide(.top) { $0[.bottom] - 20 }, выравнивание: .bottom)
у тебя есть скайп? Пожалуйста, поделитесь этим, если хотите помочь
@karthikeyan Если у вас возникли трудности, я бы предложил опубликовать это как новый вопрос. Вам нужно всего лишь показать большой пустой контейнер с помощью кнопки внизу -> сделать это просто, чтобы любой, кто хочет помочь, мог воспроизвести проблему.
@BenzyNeez Можете ли вы помочь с этим stackoverflow.com/questions/78338474/… не могу найти помощь
Очень запутанный вопрос: желаемый результат содержит одну запись, но фактический результат содержит список записей, и эти записи даже близко не соответствуют желаемому. Вы не можете ожидать, что мы поймем вашу проблему только по двум очень разным изображениям, поэтому вам необходимо предоставить лучшее объяснение того, что не так.