imagecircleview 和 textview 并排

Question

我想让 imagecircleview 和 textview 并排放置在 xml kotlin android 中。我已经试过了，但是 textview 位于 imageview 上方。按钮也在我想要的图像上方。底部

我也希望对主要的 android 布局属性进行简要说明。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".FirstFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <de.hdodenhof.circleimageview.CircleImageView
           android:id="@+id/imageview_profile"
           android:layout_width="120dp"
           android:layout_height="120dp"
           android:src="@drawable/kaleab_profile"
           android:layout_marginTop="60dp"/>
    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Kaleab Woldemariam"
        android:textColor="#000"
        android:textStyle="bold"
        android:layout_marginTop="5dp"/>
    </LinearLayout>
    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/previous"
        android:layout_centerHorizontal="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_first" />
</RelativeLayout>

Answer 1

尝试这个

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="16dp"
    >
    <LinearLayout
        android:id="@+id/header_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <com.google.android.material.imageview.ShapeableImageView
            app:shapeAppearance="@style/circular_shapeAppearance"
            android:id="@+id/imageview_profile"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_marginEnd="16dp"
            tools:srcCompat="@tools:sample/avatars" />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_marginStart="16dp"
                android:id="@+id/name_textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_vertical"
                android:text="Peculiah C. Umesh"
                android:textColor="#000"
                android:textStyle="bold" />
            <TextView
                android:layout_marginStart="16dp"
                android:id="@+id/role_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_vertical"
                android:text="Mentor Manager"
                android:textSize="14sp"
                android:textColor="@android:color/darker_gray"
                android:textStyle="bold" />
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/about_label"
        android:layout_below="@+id/header_container"
        android:layout_marginTop="16dp"
        android:text="About"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/about"
        android:layout_below="@+id/about_label"
        android:layout_marginTop="8dp"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec est consequat arcu laoreet consequat non eget quam. Mauris ullamcorper odio id erat pharetra, sed auctor libero tempor. Sed sit amet justo facilisis nisl pharetra mollis. Donec vel felis eget dolor tristique consectetur at nec tortor. Donec eu finibus leo. Fusce non erat semper turpis tincidunt volutpat sit amet sit amet elit."
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/proficiency_label"
        android:layout_below="@+id/about"
        android:layout_marginTop="16dp"
        android:text="Technical Proficiency"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/proficiency"
        android:layout_below="@+id/proficiency_label"
        android:layout_marginTop="8dp"
        android:text="JavaScript, Django, Mysql, Android"
        />
    <Button
        android:id="@+id/button_first"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Previous" />
</RelativeLayout>

在res/values/styles.xml

    <!-- circular picture shape appearance -->
    <style name="circular_shapeAppearance" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

注意：我使用com.google.android.material.imageview.ShapeableImageView和形状外观来使图像视图呈圆形。 你可以用你的替换它。

Answer 2

尝试这个

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/imageview_profile"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/profile_no_image" />

        <TextView
            android:id="@+id/textview_first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginStart="20dp"
            android:layout_marginTop="5dp"
            android:layout_toEndOf="@+id/imageview_profile"
            android:gravity="center"
            android:text="Kaleab Woldemariam"
            android:textColor="#000"
            android:textStyle="bold" />
    </LinearLayout>

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="Previous" />
</RelativeLayout>