如何提出这种看法?

时间:2018-11-29 07:33:30

标签: android android-layout

如何提出这种看法?我正在尝试制作此视图(第一张图片),但是下面代码(第二张图片)的输出不是我想要的。请帮助

What to build

What am able to do till now

这是我尝试过的一些代码

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal">


            <android.support.v7.widget.AppCompatImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:background="@drawable/bg_round_black"
                android:padding="4dp"
                app:srcCompat="@drawable/ic_exclamation_mark_in_a_circle" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/bg_text_rounded_black"
                android:gravity="center"
                android:paddingLeft="8dp"
                android:paddingRight="8dp"
                android:text="15 days left"
                android:textColor="@color/white" />
        </LinearLayout>

3 个答案:

答案 0 :(得分:1)

布局文件:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <TextView
        android:background="@drawable/right_rounded_test"
        android:layout_toRightOf="@+id/imgWarning"
        android:layout_marginLeft="-5dp"
        android:layout_centerVertical="true"
        android:text="15 days left"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="@android:color/white"
        android:layout_width="200dp"
        android:layout_height="35dp"/>
    <ImageView
        android:id="@+id/imgWarning"
        android:padding="18dp"
        app:srcCompat="@drawable/ic_warning_test"
        android:background="@drawable/circular_test"
        android:layout_width="70dp"
        android:layout_height="70dp" />
</RelativeLayout>

可绘制图片BG(circular_test.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="#15151E"/>
    </shape>
</item>

    <item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
        <shape android:shape="oval">
            <solid android:color="#F71149"/>
        </shape>
    </item>

    <item android:top="10dp" android:left="10dp" android:right="10dp" android:bottom="10dp">
        <shape android:shape="oval">
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>


</layer-list>

TextView BG right_rounded_test.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<corners android:topRightRadius="30dp"
    android:bottomRightRadius="30dp"/>
    <solid android:color="#15151E"/>
</shape>

这是您的输出: enter image description here

我没有找到您的图标,所以我用了它。

答案 1 :(得分:0)

您可以使用下面的代码来达到目的。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<android.support.v7.widget.AppCompatImageView
    android:layout_centerHorizontal="true"
    app:srcCompat="@drawable/ic_exclamation_mark_in_a_circle"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:background="@drawable/bg_round_black"
    android:padding="4dp" />

<View
    android:id="@+id/empty_view"
    android:layout_centerHorizontal="true"
    android:layout_width="10dp"
    android:layout_height="10dp"/>

<TextView
    android:layout_toRightOf="@+id/empty_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_text_rounded_black"
    android:gravity="center"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:text="15 days left"
    android:textColor="@color/white" />

注意:您可以使用“查看”宽度播放文本,将文本区域拖出或拖入。希望对您有帮助。

答案 2 :(得分:0)

以这种方式工作

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">


        <android.support.v7.widget.AppCompatImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:background="@drawable/bg_round_black"
            android:padding="4dp"
            app:srcCompat="@drawable/ic_exclamation_mark_in_a_circle" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_text_rounded_black"
            android:gravity="center"
            android:paddingLeft="8dp"
            android:marginLeft = "-5dp"
            android:paddingRight="8dp"
            android:text="15 days left"
            android:textColor="@color/white" />
    </LinearLayout>