问题描述
我想为像这样的对话框创建弯曲的布局,我在个人博客上找到了用于设计的图像。
我在网上搜索,但一无所获,我想创建完全相同的布局。我知道如何用drawable创建圆形,我不知道如何创建这张卡中间的曲线。
提前谢谢
解决方法
我认为这更接近您想要的:
1-全文:How I drew custom shapes in bottom bar
2- XML :
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:background="#8F8F8F"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="10dp"
android:clickable="true"
android:focusable="true"
app:elevation="4dp"
app:layout_anchor="@id/customBottomBar"
app:layout_anchorGravity="fill_vertical|center_horizontal"
app:rippleColor="#fff" />
<app.example.CurvedView
android:id="@+id/customBottomBar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"
android:background="@drawable/rounded_background">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="Call With"
android:textColor="#000"
android:textSize="18sp" />
</app.example.CurvedView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
3- JAVA :
public class CurvedView extends RelativeLayout {
private Path mPath;
private Paint mPaint;
// the coordinates of the first curve
private Point mFirstCurveStartPoint = new Point();
private Point mFirstCurveEndPoint = new Point();
private Point mFirstCurveControlPoint1 = new Point();
private Point mFirstCurveControlPoint2 = new Point();
private Point mSecondCurveEndPoint = new Point();
private Point mSecondCurveControlPoint1 = new Point();
private Point mSecondCurveControlPoint2 = new Point();
public CurvedView(Context context) {
super(context);
init();
}
public CurvedView(Context context,AttributeSet attrs) {
super(context,attrs);
init();
}
public CurvedView(Context context,AttributeSet attrs,int defStyleAttr) {
super(context,attrs,defStyleAttr);
init();
}
private void init() {
mPath = new Path();
mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setColor(Color.WHITE);
setBackgroundColor(Color.TRANSPARENT);
// setBackgroundResource(R.drawable.rounded_background);
}
@Override
protected void onLayout(boolean changed,int left,int top,int right,int bottom) {
super.onLayout(changed,left,top,right,bottom);
}
@Override
protected void onSizeChanged(int w,int h,int oldw,int oldh) {
super.onSizeChanged(w,h,oldw,oldh);
// get width and height of navigation bar
// Navigation bar bounds (width & height)
int mNavigationBarWidth = getWidth();
int mNavigationBarHeight = getHeight();
// the coordinates (x,y) of the start point before curve
/**
* the CURVE_CIRCLE_RADIUS represent the radius of the fab button
*/
int CURVE_CIRCLE_RADIUS = 256 / 2;
mFirstCurveStartPoint.set((mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3),0);
// the coordinates (x,y) of the end point after curve
mFirstCurveEndPoint.set(mNavigationBarWidth / 2,CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));
// same thing for the second curve
Point mSecondCurveStartPoint = mFirstCurveEndPoint;
mSecondCurveEndPoint.set((mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3),0);
// the coordinates (x,y) of the 1st control point on a cubic curve
mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4),mFirstCurveStartPoint.y);
// the coordinates (x,y) of the 2nd control point on a cubic curve
mFirstCurveControlPoint2.set(mFirstCurveEndPoint.x - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS,mFirstCurveEndPoint.y);
mSecondCurveControlPoint1.set(mSecondCurveStartPoint.x + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS,mSecondCurveStartPoint.y);
mSecondCurveControlPoint2.set(mSecondCurveEndPoint.x - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)),mSecondCurveEndPoint.y);
mPath.reset();
mPath.moveTo(0,0);
mPath.lineTo(mFirstCurveStartPoint.x,mFirstCurveStartPoint.y);
mPath.cubicTo(mFirstCurveControlPoint1.x,mFirstCurveControlPoint1.y,mFirstCurveControlPoint2.x,mFirstCurveControlPoint2.y,mFirstCurveEndPoint.x,mFirstCurveEndPoint.y);
mPath.cubicTo(mSecondCurveControlPoint1.x,mSecondCurveControlPoint1.y,mSecondCurveControlPoint2.x,mSecondCurveControlPoint2.y,mSecondCurveEndPoint.x,mSecondCurveEndPoint.y);
mPath.lineTo(mNavigationBarWidth,0);
mPath.lineTo(mNavigationBarWidth,mNavigationBarHeight);
mPath.lineTo(0,mNavigationBarHeight);
mPath.close();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath,mPaint);
}
}