android - 在小屏幕上看不到按钮之间的空间
问题描述
我正在制作我的应用程序的主屏幕。完成后,它在设计屏幕上是完美的。但它在 Pixel 3a 模拟器中看起来不像,在我的小米红米 4x 上更糟。如何在模拟器和我的手机上让它看起来像设计屏幕变体。
我尝试将 ConstraintLayout 与 View 一起使用,但没有奏效。还有其他解决方案吗?
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/main_screen_image"
android:fitsSystemWindows="true"
tools:context=".HomeScreen">
<!-- tools:openDrawer="start"-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/purple_200"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
<ImageView
android:id="@+id/homeScreenLogo"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center"
android:layout_marginTop="70dp"
android:src="@drawable/kaznau_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnAboutUniversity"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="70dp"
android:drawableLeft="@drawable/ic_university"
android:text="@string/s_about_kaznau"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/homeScreenLogo" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnFaculties"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="@drawable/ic_faculty"
android:text="Факультет"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="@+id/btnAboutUniversity"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnAboutUniversity" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnNews"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:drawableLeft="@drawable/ic_baseline_article_24"
android:text="@string/s_news"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnAboutUniversity" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnEvents"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="@drawable/ic_baseline_event_24"
android:text="@string/events_name"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="@+id/btnNews"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnNews" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnLocations"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:drawableLeft="@drawable/ic_location"
android:text="@string/s_locations"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnNews" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnCampus"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="@drawable/ic_campus"
android:text="@string/s_campus"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="@+id/btnLocations"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnLocations" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnLinks"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:drawableLeft="@drawable/ic_links"
android:text="@string/s_links"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnLocations" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnContacts"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:drawableLeft="@drawable/ic_contacts"
android:text="@string/s_contacs"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintBottom_toBottomOf="@+id/btnLinks"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnLinks" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnAgrodamu"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:text="@string/s_agrodamu"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnLinks" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout>
解决方案
最方便的做法是在您的中心添加指南Constraint Layout
,并将您的视图与guideline
左或右对齐。这样,无论屏幕大小如何,您的布局都不会受到干扰。
让我们这样尝试:
<androidx.drawerlayout.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/main_screen_image"
android:fitsSystemWindows="true"
tools:context=".HomeScreen">
<!-- tools:openDrawer="start"-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/purple_200"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
<android.support.constraint.Guideline
android:id="@+id/guideline39"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.50" />
<ImageView
android:id="@+id/homeScreenLogo"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center"
android:layout_marginTop="70dp"
android:src="@drawable/kaznau_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnAboutUniversity"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="70dp"
android:layout_marginEnd="5dp"
android:drawableLeft="@drawable/ic_university"
android:text="@string/s_about_kaznau"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintEnd_toStartOf="@+id/guideline39"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/homeScreenLogo" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnFaculties"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="5dp"
android:drawableLeft="@drawable/ic_faculty"
android:text="Факультет"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="@+id/guideline39"
app:layout_constraintBottom_toBottomOf="@+id/btnAboutUniversity"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnAboutUniversity" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnNews"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="5dp"
android:drawableLeft="@drawable/ic_baseline_article_24"
android:text="@string/s_news"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintEnd_toStartOf="@+id/guideline39"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnAboutUniversity" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnEvents"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="5dp"
android:drawableLeft="@drawable/ic_baseline_event_24"
android:text="@string/events_name"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="@+id/guideline39"
app:layout_constraintBottom_toBottomOf="@+id/btnNews"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnNews" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnLocations"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="5dp"
android:drawableLeft="@drawable/ic_location"
android:text="@string/s_locations"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintEnd_toStartOf="@+id/guideline39"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnNews" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnCampus"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="5dp"
android:drawableLeft="@drawable/ic_campus"
android:text="@string/s_campus"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="@+id/guideline39"
app:layout_constraintBottom_toBottomOf="@+id/btnLocations"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnLocations" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnLinks"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="5dp"
android:drawableLeft="@drawable/ic_links"
android:text="@string/s_links"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintEnd_toStartOf="@+id/guideline39"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnLocations" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnContacts"
android:layout_width="160dp"
android:layout_height="50dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginStart="5dp"
android:drawableLeft="@drawable/ic_contacts"
android:text="@string/s_contacs"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintStart_toStartOf="@+id/guideline39"
app:layout_constraintBottom_toBottomOf="@+id/btnLinks"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/btnLinks" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnAgrodamu"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:text="@string/s_agrodamu"
android:textSize="14sp"
app:cornerRadius="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btnLinks" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout>
推荐阅读
- javascript - 反应钩子 UseContext 没有返回正确的值(根据打字稿)
- c++ - 如何在 C++ 中生成随机数?
- c# - 如何在我的代码中将零添加到日期和月份?
- sql-server - SQL Server 是否有另一种解决方案
- excel - Excel VBA 获取在“UserForm1”私有子脚本中找到的值(整数 K),转移到“Module1”子脚本
- javascript - HTML折叠表格行与jQuery
- c# - 由于 Python 代码中的错误,C# 进程窗口会自动关闭。如何保持窗户打开?
- excel - 使用 excel VBA 更改多个文本字符串
- mongodb - MongoDB:如何“联合”来自同一集合的结果?
- c# - 更改派生类中属性的 xml 描述