کتابخانه ShapeOfView اندروید
شکل دهی دلخواه به ویوها
با این کتابخانه میتوانید به سادگی هرنوع شکل دلخواهی که میخواهید را به ویو بدهید! برای مثال یک تصویر را به حالت دایرهای، قلب، ستاره و هرچیز دیگری نمایش دهید.
روش استفاده از ShapeOfView
ابتدا با استفاده از دستور زیر، کتابخانه را به Dependency های خود اضافه کنید:
1 2 3 |
dependencies { implementation 'com.github.florent37:shapeofview:1.4.6' } |
استفاده از اشکال آماده
این کتابخانه، شامل اشکال آمادهی از پیش تعریف شدهای نیز میباشد.
1 2 3 4 5 6 7 8 9 10 11 |
<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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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:
1 2 3 4 5 6 7 8 9 10 |
<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:
1 2 3 4 5 6 7 8 9 10 11 |
<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:
1 2 3 4 5 6 7 8 9 10 |
<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):
1 2 3 4 5 6 7 8 9 10 11 12 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 |
<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):
1 2 3 4 5 6 7 8 |
<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:
1 2 3 4 5 6 7 8 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 را انیمیت میکنیم:
1 2 3 4 5 6 |
ValueAnimator.ofFloat(0f, 200f, 0f).apply { addUpdateListener { animation -> roundRect.bottomLeftRadius = (animation.animatedValue as Float).toInt() } duration = 800 repeatCount = ValueAnimator.INFINITE repeatMode = ValueAnimator.REVERSE }.start() |
ساخت شکل دلخواه شما
شما میتوانید شکل دلخواه خود را بسازید! به صورت زیر:
1 2 3 4 5 6 7 8 9 10 |
<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) یا مسیردهی
1 2 3 4 5 6 7 8 9 |
<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> |
و اما کد جاوا:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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; } }); |
نظرات ثبت شده بدون دیدگاه