Google 样式版本信息对话框

Question

我想模仿大多数（如果不是全部）Google 应用程序中的版本信息对话框。这些对话框通常位于 'Help & Feedback' > 'Options Menu' > 'Version Info' 中。例如，这是在照片应用程序中找到的对话框：

我无法将标题和版本号文本相对于图标居中，同时将版权文本与标题和版本的左边缘对齐。我知道我可以通过执行以下操作使两个 TextView 元素居中：

<FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content"
    android:padding="@dimen/padding">

    <ImageView android:id="@+id/icon"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:padding="@dimen/padding" android:src="@mipmap/ic_launcher"/>

    <LinearLayout android:id="@+id/title_layout" android:orientation="vertical"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_toEndOf="@id/icon" android:layout_centerVertical="true">

        <TextView android:id="@+id/title"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:textSize="@dimen/title"/>

        <TextView android:id="@+id/title"
            android:layout_width="wrap_content" android:layout_height="wrap_content">

    </LinearLayout>
</FrameLayout>

但是我怎样才能添加版权 TextView 而不会弄乱居中呢？我也尝试使用 CoordinatorLayout，但我似乎无法让两个 TextView 元素在保持居中的同时与图标右侧对齐。我还想在版权文本下方的对话框中添加一个 ListView（或 RecyclerView），但在我弄清楚之后应该不会太困难。

我唯一能想到的就是把整个东西包装在另一个布局中，在那个布局中添加一个 TextView，并给它一个等于 ImageView 宽度的左边距（包括其边距）。但我觉得我应该能够做到这一点，而不必添加 Java 代码，或者硬编码等于 ImageView.

宽度的维度

Answer 1

我建议你使用 TableLayout，所以代码将是这样的：

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TableRow>
        <ImageView android:id="@+id/icon"
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:src="@mipmap/ic_launcher"/>

        <LinearLayout android:id="@+id/title_layout" 
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:paddingTop="16dp" 
            android:layout_height="wrap_content" >

            <TextView android:id="@+id/title"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:text="first line"/>

            <TextView android:id="@+id/another"
                android:layout_width="wrap_content"     
                android:layout_height="wrap_content"
                android:text="second line"/>

        </LinearLayout>
    </TableRow>
    <TableRow>
        <Space />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="thirdline"/>
    </TableRow>

</TableLayout>

这是它在我的 phone 上的样子

Answer 2

使用 RelativeLayout 并将文本视图设置为与 ImageView 的右侧对齐 (android:layout_toRightOf="@id/icon")

Answer 3

我想这就是你想要的（我通过 RelativeLayout 做到了）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:src="@drawable/example_image" />

<RelativeLayout
    android:id="@+id/layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/image"
    android:layout_toRightOf="@id/image"
    android:layout_alignTop="@id/image"
    android:layout_marginLeft="10dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true">

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="title"
            android:textColor="@color/black"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:layout_below="@id/title"
            android:textColor="@color/black"
            android:text="description"
            android:textSize="12sp" />

    </RelativeLayout>

</RelativeLayout>


<TextView
    android:id="@+id/some_txt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout"
    android:layout_marginTop="10dp"
    android:layout_alignLeft="@id/layout"
    android:textColor="@color/black"
    android:text="some thing else"
    android:textSize="12sp" />

Google 样式版本信息对话框

Google Style Version Info Dialog

android

android-layout

android-view

android-xml