किनारे/कस्टम पृष्ठभूमि आकार पर एक कट के साथ पृष्ठभूमि

Question

मुझे ViewPagerFragments के साथ बनाना है, और मुख्य समस्या यह है कि प्रत्येक टुकड़े की पृष्ठभूमि को पृष्ठभूमि में किनारे पर कटौती की आवश्यकता होती है। ड्रैग करते समय कटौती का विस्तार करना चाहिए। क्या आपके पास कोई विचार है कि इसे कैसे करें?

ऐसा नहीं है कि तरह दिखना चाहिए:

Answer 1

यू Git में बह दराज उल्लेख

लिंक कर सकते हैं: https://github.com/mxn21/FlowingDrawer

इस नमूने में वे उपयोग कर रहे हैं एक "LeftDrawerLayout "इस प्रभाव को संभालने के लिए एक कस्टम वर्ग और इसकी संपत्ति फ़्लॉइंग व्यू द्वारा निर्धारित की जाती है।

कस्टम क्लास बनाने के लिए इसका उपयोग करें।

Answer 2

यह मेरा समाधान के प्रोटोटाइप है:

मैं कस्टम FrameLayout बनाया है और onDraw विधि ओवरराइड।

जल्द ही मैं टिप्पणियों और विवरण जोड़ देंगे, यह कैसे काम है, यह यह की तरह लग रहा है कि कैसे है!

public class CurvedFrameLayout extends FrameLayout { 

    private Paint paint; 
    private Path path; 
    private int width; 
    private int height; 
    private float leftCurvePosition = 0.5f; 
    private float topCurvePosition = 0.5f; 
    private float rightCurvePosition = 0.5f; 
    private float bottomCurvePosition = 0.5f; 
    private int minimumCurve = 50; 
    private int maximumCurve = 100; 

    private int minimumLeftCurve = minimumCurve; 
    private int minimumTopCurve = minimumCurve; 
    private int minimumRightCurve = minimumCurve; 
    private int minimumBottomCurve = minimumCurve; 

    private int maximumLeftCurve = maximumCurve; 
    private int maximumTopCurve = maximumCurve; 
    private int maximumRightCurve = maximumCurve; 
    private int maximumBottomCurve = maximumCurve; 

    private float leftCurveOffset = 0f; 
    private float topCurveOffset = 0f; 
    private float rightCurveOffset = 0f; 
    private float bottomCurveOffset = 0f; 

    private int curveRadius = 150; 
    private float elevation = 4f; 
    private float cornerRadius = 50f; 
    private float margin = elevation; 
    private int color = Color.LTGRAY; 


    public CurvedFrameLayout(Context context) { 
     super(context); 
     init(context, null); 
    } 

    public CurvedFrameLayout(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(context, attrs); 
    } 

    public CurvedFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     init(context, attrs); 
    } 

    private void init(Context context, AttributeSet attrs) { 
     if (attrs != null) { 
      TypedArray a = context.getTheme().obtainStyledAttributes(
        attrs, 
        R.styleable.CurvedFrameLayout, 
        0, 0); 

      try { 
       leftCurvePosition = a.getFloat(R.styleable.CurvedFrameLayout_leftCurvePosition, 0.5f); 
       topCurvePosition = a.getFloat(R.styleable.CurvedFrameLayout_topCurvePosition, 0.5f); 
       rightCurvePosition = a.getFloat(R.styleable.CurvedFrameLayout_rightCurvePosition, 0.5f); 
       bottomCurvePosition = a.getFloat(R.styleable.CurvedFrameLayout_bottomCurvePosition, 0.5f); 

       minimumCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_minimumCurve, 50); 
       maximumCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_maximumCurve, 100); 

       minimumLeftCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_minimumLeftCurve, 50); 
       minimumTopCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_minimumTopCurve, 50); 
       minimumRightCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_minimumRightCurve, 50); 
       minimumBottomCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_minimumBottomCurve, 50); 

       maximumLeftCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_maximumLeftCurve, 100); 
       maximumTopCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_maximumTopCurve, 100); 
       maximumRightCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_maximumRightCurve, 100); 
       maximumBottomCurve = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_maximumBottomCurve, 100); 

       leftCurveOffset = a.getFloat(R.styleable.CurvedFrameLayout_leftCurveOffset, 0f); 
       topCurveOffset = a.getFloat(R.styleable.CurvedFrameLayout_topCurveOffset, 0f); 
       rightCurveOffset = a.getFloat(R.styleable.CurvedFrameLayout_rightCurveOffset, 0f); 
       bottomCurveOffset = a.getFloat(R.styleable.CurvedFrameLayout_bottomCurveOffset, 0f); 

       curveRadius = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_curveRadius, 150); 
       cornerRadius = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_cornerRadius, 50); 
       elevation = a.getDimensionPixelSize(R.styleable.CurvedFrameLayout_elevation, 0); 
       margin = elevation; 
       color = a.getColor(R.styleable.CurvedFrameLayout_color, Color.LTGRAY); 
      } finally { 
       a.recycle(); 
      } 
     } 

     setWillNotDraw(false); 
     paint = new Paint(); 
     //setLayerType(LAYER_TYPE_SOFTWARE, paint); 
     paint.setColor(color); 
     paint.setShadowLayer(elevation, 0f, 0f, Color.LTGRAY); 
     path = new Path(); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 
     drawLayout(canvas); 
    } 

    private void drawLayout(Canvas canvas) { 

     float cornerRadiusMargin = cornerRadius + margin; 
     float widthMinusMargin = width - margin; 
     float widthMinusMarginMinusCornerR = widthMinusMargin - cornerRadius; 
     float heightMinusMargin = height - margin; 
     float heightMinusMarginMinusCornerR = heightMinusMargin - cornerRadius; 

     //Top-left corner 
     path.reset(); 
     path.moveTo(margin, cornerRadiusMargin); 
     path.quadTo(margin, margin, cornerRadiusMargin, margin); 

     //Top line 
     drawTopEdge(cornerRadiusMargin, margin, widthMinusMarginMinusCornerR, margin); 

     //Top-right corner 
     path.quadTo(widthMinusMargin, margin, widthMinusMargin, cornerRadiusMargin); 

     //Right line 
     drawRightEdge(widthMinusMargin, cornerRadiusMargin, widthMinusMargin, heightMinusMarginMinusCornerR); 

     //Bottom-right corner 
     path.quadTo(widthMinusMargin, heightMinusMargin, widthMinusMarginMinusCornerR, heightMinusMargin); 

     //Bottom line 
     path.lineTo(cornerRadiusMargin, heightMinusMargin); 

     //Bottom-left corner 
     path.quadTo(margin, heightMinusMargin, margin, heightMinusMarginMinusCornerR); 

     //Left line 
     drawLeftEdge(margin, heightMinusMarginMinusCornerR, margin, cornerRadiusMargin); 

     canvas.drawPath(path, paint); 
     canvas.clipPath(path, Region.Op.REPLACE); 
    } 

    private void drawTopEdge(float x1, float y1, float x2, float y2) { 
     float curveCenterX = (x1 + x2) * topCurvePosition; 
     float curveDeltaY = positionForOffset(minimumTopCurve, maximumTopCurve, topCurveOffset); 

     int curveX = curveRadius/2; 
     path.lineTo(curveCenterX - curveRadius, y1); 
     path.rCubicTo(curveX, 0, curveX, curveDeltaY, curveRadius, curveDeltaY); 
     path.rCubicTo(curveX, 0, curveX, -curveDeltaY, curveRadius, -curveDeltaY); 
     path.lineTo(x2, y2); 
    } 

    private void drawRightEdge(float x1, float y1, float x2, float y2) { 
     float curveCenterY = (y1 + y2) * rightCurvePosition; 
     float curveDeltaX = positionForOffset(minimumRightCurve, maximumRightCurve, rightCurveOffset); 

     path.lineTo(x1, curveCenterY - curveRadius); 
     int curveY = curveRadius/2; 
     path.rCubicTo(0, curveY, -curveDeltaX, curveY, -curveDeltaX, curveRadius); 
     path.rCubicTo(0, curveY, curveDeltaX, curveY, curveDeltaX, curveRadius); 
     path.lineTo(x2, y2); 
    } 

    private void drawLeftEdge(float x1, float y1, float x2, float y2) { 
     float curveCenterY = (y1 + y2) * leftCurvePosition; 
     float curveDeltaX = positionForOffset(minimumLeftCurve, maximumLeftCurve, leftCurveOffset); 

     path.lineTo(x1, curveCenterY + curveRadius); 
     int curveY = -curveRadius/2; 
     path.rCubicTo(0, curveY, curveDeltaX, curveY, curveDeltaX, -curveRadius); 
     path.rCubicTo(0, curveY, -curveDeltaX, curveY, -curveDeltaX, -curveRadius); 
     path.lineTo(x2, y2); 
    } 

    private float positionForOffset(float start, float end, float offset) { 
     return start + (end - start) * offset; 
    } 


    @Override 
    protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
     super.onSizeChanged(w, h, oldw, oldh); 
     width = w; 
     height = h; 
    } 

    public void setLeftCurveOffset(float leftCurveOffset) { 
     this.leftCurveOffset = leftCurveOffset; 
     invalidate(); 
    } 

    public void setRightCurveOffset(float rightCurveOffset) { 
     this.rightCurveOffset = rightCurveOffset; 
     invalidate(); 
    } 
} 

इस समय, कोड सही नहीं है, लेकिन जैसे ही मैं इस कोड में सुधार मैं जवाब अपडेट करेंगे।