在cardview顶部的Imageview

时间:2016-10-05 08:59:29

标签: android android-constraintlayout

我有圆形imageview,我需要在cardview上方对齐,但它应该像图像的半圈将在cardview之外并保留图像的半圈在cardview内。与cardview的顶部边框中心一样,其上会显示圆形imageview

我怎么能这样做,我将无法上传图片,因为我的代理人不会因为不便而抱歉。

enter image description here

5 个答案:

答案 0 :(得分:3)

试试这段代码

<android.support.design.widget.FloatingActionButton
    android:id="@+id/btn_contacts"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:scaleType="center"
    android:src="@drawable/ic_contacts_36px"
    app:fabSize="normal"
    app:layout_anchor="@id/ll_cardView"
    app:layout_anchorGravity="center|top" />

将app:layout_anchor id名称更改为您的卡片视图ID。

答案 1 :(得分:2)

这可以这样做。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.simplebox.demo.MainActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/first"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="@dimen/cardview_default_radius"
        app:cardElevation="4dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        card_view:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="#FFF000">
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:background="#000000"
        android:contentDescription="@null" />

</FrameLayout>

输出将是。使用圆形ImageView进行圆形图像。

enter image description here

答案 2 :(得分:1)

执行以下操作

<FrameLayout>

    <CardView> //set marginTop of 10 dp so that it will be half the height of CirccularImageView

    <CircularImageView> //set some height to it like 20dp and gravity center horizontal.
</FrameLayout>

答案 3 :(得分:0)

我已经按照以下方法完成了上述任务

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto">


    <RelativeLayout
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:id="@+id/first"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                app:cardBackgroundColor="@color/app_black_light"
                app:cardCornerRadius="5dp"
                app:cardElevation="4dp"
                card_view:cardUseCompatPadding="true">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/margin_medium"
                    android:layout_marginTop="100dp"
                    android:layout_marginRight="@dimen/margin_medium"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/tv_category_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/semibold"
                        android:text="Indoor Esra Plant Posts"
                        android:textColor="@color/skin_color"
                        android:textSize="@dimen/very_small_text" />


                    <TextView
                        android:id="@+id/tv_category_size"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/semibold"
                        android:text="Flooring -5 in X 7 in."
                        android:textColor="@color/skin_color"
                        android:textSize="@dimen/very_small_text" />


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/margin_medium"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:fontFamily="@font/bold"
                            android:text="$2/piece"
                            android:textColor="@color/green_color_light"
                            android:textSize="@dimen/small_text" />

                        <Button
                            android:layout_width="wrap_content"
                            android:layout_height="35dp"
                            android:background="@drawable/logout_gradiant"
                            android:text="Add to Cart"
                            android:textAllCaps="false"
                            android:textColor="@color/skin_color"
                            android:textSize="@dimen/very_very_small_text" />

                    </LinearLayout>


                </LinearLayout>

            </android.support.v7.widget.CardView>
        </LinearLayout>

        <ImageView
            android:id="@+id/iv_category"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="@dimen/btn_margin"
            android:layout_marginRight="@dimen/btn_margin"
            android:background="#000000"
            android:contentDescription="@null" />

    </RelativeLayout>

</layout>

答案 4 :(得分:0)

<CardView> //set marginTop of 10 dp so that it will be half the height of CirccularImageView

<CircularImageView> //set some height to it like 20dpand gravity center horizontal.

//也给