#android #android-studio
Вопрос:
Я создаю приложение, и я не могу понять, как я могу сделать так, чтобы мое приложение не ломалось на определенных размерах экрана. Я хочу, чтобы приложение имело стандартный внешний вид на всех устройствах.
как это должно выглядеть здесь
<ImageView
android:scaleType="fitXY"
android:id="@ id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/hub_background" />
<androidx.constraintlayout.widget.Guideline
android:id="@ id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="19dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@ id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="19dp" />
<ImageView
android:translationZ="3dp"
android:id="@ id/background2"
android:layout_width="409dp"
android:layout_height="1200dp"
android:adjustViewBounds="true"
android:maxWidth="302dp"
android:maxHeight="722dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@drawable/start_anim_background_color"
tools:visibility="gone" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/monthProgress"
android:layout_width="327dp"
android:layout_height="159dp"
android:layout_marginTop="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.494"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@ id/imageView"
app:layout_constraintVertical_bias="0.0"
tools:ignore="=">
<TextView
android:id="@ id/topPanel"
android:layout_width="320dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:background="@drawable/btn_shape_capsule_empty"
android:gravity="center_vertical"
android:textAlignment="center"
android:textSize="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@ id/time"
app:layout_constraintStart_toStartOf="@ id/money"
tools:ignore="RtlCompat" />
<TextView
android:id="@ id/money"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="1500$"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="@ id/time"
android:layout_width="160dp"
android:layout_height="70dp"
android:layout_marginBottom="35dp"
android:gravity="center_vertical"
android:text="150hrs"
android:textAlignment="center"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="RtlCompat" />
<TextView
android:id="@ id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="Your month's progress:"
android:textColor="@color/white"
android:textSize="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@ id/line"
android:layout_width="1dp"
android:layout_height="30dp"
android:background="#757575"
app:layout_constraintBottom_toBottomOf="@ id/topPanel"
app:layout_constraintEnd_toEndOf="@ id/topPanel"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@ id/topPanel" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/layout1"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="@ id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shape_lightedge4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@ id/text1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="@color/white"
android:gravity="center"
android:text="start a newnshift"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="@ id/button1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/layout2"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="360dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="@ id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shape_lightedge2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="@color/white"
android:gravity="center"
android:text="see all ofnyour shifts"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="@ id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/layout3"
android:layout_width="150dp"
android:layout_height="280dp"
android:layout_marginEnd="47dp"
android:layout_marginRight="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<android.widget.Button
android:id="@ id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shape_lightedge3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="200dp"
android:backgroundTint="@color/white"
android:gravity="center"
android:text="settings"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="@ id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/layout4"
android:layout_width="150dp"
android:layout_height="170dp"
android:layout_marginStart="47dp"
android:layout_marginLeft="47dp"
android:layout_marginBottom="70dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent">
<android.widget.Button
android:id="@ id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/btn_shape_lightedge1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:backgroundTint="@color/white"
android:gravity="center"
android:text="about"
android:textSize="18dp"
android:translationZ="3dp"
app:layout_constraintBottom_toBottomOf="@ id/button4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
виджет.Ограничение>
Я использую в качестве единицы измерения все.
Комментарии:
1. Без просмотра вашего кода макета никто не сможет вам помочь. Во-вторых, часть проектирования для Android заключается в том, чтобы убедиться, что ваши представления могут быть адаптивными. 4-дюймовый телефон и 10-дюймовый планшет не будут выглядеть одинаково. Кроме того, многие устройства имеют разные соотношения сторон.
2. Я думаю, вам лучше начать с чтения некоторой документации, касающейся разработки приложений для разных размеров экрана: developer.android.com/training/multiscreen/screensizes . В частности, используя ConstraintLayout(ы)
Ответ №1:
Невозможно, чтобы он выглядел одинаково на всех разных экранах, так как у них разные соотношения. Но что возможно, так это сделать так, чтобы он выглядел очень похожим на разных экранах с одинаковым соотношением.
Как правило, лучше всего, dp так как пользователь может затем изменить масштаб вашего приложения с помощью настроек Android, если у него/нее возникают трудности со зрением (например, чтобы сделать его больше). Но если вы предпочитаете, чтобы ваше приложение всегда использовало одни и те же соотношения дизайна, вы можете, например, использовать GridLayout s и веса. Затем вы можете указать, какой процент вашего экрана должен быть покрыт видом. Кроме того, вы, конечно, можете также всегда вручную реализовывать такие вещи, как
desiredRatio = 0.4f;
viewHeight = desiredRatio * getMeasuredHeight();
а затем примените высоту к вашему представлению, изменив параметры компоновки или внедрив свою собственную группу представлений, и сделайте все это самостоятельно (конечно, возможно и необходимо в редких случаях).
Как правило, я бы попытался сделать это с помощью разметки сетки или компоновки, используя веса, а в редких случаях реализуйте свою собственную группу представлений.
Так что в вашем случае это может быть что-то вроде
<androidx.gridlayout.widget.GridLayout
android:layout_width="match_parent"
android:layout_height=match_parent"
app:orientation="horizontal"
app:columnCount="2">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/monthProgress"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/layout_1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/layout_3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@ id/layout_4"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_rowWeight="1"
app:layout_columnWeight="1"
//...The rest of your stuff here
/>
</androidx.gridlayout.widget.GridLayout>
Извините за отсутствующие отступы, «редактор» кода стекового потока просто ужасен.
Во всяком случае, именно так вы справитесь с некоторыми деталями. Обязательно установите высоту в своих ограничениях на «0dp», аналогично ширине. В противном случае GridLayout не сможет делать то, что вы хотите.
Кроме того, вы использовали android:scaleType="fitXY" в своем просмотре изображений. Это будет выглядеть странно. Вместо этого я бы рекомендовал centerCrop вместо этого.