Android Arsenal – Diseños

  ccll_child_cut_provider_example_1.setChildCornerCutProvider {vista, recorte, _, rectF, _, 1980 1945] [1945][1945] [1945][1945 [19
        moveTo (rectF.centerX (), rectF.top)
        arcTo (...)
        lineTo (rectF.centerX ()  +  rectF.width (), rectF.bottom)
        arcTo (...)
        lineTo (rectF.centerX (), rectF.top)
         val  halfChordWidth  =  rectF.height ()  /    2.0F 
        AddCircle (...)
        moveTo (rectF.centerX ()  +  rectF.width (), rectF.top)
        lineTo (view.paddedBounds.right  -  rectF.width ()  /    2.0F  rectF.centerY ())
        lineTo (rectF.centerX ()  +  rectF.width (), rectF.bottom)
        lineTo (rectF.centerX ()  +  rectF.width (), rectF.top)
    }
     verdadero    //  acepta recortes personalizados 
} 

El resultado sería el siguiente:

Tenga en cuenta que en este ejemplo solo los cortes en la esquina izquierda se crean con el proveedor de recortes personalizados. Esto se debe a que los proveedores solo se llaman para cutSide y cutCorner especificado por ccll_child_side_cut_flag y ccll_corner_cut] 1965 65 Ejemplo 65

  < io  .devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout
    ...
     android :  id  =   " @ + id / ccll_child_cut_provider_example_2 " 
 ]  cc  cc  =   " rectángulo_inverso " 
  aplicación :  ccll_corner_cut_flag  =   "] 
] 

    ...
</  io  .devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout> 

  ccll_showcase_custom_child_cut_provider_mixed.setChildCornerCutProvider (
    {_, _, cutSide, rectF, _, _  - > 
          val  matriz  =    Matriz  ()
         cuando  (cutSide) {
             CornerCutLinearLayout .  ChildSideCutFlag .  INICIO    - >  {
                matrix.postSkew ( -   0.25F   0.0F  rectF.centerX (), rectF.centerY ())
            }
             CornerCutLinearLayout .  ChildSideCutFlag .  FIN    - >  {
                matrix.postRotate ( -   10.0F  rectF.centerX (), rectF.centerY ())
                matrix.postTranslate ( -  rectF.width ()  /   2.0F  0.0F )
            }
        }
        matrice  //  restituisce la matrice di trasformazione che verrà applicata su ritagli precedentemente definiti 
    },
    
    {view, ritaglio, cutSide, rectF, relativeCutTopChild, _  - > 
         quando  (cutSide) {
             CornerCutLinearLayout .  ChildSideCutFlag .  START   - >  {
                 if  (view.indexOfChild (relativeCutTopChild ?:   return  @setChildCornerCutProvider   false ) ] ] ] ritorno  @setChildCornerCutProvider   falsa 
                 //  percorso stella ritaglio 
                 true   //  accetta percorso per solo 2 (indice 1) ritaglio lato iniziale 
            }
             CornerCutLinearLayout .  ChildSideCutFlag .  END   - >  {
                 if  (view.indexOfChild (relativeCutTopChild ?:   return  @setChildCornerCutProvider   false ) ] ] ] ritorno  @setChildCornerCutProvider   falsa 
                 //  percorso della stella del ritaglio 
                 true   //  accetta il percorso per solo 1 (indice 0) ritaglio del lato finale 
            }
             il resto   - >   falsa 
        }
    }
) 

Il risultato sarebbe il seguente:

Custom Cutout Provider

Questo tipo di provider ( CustomCutoutProvider ) è simile ai precedenti provider di taglio. L'unica differenza è che potresti aggiungere molti provider di ritagli e il parametro rectF in entrambe le funzioni dell'interfaccia restituisce i limiti imbottiti della vista.

Provider area di visualizzazione personalizzata

CustomViewAreaProvider utile nel caso in cui sia necessario mostrare un'area di visualizzazione personalizzata. Le possibilità sono limitate solo dalla tua immaginazione e dall'hardware Android. May require little knowledge of path composition, path op modes, fill types, etc.

Example 1.

<io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout
    ...
    android:id="@+id/ccll_custom_view_area_provider_example_1"
    app:ccll_child_side_cut_flag="none"
    app:ccll_corner_cut_flag="none"
    app:ccll_custom_shadow_color="@color/shadow_color"
    app:ccll_custom_shadow_radius="@dimen/shadow_radius">

    <TextView
        ...
        android:layout_marginEnd="@dimen/offset_48"
        android:ellipsize="end"
        android:padding="@dimen/offset_16"
        android:text="Lorem ipsum dolor sit amet..." />
</io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout>

ccll_custom_view_area_provider_example_1.setCustomViewAreaProvider { view, path, rectF ->
    // properties
    val offset = view[0].marginEnd
    val cornerRadius = rectF.height() / 4.0F
    val tailCircleRadius = cornerRadius / 2.0F
    val innerTailCircleRadius = tailCircleRadius / 2.0F
    val smallCornerRadius = cornerRadius / 4.0F
    
    // left part: round rect
    path.addRoundRect(...)
    
    // right part: tail
    path.moveTo(rectF.right - offset, rectF.top + cornerRadius)
    path.arcTo(...)
    path.lineTo(rectF.right - tailCircleRadius, rectF.centerY() - innerTailCircleRadius)
    path.lineTo(rectF.right - offset + innerTailCircleRadius, rectF.centerY() - innerTailCircleRadius)
    path.arcTo(...)
    path.lineTo(rectF.right - tailCircleRadius, rectF.centerY() + innerTailCircleRadius)
    path.arcTo(...)
    path.lineTo(rectF.right - offset, rectF.top + cornerRadius)
    path.addCircle(rectF.right - tailCircleRadius, rectF.centerY(), tailCircleRadius,  Path.Direction.CW)
    path.addCircle(rectF.right - tailCircleRadius, rectF.centerY(), innerTailCircleRadius, Path.Direction.CCW)
}

The result would be as follow:

Example 2.

<io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout
    android:id="@+id/ccll_custom_view_area_provider_example_2"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="@dimen/offset_16"
    app:ccll_child_side_cut_flag="none"
    app:ccll_corner_cut_flag="none"
    app:ccll_could_draw_custom_shadow_over_user_defined_padding="true"
    app:ccll_custom_shadow_color="@color/accent_secondary"
    app:ccll_custom_shadow_radius="@dimen/elevation_16"
    app:ccll_is_custom_shadow_auto_padding_enabled="false">

    <io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout
        ...
        android:rotation="10"
        android:rotationX="35"
        android:translationX="24dp"
        app:ccll_child_side_cut_flag="none"
        app:ccll_corner_cut_type="oval_inverse"
        app:ccll_corner_cut_size="@dimen/corner_cut_size">
        ...
    </io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout>

    <io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout
        ...
        app:ccll_corner_cut_size="@dimen/corner_cut_size_2"
        android:layout_marginStart="@dimen/offset_16"
        android:layout_marginEnd="@dimen/offset_48"/>

    <View
        ...
        android:background="#8010A7E8" />
</io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout>

In this example CornerCutLinearLayout has nested CornerCutLinearLayout (first two children) and simple view (3rd child).Third child is a regular view with semi-transparent background.Second child is continuously animated (translation Y) as well. It also has its own CustomCutoutProvider in a form of a star.
First child is transformed (constantly running animation): rotated around x, y & z sequentially.

Also parent CustomCutoutProvider has CustomCutoutProvider set programatically (curved lines path). In this examples we want to build shadow upon only children visible area also modifying some of them (virtual corner cuts for 3rd child).

// 1. Add Custom Cutout Provider
val waveLineCutWidth = resources.getDimension(R.dimen.offset_12)
val waveLineHeight = resources.getDimension(R.dimen.offset_48)
val halfWaveLineHeight = waveLineHeight / 2.0F
val halfWaveLineCutWidth = waveLineCutWidth / 2.0F
ccll_custom_view_area_provider_example_2.addCustomCutoutProvider { _, cutout, rectF ->
    cutout.moveTo(rectF.left, rectF.centerY() - halfWaveLineCutWidth)
    cutout.lineTo(rectF.left + rectF.width() / 4.0FrectF.centerY() - halfWaveLineCutWidth - halfWaveLineHeight)
    cutout.lineTo(rectF.right - rectF.width() / 4.0FrectF.centerY() - halfWaveLineCutWidth + halfWaveLineHeight)
    cutout.lineTo(rectF.right, rectF.centerY() - halfWaveLineCutWidth)
    cutout.lineTo(rectF.right, rectF.centerY() + halfWaveLineCutWidth)
    cutout.lineTo(rectF.right - rectF.width() / 4.0FrectF.centerY() + halfWaveLineCutWidth + halfWaveLineHeight)
    cutout.lineTo(rectF.left + rectF.width() / 4.0FrectF.centerY() + halfWaveLineCutWidth - halfWaveLineHeight)
    cutout.lineTo(rectF.left, rectF.centerY() + halfWaveLineCutWidth)
    cutout.lineTo(rectF.left, rectF.centerY() - halfWaveLineCutWidth)
}

