Android 布局:将文本和图像视图置于屏幕中心?
Android Layout: Center Text and Image View to screen center?
我有这个 activity layout.xml 作为启动画面,它基本上显示了我想要的内容。但是如果我在更大或更小的屏幕设备上打开应用程序,它就不再居中了。
有没有办法在元素周围放置一个包装器并将其在屏幕的高度和宽度上居中?还有其他选择吗?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
android:background="@color/colorPrimaryDark" >
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="250dp"
android:layout_marginBottom="7dp"
android:text="@string/head_line"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_gravity="center" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="7dp"
android:text="@string/slogan"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
现在,它看起来像这样:
提前谢谢大家!
您可以将 android:gravity="center"
添加到 LinearLayout
并从顶部移除顶部边距 TextView
试试这个
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:background="@color/colorPrimaryDark"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="7dp"
android:text="@string/head_line"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:srcCompat="@mipmap/ic_launcher_round" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="7dp"
android:text="@string/slogan"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
将您的 linearLayout 和布局引力居中。 LinearLayout应该是这样的
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
您正在使用边距来定位您的视图。根本不是个好主意。
您应该做的第一件事是删除第一个 TextView 的上边距(您可以在使用它时保留下边距 space )。
接下来,我们想尝试一下 LinearLayout 的 layout_gravity 并将其设置为 Center。但我们还需要将 layout_width 和 layout_height 设置为 wrap_content.
我拿了你的布局文件并做了一些修改。不要复制和粘贴它,因为我将您的 ImageView 更改为 TextView 并删除了对您的资源的引用(因此我可以在 Android Studio 中轻松编辑它),但在结构上这就是您想要的:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:background="@color/colorPrimaryDark" >
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="7dp"
android:text="T1"
android:textColor="@android:color/white"
android:textSize="50sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="T2"
android:textColor="@android:color/white"
android:textSize="24sp" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="7dp"
android:text="T3"
android:textColor="@android:color/white"
android:textSize="24sp" />
</LinearLayout>
顺便说一句,您可能还想研究使用 ConstraintLayout。对于像这样的简单布局来说,这可能有点矫枉过正,但熟悉它是件好事,这可能是一个很好的起点。
我有这个 activity layout.xml 作为启动画面,它基本上显示了我想要的内容。但是如果我在更大或更小的屏幕设备上打开应用程序,它就不再居中了。
有没有办法在元素周围放置一个包装器并将其在屏幕的高度和宽度上居中?还有其他选择吗?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
android:background="@color/colorPrimaryDark" >
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="250dp"
android:layout_marginBottom="7dp"
android:text="@string/head_line"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@mipmap/ic_launcher_round"
android:layout_gravity="center" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="7dp"
android:text="@string/slogan"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
现在,它看起来像这样:
提前谢谢大家!
您可以将 android:gravity="center"
添加到 LinearLayout
并从顶部移除顶部边距 TextView
试试这个
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:background="@color/colorPrimaryDark"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="7dp"
android:text="@string/head_line"
android:textColor="@color/white"
android:textSize="50sp"
android:textStyle="bold" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:srcCompat="@mipmap/ic_launcher_round" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="7dp"
android:text="@string/slogan"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
将您的 linearLayout 和布局引力居中。 LinearLayout应该是这样的
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
您正在使用边距来定位您的视图。根本不是个好主意。
您应该做的第一件事是删除第一个 TextView 的上边距(您可以在使用它时保留下边距 space )。
接下来,我们想尝试一下 LinearLayout 的 layout_gravity 并将其设置为 Center。但我们还需要将 layout_width 和 layout_height 设置为 wrap_content.
我拿了你的布局文件并做了一些修改。不要复制和粘贴它,因为我将您的 ImageView 更改为 TextView 并删除了对您的资源的引用(因此我可以在 Android Studio 中轻松编辑它),但在结构上这就是您想要的:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:background="@color/colorPrimaryDark" >
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="7dp"
android:text="T1"
android:textColor="@android:color/white"
android:textSize="50sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="T2"
android:textColor="@android:color/white"
android:textSize="24sp" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="7dp"
android:text="T3"
android:textColor="@android:color/white"
android:textSize="24sp" />
</LinearLayout>
顺便说一句,您可能还想研究使用 ConstraintLayout。对于像这样的简单布局来说,这可能有点矫枉过正,但熟悉它是件好事,这可能是一个很好的起点。