以android线性布局居中内容的最佳方式
问题描述:
我已经使用android developer studio创建了以下初始屏幕布局。我想要将由两个文本视图和一个图像视图组成的内容居中。以下是XML。以android线性布局居中内容的最佳方式
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash_gradient">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView id="@+id/splashscreen"
android:layout_width="100dp"
android:layout_height="250dp"
android:paddingBottom="100dp"
android:layout_centerInParent="true"
android:gravity="center_vertical|center_horizontal"
android:src="@drawable/splash_logo" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample"
android:layout_centerInParent="true"
android:fontFamily="@string/font_family_thin"
android:paddingTop="90dp"
android:paddingRight="90dp"
android:textSize="35dp"
android:textColor="#fff"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App"
android:layout_centerInParent="true"
android:fontFamily="@string/font_family_regular"
android:textSize="35dp"
android:paddingTop="90dp"
android:paddingLeft="100dp"
android:textColor="#fff"
/>
</RelativeLayout>
这看起来像下面的图片。
这是正确的方式居中我的内容或是否有更好的方式来实现我在寻找什么呢?请指导我。提前致谢。
答
如果您使用填充将元素居中,则这是错误的方式,因为您将在不同的屏幕上获得不同的结果。
看到这个选择,它不是唯一的一个。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/splash_gradient"
android:gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:id="@+id/splashscreen"
android:layout_width="100dp"
android:layout_height="250dp"
android:paddingBottom="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="@drawable/splash_logo" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/splashscreen"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample"
android:textSize="35dp"
android:textColor="#fff"
android:layout_marginEnd="15dp"
android:layout_marginRight="10dp"
android:fontFamily="@string/font_family_thin"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App"
android:layout_centerInParent="true"
android:textSize="35dp"
android:textColor="#fff"
android:fontFamily="@string/font_family_regular"
/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
答
先不使用填充或保证金对齐相对于兄弟姐妹的意见或布局图,它将在1台设备看起来很棒,但不会在不同屏幕尺寸的其他设备。使用layout_align属性。了解线性布局属性here。然后,你将能够通过你自己发现最好的方式。
我的解决方案
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
/>
<LinearLayout
android:layout_centerInParent="true"
android:layout_below="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/sample"
android:layout_alignBottom="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample"
android:layout_centerInParent="true"
android:textSize="35dp"
android:textColor="#000"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" App"
android:textSize="35dp"
android:textColor="#000"
/>
</LinearLayout>
</RelativeLayout>
我改了一下你的答案让我的精确设计和它看起来完美。你能指示我有关如何使用此android布局获得令人惊叹的UI的任何文档!我搜索了一下,发现只有基本的教程。 –
我不记得任何教程特别。但是搜索特定于每个布局的Tutorias:FrameLayout,LinearLayout,RelativeLayout和ConstraintLayout。最后一个是拥有更多选项但也是最复杂的那一个,所以我会先消化熟悉之前的那些。 – Juan
噢,好的。非常感谢你! :) –