// 2. Set Custom View Area Provider
ccll_showcase_custom_view_area_provider_example_2.setCustomViewAreaProvider { view, path, _ ->
    view.forEach {
        tempPath.rewind()
        if (it is CornerCutLinearLayout) {
            tempPath.offset(-it.left.toFloat(), -it.top.toFloat())
            tempPath.addPath(it.viewAreaPath) // nested ccll visible area path
            tempPath.transform(it.matrix)
            tempPath.offset(it.left.toFloat(), it.top.toFloat())
        } else {
            tempRectF.set(it.left.toFloat(), it.top.toFloat(), it.right.toFloat(), it.bottom.toFloat())
            val childCornerRadius = min(tempRectF.width(), tempRectF.height()) / 6.0F
            tempPath.addRoundRect(tempRectF, childCornerRadius, childCornerRadius, Path.Direction.CW)
            tempPath.offset(-it.left.toFloat(), -it.top.toFloat())
            tempPath.transform(it.matrix)
            tempPath.offset(it.left.toFloat(), it.top.toFloat())
        }
        path.op(tempPath, Path.Op.UNION)
    }
}

Note that 3rd child is clipped virtually. So when its bound overlay another visible area bounds corners of 3rd child become visible.

As you see custom shadow are build correctly upon custom visible view area (including children cutouts and transformations) & global custom cutouts.

The result would be as follow:

When you nest CornerCutLinearLayout in another CornerCutLinearLayout and work with CustomViewAreaProvider it might be necessary to get current visible view area path. The copy of it could be obtained via CornerCutLinearLayout.viewAreaPath*. In similar manner widget's padded bounds could be obtained (CornerCutLinearLayout.paddedBounds).

* - custom shadow are build upon viewAreaPath.

Custom Divider Provider

Sometimes you might want to have some not trivial different dividers at different positions mixed with default dividers. In a such scenario, CustomDividerProvider might come handy.

Example 1.

<io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout
    android:id="@+id/ccll_custom_divider_provider_example_1"
    app:ccll_child_side_cut_flag="none"
    app:ccll_corner_cut_flag="all"
    app:ccll_corner_cut_type="oval"
    app:ccll_custom_divider_show_flag="container_beginning|middle|container_end"
    app:ccll_should_use_max_allowed_corner_cut_depth_or_length_to_be_equal="true"
    app:ccll_should_use_max_allowed_corner_cut_size="true">
    ...
</io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout>

Then we define globally divider paint:

ccll_custom_divider_provider_example_1.doOnNonNullSizeLayout {
    val pb = it.paddedBounds
    it.customDividerProviderPaint.shader = RadialGradient(
        pb.centerX(), pb.centerY(),
        hypot(pb.width() / 2.0Fpb.height() / 2.0F) * 0.8F,
        Color.BLACKColor.WHITE,
        Shader.TileMode.CLAMP
    )
}

Lastly, we add CustomDividerProvider:

ccll_custom_divider_provider_example_1.setCustomDividerProvider { _, dividerPath, dividerPaint, showDividerFlag, dividerTypeIndex, rectF ->
    when (showDividerFlag) {
        CornerCutLinearLayout.CustomDividerShowFlag.CONTAINER_BEGINNING -> {
            dividerPaint.style = Paint.Style.STROKE
            dividerPaint.strokeWidth = triangleHeight
            dividerPaint.pathEffect = PathDashPathEffect(topDividerTrianglePath, triangleBaseWidth, 0.0FPathDashPathEffect.Style.TRANSLATE)
            dividerPath.moveTo(rectF.left, rectF.top)
            dividerPath.lineTo(rectF.right, rectF.top)
        }

        CornerCutLinearLayout.CustomDividerShowFlag.MIDDLE -> {
            dividerPaint.style = Paint.Style.STROKE
            if (dividerTypeIndex == 0) {
                dividerPaint.strokeWidth = circleRadius
                dividerPaint.pathEffect = PathDashPathEffect(circleDotDividerPath, triangleBaseWidth, 0.0FPathDashPathEffect.Style.TRANSLATE)
                dividerPath.moveTo(rectF.left, rectF.centerY())
                dividerPath.lineTo(rectF.right + triangleBaseWidth, rectF.centerY())
            } else {
                dividerPaint.strokeWidth = circleRadius
                dividerPaint.pathEffect = PathDashPathEffect(diamondDotDividerPath, triangleBaseWidth, 0.0FPathDashPathEffect.Style.TRANSLATE)
                dividerPath.moveTo(rectF.left, rectF.centerY())
                dividerPath.lineTo(rectF.right + triangleBaseWidth, rectF.centerY())
            }
        }

        CornerCutLinearLayout.CustomDividerShowFlag.CONTAINER_END -> {
            dividerPaint.style = Paint.Style.STROKE
            dividerPaint.strokeWidth = triangleHeight
            dividerPaint.pathEffect = PathDashPathEffect(bottomDividerTrianglePath, triangleBaseWidth, 0.0FPathDashPathEffect.Style.TRANSLATE)
            dividerPath.moveTo(rectF.left, rectF.top)
            dividerPath.lineTo(rectF.right, rectF.top)
        }
    }
    true // accept divider path
}

