簡體   English   中英

Android Design 2圖片和文字LinearLayout

[英]Android Design 2 Images and text LinearLayout

我正在嘗試創建這樣的布局:

我正在嘗試實現的布局

基本上我有2張圖片,我想粘貼到LinearLayout的任一側,中間有一些文本。 我根據屏幕的密度在代碼中設置圖像的寬度,因此寬度可變。

這是我到目前為止的代碼:

<RelativeLayout
        android:id="@+id/user_header"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/user_loading_wrapper"
        android:layout_alignWithParentIfMissing="true"
        android:layout_alignParentTop="true"
        android:layout_margin="@dimen/default_spacing">

        <!--User Poster-->
        <ImageView
            android:id="@+id/user_poster"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:scaleType="fitXY"
            android:contentDescription="User Poster"
            android:layout_alignParentLeft="true"/>

        <!--Review Details-->
        <LinearLayout
            android:id="@+id/screen_details"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/user_poster"
            android:layout_alignParentTop="true"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:layout_marginLeft="@dimen/default_spacing_max"
            android:orientation="vertical">

            <!--User Title-->
            <TextView
                android:id="@+id/user_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#333"
                android:singleLine="false"
                android:layout_gravity="center"/>

            <!--Location-->
            <TextView
                android:id="@+id/user_location"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#333"
                android:singleLine="false"
                android:layout_gravity="center"/>

            <!--User 2 Title-->
            <TextView
                android:id="@+id/user_secondary_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#333"
                android:layout_marginTop="4dp"
                android:singleLine="false"
                android:layout_gravity="center"
                tools:text="Life of Pi"/>

        </LinearLayout>

        <!--Poster-->
        <ImageView
            android:id="@+id/user_poster_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitEnd"
            android:layout_toRightOf="@id/screen_details"
            android:contentDescription="Poster"
            android:layout_alignParentRight="true"/>

    </RelativeLayout>

但這根本不起作用。 我希望“中心布局”擴展並占據兩個圖像之間中間的所有空間。

我修復了它....檢查它的圖像輸出和代碼流。 在此處輸入圖片說明

代碼是:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/user_header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignWithParentIfMissing="true" >

    <ImageView
        android:id="@+id/user_poster"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@android:color/black"
        android:scaleType="fitXY" />
    <LinearLayout
        android:id="@+id/screen_details"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/user_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@android:color/darker_gray"
            android:paddingLeft="10dp"
            android:singleLine="false"
            android:text="Life of Pi"
            android:textColor="#333" />
        <TextView
            android:id="@+id/user_location"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray"
            android:paddingLeft="10dp"
            android:singleLine="false"
            android:text="Life of Pi"
            android:textColor="#333" />
        <TextView
            android:id="@+id/user_secondary_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="4dp"
            android:background="@android:color/darker_gray"
            android:paddingLeft="10dp"
            android:singleLine="false"
            android:text="Life of Pi"
            android:textColor="#333" />
    </LinearLayout>
    <ImageView
        android:id="@+id/user_poster2"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_weight="0"
        android:background="@android:color/black"
        android:scaleType="fitXY" />

</LinearLayout>

嘗試這個

   <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/user_header"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignWithParentIfMissing="true"
    android:layout_alignParentTop="true"
    android:layout_margin="5dp">

    <!--User Poster-->
    <ImageView
        android:id="@+id/user_poster"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:scaleType="fitXY"
        android:contentDescription="User Poster"
        android:layout_alignParentLeft="true"/>

    <!--Review Details-->

    <LinearLayout
        android:id="@+id/screen_details"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="70dp"
        android:layout_toRightOf="@id/user_poster"
        android:gravity="center"
        android:orientation="vertical" >

        <!--User Title-->
        <TextView
            android:id="@+id/user_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#333"
            android:singleLine="false"
            android:layout_gravity="center"/>

        <!--Location-->
        <TextView
            android:id="@+id/user_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#333"
            android:singleLine="false"
            android:layout_gravity="center"/>

        <!--User 2 Title-->
        <TextView
            android:id="@+id/user_secondary_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#333"
            android:layout_marginTop="4dp"
            android:singleLine="false"
            android:layout_gravity="center"
            android:text="Life of Pi"/>

    </LinearLayout>

    <!--Poster-->

    <ImageView
        android:id="@+id/user_poster_2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:contentDescription="Poster" />

</RelativeLayout>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM