如何创建平行四边形的背景？

Question

我正在尝试为我的textview制作平行四边形背景，但它没有正确显示...它显示在输出

<layer-list  >
    <item>
        <rotate
            android:fromDegrees="10"
            android:toDegrees="10"
            android:pivotX="-40%"
            android:pivotY="87%" >
            <shape
                android:shape="rectangle" >
                <stroke android:color="#000000" android:width="10dp"/>

            </shape>

        </rotate>

    </item>
</layer-list>

我需要这样的输出........

Answer 1

作为@mmlooloo回答的替代方案，我建议使用xml-drawable解决方案（因为你还没有强调你正在寻找什么样的解决方案）。在下面的示例中，我使用了一般View，但您可以使用其他任何内容。

以下是View

<View
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_centerInParent="true"
    android:background="@drawable/shape" />

和shape.xml本身

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size 
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#13a89e" />
    </shape>
</item>

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's background -->
<item
    android:right="100dp"
    android:left="-100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<item
    android:right="-100dp"
    android:left="100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

</layer-list>

以下是它的样子：

Answer 2

您可以通过以下方式创建自定义Textview来实现它：

public class ParallogramTextView extends TextView {


        Paint mBoarderPaint;
        Paint mInnerPaint;

        public ParallogramTextView(Context context) {
            super(context);
            init();
        }

        public ParallogramTextView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            init();
        }

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


        private void init() {
            mBoarderPaint = new Paint();
            mBoarderPaint.setAntiAlias(true);
            mBoarderPaint.setColor(Color.BLACK);
            mBoarderPaint.setStyle(Paint.Style.STROKE);
            mBoarderPaint.setStrokeWidth(6);   

            mInnerPaint = new Paint();
            mInnerPaint.setAntiAlias(true);
            mInnerPaint.setColor(Color.parseColor("#13a89e"));
            mInnerPaint.setStyle(Paint.Style.FILL);
            mInnerPaint.setStrokeJoin(Paint.Join.ROUND);
        }


        @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);
            Path path = new Path();
            path.moveTo(getWidth(),0);
            path.lineTo(getWidth()/2, 0);
            path.lineTo(0, getHeight());
            path.lineTo(getWidth()/2,getHeight());
            path.lineTo(getWidth(), 0);
            canvas.drawPath(path, mInnerPaint);
            canvas.drawPath(path, mBoarderPaint);
        }

}

并在布局文件中使用如下所示：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">



    <com.example.ParallogramTextView
        android:id = "@+id/result"
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:layout_centerInParent="true"
        android:gravity="center" 
        android:layout_margin="32dp" />


</RelativeLayout>

结果是：

Answer 3

INSERT OVERWRITE INTO target 
SELECT s.* FROM staging s LEFT JOIN target t
ON s.primaryKey = t.primaryKey AND s.distKey = t.distKey
WHERE t.primaryKey IS NULL;

这个适用于背景背景而不仅仅是像上面例子中的白色

Answer 4

您指的是导航菜单吗？如果是这样，您可以使用此代码制作平行四边形：

ul#nav li a {
display: inline-block;
text-decoration:none;
padding:4px 10px;
border-radius:3px;
transform: skew(-10deg);
-o-transform: skew(-10deg);
-moz-transform: skew(-10deg);
-webkit-transform: skew(-10deg);
color:#000000;
}
ul#nav li a span {
display: inline-block;
transform: skew(10deg);
-o-transform: skew(10deg);
-moz-transform: skew(10deg);
-webkit-transform: skew(10deg);
}

您还可以在codepen中查看HTML和CSS版本。

希望这有帮助。