The result would be as follow:

Example 2. This example shows the combination of custom and default's dividers.

<io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout
    android:id="@+id/ccll_custom_divider_provider_example_2"
    app:ccll_child_corner_cut_type="oval_inverse"
    app:ccll_corner_cut_flag="all"
    app:ccll_custom_divider_color="@color/divider"
    app:ccll_custom_divider_dash_gap="@dimen/divider_dash_gap"
    app:ccll_custom_divider_dash_width="@dimen/divider_dash_width"
    app:ccll_custom_divider_height="@dimen/divider_height"
    app:ccll_custom_divider_line_cap="round"
    app:ccll_custom_divider_show_flag="middle"
    app:ccll_custom_shadow_color="@color/accent_secondary">
    ...
</io.devlight.xtreeivi.cornercutlinearlayout.CornerCutLinearLayout>

ccll_custom_divider_provider_example_2.setCustomDividerProvider { _, dividerPath, dividerPaint, showDividerFlag, dividerTypeIndex, rectF ->
    when (showDividerFlag) {
        CornerCutLinearLayout.CustomDividerShowFlag.MIDDLE -> {
            dividerPaint.style = Paint.Style.STROKE
            when (dividerTypeIndex) {
                0 -> {
                    dividerPaint.shader = RadialGradient(
                        rectF.centerX(), rectF.centerY(),
                        rectF.width() / 2.0FColor.GREENColor.RED,
                        Shader.TileMode.MIRROR
                    )
                    dividerPaint.strokeWidth = circleRadius
                    dividerPaint.pathEffect = PathDashPathEffect(diamondDotDividerPath, triangleBaseWidth, 0.0FPathDashPathEffect.Style.TRANSLATE)
                    dividerPath.moveTo(rectF.left, rectF.centerY())
                    dividerPath.lineTo(rectF.right + triangleBaseWidth, rectF.centerY())
                    return@setCustomDividerProvider true // accept divider and draw it
                }
                
                2 -> {
                    dividerPaint.shader = LinearGradient(
                        rectF.centerX(), rectF.centerY() - halfWaveHeight,
                        rectF.centerX(), rectF.centerY() + halfWaveHeight,
                        Color.BLUEColor.YELLOWShader.TileMode.CLAMP
                    )
                    dividerPaint.strokeWidth = halfWaveHeight * 2.0F
                    dividerPaint.pathEffect = PathDashPathEffect( wavePath, halfWaveWidth * 2.0F0.0FPathDashPathEffect.Style.TRANSLATE)
                    dividerPath.moveTo(rectF.left, rectF.centerY())
                    dividerPath.lineTo(rectF.right, rectF.centerY())
                    return@setCustomDividerProvider true // accept divider and draw it
                }
                
                else -> return@setCustomDividerProvider false // skip divider and draw default
            }
        }
    }
    false // skip divider and draw default
}

The result would be as follow:

Sample App

In order to take closer look over examples provided and library in general, please run the sample app.

Author

Created by Mykola Melnyk - @xtreeivi

Donation

I would appreciate if you "toss the coin to your faithful servant". Details: 5432 5912 5316 4615 (MasterCard)

Company

          

Here you can see open source works developed by Devlight LLC. This and another works is an exclusive property of Devlight LLC.

If you want to use this library in applications which will be available on Google Play, please report us or author of the library about it.

Whether you're searching for a new partner or trusted team for creating your new great product we are always ready to start work with you.

You can contact us: info@devlight.io or opensource@devlight.io. Thanks in advance.

Devlight LLC, 2020 devlight.io

License

Please see LICENSE