Question

我想创建这个布局

这是我使用此代码的卡片视图（灰色视图）和imageview（蓝色视图）

<div class="form_group col-md-12 col-sm-12 col-xs-12">

           <label class="formlabel">Body</label><br>

                <?php if(isset($_POST['body'])){ ?> 

                <textarea class="ckeditor" name="body"> <?php echo $_POST['body']; ?> </textarea>

                <script>
                    CKEDITOR.replace( 'body' ,{
                    filebrowserBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserUploadUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserImageBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=1&editor=ckeditor&fldr='
                    });
                </script>

                <?php } else { ?>

                 <textarea class="ckeditor" id="ckeditorb" name="body" value="<?php echo nl2br(htmlspecialchars($art['BODY']));?>" ></textarea>

                <?php $body_content=json_encode(utf8_encode($art['BODY'])); ?>

                <script>
                    CKEDITOR.replace( 'body' ,{
                    filebrowserBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserUploadUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserImageBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=1&editor=ckeditor&fldr='
                    });
                    CKEDITOR.instances.ckeditorb.setData(<?php echo $body_content; ?>, function(){
                        this.checkDirty(); // true
                    });
                </script>

                <?php } ?>

            <?php if(isset($error['body']) && !empty($error['body'])){ 
                echo $error['body'];
             }  ?>
        </div>



        <div class="form_group col-md-12 col-sm-12 col-xs-12">

           <label class="formlabel">Description</label><br>

                <?php if(isset($_POST['description'])){ ?> 

                <textarea class="ckeditor" name="description" id="descripcion_1"> <?php echo $_POST['description']; ?> </textarea>

                <?php $content=json_encode(utf8_decode($_POST['DESCRIPTION'])); ?>

                <script>
                    CKEDITOR.replace( 'description' ,{
                    filebrowserBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserUploadUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserImageBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=1&editor=ckeditor&fldr='
                    });
                    CKEDITOR.instances.descripcion_1.setData(<?php echo $content; ?>, function(){
                        this.checkDirty(); // true
                    });
                </script>

                <?php } else { ?>

                 <textarea class="ckeditor" id="descripcion_2" name="description" value="<?php echo $art['DESCRIPTION']; ?>" ></textarea>

                <?php $content=json_encode(utf8_decode($art['DESCRIPTION'])); ?>

                <script>
                    CKEDITOR.replace( 'description' ,{
                    filebrowserBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserUploadUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
                    filebrowserImageBrowseUrl : '../ResposiveFilemanager/filemanager/dialog.php?type=1&editor=ckeditor&fldr='
                    });
                    CKEDITOR.instances.descripcion_2.setData(<?php echo $content; ?>, function(){
                        this.checkDirty(); // true
                    });
                </script>

                <?php } ?>

            <?php if(isset($error['description']) && !empty($error['description'])){ 
                echo $error['description'];
             }  ?>
        </div>

但结果我的图像视图回到了cardview，我尝试使用reletivelayout而不是framelayout，但结果相同。

Answer 1

CardView默认在API 21+中提升，你可以操纵高程小于ImageView的高程

    <android.support.v7.widget.CardView  xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:cardElevation="1dp"/>

 <ImageView
        android:id="@+id/image_view_user"
        android:layout_width="48dp"
        android:layout_height="48dp"
         android:elevation="2dp"/>

在Pre 21中你可以使用

overlayView.bringToFront();
root.requestLayout();
root.invalidate();

如果您有不同的高程

，这将无法在21+中使用

Answer 2

将CardView放在其他视图中，就像在FrameLayout中一样。如下所示：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginStart="10sp"
android:layout_marginEnd="10sp"
>
<FrameLayout
    android:layout_marginTop="15sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="100sp"
        app:cardCornerRadius="5sp"
        app:cardBackgroundColor="@color/colorPrimary">
    <!--other view items -->
    </android.support.v7.widget.CardView>
</FrameLayout>
     <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="90sp"
        android:layout_height="90sp"
        app:civ_border_width="2dp"
        android:layout_marginStart="10sp"
        app:civ_border_color="@color/colorPrimaryDark"
        android:id="@+id/profileImg"
        android:background="@drawable/ic_if_profle_1055000"
        xmlns:app="http://schemas.android.com/apk/res-auto"/>

截图：

Answer 3

尝试：

使用RelativeLayout
将ImageView与父右/右对齐并添加右/尾边距
将FAB对齐到卡片视图的顶部并添加负边距

<RelativeLayout
    ...>
    <CardView
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    />

   <ImageView
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@id/cardView"
    android:layout_marginTop="-32dp"
    android:layout_marginRight="20dp"
   />

</RelativeLayout>

Answer 4

您可以将CardView包裹在FrameLayout中，但是阴影将被裁剪。设置android：clipChildren =“ false”进行修复

<android.support.constraint.ConstraintLayout 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="wrap_content"
    android:clipChildren="false"
    android:layout_height="140dp">

<FrameLayout
    android:id="@+id/frameLayout4"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:clipChildren="false">

    <android.support.v7.widget.CardView
        app:cardCornerRadius="@dimen/card_radius"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.CardView>
</FrameLayout>
</android.support.constraint.ConstraintLayout>

Answer 5

只需将ImageView的海拔高度添加到CardView海拔之上

<FrameLayout 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="match_parent"
android:background="@color/abc_search_url_text_normal"
android:orientation="vertical">

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:layout_marginBottom="3dp"
    android:paddingTop="5dp"
    app:cardBackgroundColor="@color/white">


</androidx.cardview.widget.CardView>

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="bottom"
    android:layout_marginBottom="30dp"
    android:layout_marginRight="10dp"
    android:scaleType="fitXY"
    android:elevation="8dp"
    android:src="@drawable/ic_launcher_background" />

Answer 6

另一种解决方法是将图像视图包装在卡片视图中。只需确保背景是透明的即可，包括高度和宽度的包装内容，并且它将位于上一个卡片视图的顶部。

在android中创建关于cardview的视图

6 个答案: