java - 曲線状のダイアログ レイアウトを作成するには?

閉まっている。この質問には詳細または明確さが必要です。現在回答を受け付けておりません。

この質問を改善したいですか?この投稿を編集して詳細を追加し、問題を明確にします。

3 年前

に閉鎖されました。

この質問を改善してください

このようなダイアログ用の曲線レイアウトを作成したいのですが、デザイン用の個人ブログでこの画像を見つけました。

Web で検索しましたが何も見つかりませんでした。まったく同じレイアウトを作成したいと考えています。ドローアブルで丸い円を作成する方法は知っていますが、このカードの中央にある曲線をどのように作成すればよいのかわかりません。

よろしくお願いします

------------------------

これはあなたが望むものに近いと思います:

1 - 記事全文: 下部バーにカスタム シェイプを描画する方法

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);
    }
}

2

あなたの解決策を試しましたが、長方形だけが表示され、長方形の中央に円弧がありません。 @drawable/rounded_background で何か特別なことをしましたか?

– android_developer

2020 年 9 月 4 日 4:30

ありがとう、完了しました。何か間違いを犯したのが原因で、適切な体型を得ることができませんでした。

– android_developer

2020 年 9 月 4 日 5:18