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>