کتابخانه 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">

</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"

</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">

</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"

</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">

</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">

</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"

</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">

</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"

</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"

</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"

</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">

</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;

}

});

این متد همچنین یک مسیر سایه‌ای را از API نسخه 21 به بالا (Lollipop) اضافه می‌کند.