کتابخانه ShapeOfView اندروید – شکل دهی دلخواه به ویوها

کتابخانه ShapeOfView اندروید
شکل دهی دلخواه به ویوها

با این کتابخانه می‌توانید به سادگی هرنوع شکل دلخواهی که می‌خواهید را به ویو بدهید! برای مثال یک تصویر را به حالت دایره‌ای، قلب، ستاره و هرچیز دیگری نمایش دهید.

روش استفاده از ShapeOfView

ابتدا با استفاده از دستور زیر، کتابخانه را به Dependency های خود اضافه کنید:

dependencies {
    implementation 'com.github.florent37:shapeofview:1.4.6'
}

استفاده از اشکال آماده

این کتابخانه، شامل اشکال آماده‌ی از پیش تعریف شده‌ای نیز می‌باشد.

دایره (Circle):

<com.github.florent37.shapeofview.shapes.CircleView
        android:layout_width="150dp"
        android:layout_height="150dp"

        android:elevation="4dp"
        app:shape_circle_borderColor="@android:color/black"
        app:shape_circle_borderWidth="2dp">

            <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.CircleView>

مستطیل با گوشه خم (RoundRect):

<com.github.florent37.shapeofview.shapes.RoundRectView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_roundRect_bottomLeftRadius="10dp"
        app:shape_roundRect_bottomRightRadius="10dp"
        app:shape_roundRect_topLeftRadius="10dp"
        app:shape_roundRect_topRightRadius="10dp"
        
        app:shape_roundRect_borderColor="@android:color/black"
        app:shape_roundRect_borderWidth="2dp"
        >


            <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.RoundRectView>

شکل ClipCorner:

<com.github.florent37.shapeofview.shapes.CutCornerView
        android:id="@+id/clipCorner"
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_cutCorner_bottomRightSize="20dp">

         <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.CutCornerView>

شکل Arc:

<com.github.florent37.shapeofview.shapes.ArcView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_arc_height="20dp"
        app:shape_arc_position="bottom"
        >

         <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.ArcView>

شکل Diagonal:

<com.github.florent37.shapeofview.shapes.DiagonalView
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:elevation="4dp"
        app:shape_diagonal_angle="10"
        app:shape_diagonal_position="bottom">

         <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.DiagonalView>

مثلث (Triangle):

<com.github.florent37.shapeofview.shapes.TriangleView
         android:layout_width="150dp"
         android:layout_height="150dp"
         android:elevation="4dp"

         app:shape_triangle_percentBottom="0.5"
         app:shape_triangle_percentLeft="0"
         app:shape_triangle_percentRight="0">

            <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.TriangleView>

شکل Bubble:

<com.github.florent37.shapeofview.shapes.BubbleView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:shape_bubble_arrowHeight="10dp"
        app:shape_bubble_arrowWidth="10dp"
        app:shape_bubble_arrowPosition="bottom"
        app:shape_bubble_borderRadius="20dp"
        >

         <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.BubbleView>

ستاره (Star):

<com.github.florent37.shapeofview.shapes.StarView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:shape_star_noOfPoints="5">

         <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.StarView>

شکل Polygon:

<com.github.florent37.shapeofview.shapes.PolygonView
            android:layout_width="150dp"
            android:layout_height="100dp"
            app:shape_polygon_noOfSides="9"
            >
         <!-- YOUR CONTENT: FuLLKade.COM -->

</com.github.florent37.shapeofview.shapes.PolygonView>

شکل Dotted Edges with Cut Corners:

<com.github.florent37.shapeofview.shapes.DottedEdgesCutCornerView
             android:layout_width="100dp"
             android:layout_height="match_parent"
             app:shape_dot_radius="3dp"
             app:shape_dot_spacing="2dp"
             app:shape_edge_position="right|left"
             app:shape_dottedEdgesCutCorner_bottomLeftSize="8dp"
             app:shape_dottedEdgesCutCorner_bottomRightSize="8dp"
             >

             <!-- YOUR CONTENT: FuLLKade.COM -->

 </com.github.florent37.shapeofview.shapes.DottedEdgesCutCornerView>

انیمیشن (Animation)

همه‌ی شکل‌ها قابلیت انیمیشن را داشته و می‌توانند انیمیت شوند. برای مثال در زیر شکل RoundRect  را انیمیت می‌کنیم:

ValueAnimator.ofFloat(0f, 200f, 0f).apply {
     addUpdateListener { animation -> roundRect.bottomLeftRadius = (animation.animatedValue as Float).toInt() }
     duration = 800
     repeatCount = ValueAnimator.INFINITE
     repeatMode = ValueAnimator.REVERSE
}.start()

ساخت شکل دلخواه شما

شما می‌توانید شکل دلخواه خود را بسازید! به صورت زیر:

<com.github.florent37.shapeofview.ShapeOfView
        android:layout_width="100dp"
        android:layout_height="100dp"

        app:shape_clip_drawable="@drawable/YOUR_DRAWABLE"
        >

    <!-- YOUR CONTENT: FuLLKade.COM -->

 </com.github.florent37.shapeofview.ShapeOfView>

به جای ویژگی shape_clip_drawable، آدرس یک drawable را قرا می‌دهیم تا شکل نقاط رنگ شده‌ی آن drawable ایجاد شود. یعنی قسمت‌های شفاف یا خالی رسم نخواهند شد.

اما به جای Drawablr می‌توانید خودتان از طریق کد رسم کنید: Using Path (with elevation) یا مسیردهی

<com.github.florent37.shapeofview.ShapeOfView
        android:id="@+id/myShape"
        android:layout_width="30dp"
        android:layout_height="15dp"
        android:elevation="6dp">

        <!-- YOUR CONTENT -->

 </com.github.florent37.shapeofview.ShapeOfView>

و اما کد جاوا:

ShapeOfView shapeOfView = findViewById(R.id.myShape)
shapeOfView.setClipPathCreator(new ClipPathManager.ClipPathCreator() {
       @Override
       public Path createClipPath(int width, int height) {
           final Path path = new Path();

            //eg: triangle
           path.moveTo(0, 0);
           path.lineTo(0.5 * width, height);
           path.lineTo(width, 0);
           path.close();

           return path;
       }
});