Android剪辑到背景

时间:2018-10-03 07:42:48

标签: android android-drawable clipping android-vectordrawable

我有以下可绘制对象squared_card_background.xml,我希望将其用作不同视图的背景,并允许视图子对象以及视图本身被剪切。

squared_card_background_left.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="16dp"
    android:width="16dp"
    android:viewportHeight="1"
    android:viewportWidth="1">
    <path
        android:name="left"
        android:fillColor="@color/colorSurface"
        android:pathData="M0,1 L1,0 L1,1z" />
    <clip-path android:name="leftClip"
        android:pathData="M0,1 L1,0 L1,1z"/>
</vector>

squared_card_background_right.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="16dp"
    android:width="16dp"
    android:viewportHeight="1"
    android:viewportWidth="1" >
    <path
        android:name="v"
        android:fillColor="@color/colorSurface"
        android:pathData="M1,1 L0,0 L0,1z" />
</vector>

squared_card_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="fill|top|clip_horizontal|clip_vertical"
        android:start="16dp"
        android:end="16dp"
        android:height="16dp">
        <shape android:shape="rectangle"
            android:useLevel="false">
            <solid android:color="@color/colorSurface"/>
        </shape>
    </item>
    <item android:drawable="@drawable/squared_card_background_left"
        android:gravity="start|top|clip_horizontal|clip_vertical"
        android:height="16dp"
        android:width="16dp">
    </item>
    <item android:drawable="@drawable/squared_card_background_right"
        android:gravity="end|top|clip_horizontal|clip_vertical"
        android:height="16dp"
        android:width="16dp">
    </item>
    <item android:top="16dp">
        <color android:color="@color/colorSurface"/>
        <scale android:scaleGravity="fill"/>
    </item>
</layer-list>

我尝试将视图设置为剪切孩子和轮廓背景,但是它似乎无法识别正确的剪切路径,有什么主意吗?

我当前试图设置视图背景的布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/colorBackground"
    android:orientation="vertical">

    <com.mobile.indico.indicomobile.views.Toolbar
        android:id="@+id/sync_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:toolbarTitle="@string/title_sync"
        app:showNavigationIcon="false"
        app:layout_constraintTop_toTopOf="parent">
        <ImageButton
            android:id="@+id/sync_start"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/preview_button_background"
            android:tint="@color/colorOnPrimary"
            android:src="@drawable/ic_refresh_white"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </com.mobile.indico.indicomobile.views.Toolbar>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/sync_recycler"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/sync_toolbar"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/squared_card_background"
        android:clipChildren="true"/>
</android.support.constraint.ConstraintLayout>

最后,我尝试创建一个父FrameLayout,将单个孩子剪裁到背景,但是结果相同,而且我不知道如何从可绘制对象创建剪裁路径并将其插入onDraw方法中。 / p>

1 个答案:

答案 0 :(得分:1)

最终使用了此...感谢我猜的赞成票

override fun onDraw(canvas: Canvas?) = super.onDraw(canvas?.also {
        it.clipPath(Path().apply{
            moveTo(0f, height.toFloat())
            lineTo(0f, _cornerRadius)
            lineTo(_cornerRadius, 0f)
            lineTo(width - _cornerRadius, 0f)
            lineTo(width.toFloat(), _cornerRadius)
            lineTo(width.toFloat(), height.toFloat())
            lineTo(0f, height.toFloat())
            close()
        })
    })