Android上的箭头textview形状

时间:2016-02-20 09:22:20

标签: java android eclipse

textview必须以箭头结束,第二个示例应以箭头开头。请看下面的图片 textview arrow shape

如何使用eclipse在android java上实现这一点?

我只能找到的方法是将红色bgcolor提供给textview并粘贴到最后一张图片(箭头)

3 个答案:

答案 0 :(得分:3)

我认为以编程方式执行此操作会更好,类似:

package com.example.trist_000.alarm;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.widget.LinearLayout;
import android.widget.TextView;
public class customPrice extends LinearLayout {

TextView text1;
TextView text2;

public customPrice(Context context) {
    super(context);
}

public customPrice(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.setWillNotDraw(false);
    this.setOrientation(HORIZONTAL);
    text1 = new TextView(context);
    text1.setText("2.00 $ base price");
    text1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    text2 = new TextView(context);
    text2.setText("1+1 offer");
    text2.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    this.addView(text1);
    this.addView(text2);
}

Paint paint = new Paint();
Path path;

@Override
public void onDraw(Canvas canvas){
    int gap = 5;

    paint.setStyle(Paint.Style.FILL);
    paint.setStrokeWidth(2);
    paint.setColor(Color.RED);
    paint.setAntiAlias(true);
    path = new Path();
    path.moveTo(0, 0);
    path.lineTo(text1.getWidth(), 0);
    path.lineTo(text1.getWidth() - 5, text1.getHeight() / 2);
    path.lineTo(text1.getWidth(), text1.getHeight());
    path.lineTo(0, text1.getHeight());
    path.lineTo(0, 0);

    path.moveTo(text1.getWidth() + gap, 0);
    path.lineTo(text1.getWidth() + text2.getWidth() + gap, 0);
    path.lineTo(text1.getWidth()+text2.getWidth()+gap -5, text2.getHeight()/2);
    path.lineTo(text1.getWidth()+text2.getWidth()+gap, text2.getHeight());
    path.lineTo(text1.getWidth()+gap, text2.getHeight());
    path.lineTo(text1.getWidth()+gap-5, text2.getHeight()/2);

    path.close();
    canvas.drawPath(path, paint);
    super.onDraw(canvas);
}
}

在xml中我做到了:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<com.example.trist_000.alarm.customPrice
    android:layout_marginLeft="3dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></com.example.trist_000.alarm.customPrice>

它并不完美,需要在平局中改变一些东西,但我认为这是一个好的开始。可变间隙是第一次抽奖和第二次抽奖之间的差异。 您必须通过自己的路径替换com.example.trist_000.alarm。 这就是我所拥有的: Arrow

答案 1 :(得分:2)

制作drawable / arrow_shape.xml并使用以下代码:

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

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="#5EB888" />
            <corners android:radius="0dp"/>
        </shape>
    </item>

    <item
    android:top="-40dp"
    android:bottom="65dp"
    android:left="-30dp"
    android:right="-10dp">
    <rotate
        android:fromDegrees="135">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

    <item
        android:top="-10dp"
        android:bottom="0dp"
        android:left="65dp"

        android:right="-15dp">

        <rotate
            android:fromDegrees="130">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
                <corners
                    android:radius="1dp"
                    android:bottomLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>

    <item
        android:top="10dp"
        android:width="-50dp"
        android:bottom="5dp"
        android:left="60dp"
        android:right="-5dp">

        <rotate
            android:fromDegrees="230">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

    <item
        android:top="65dp"
        android:bottom="-40dp"
        android:left="-22dp"
        android:right="-20dp">
        <rotate
            android:fromDegrees="-320">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

</layer-list>

然后在任何TextView android:background="@drawable/arrow_shape"上使用它,结果是:

enter image description here

您还可以查看此library并在文字视图中执行您想要的任何形状

希望它有所帮助!!!

答案 2 :(得分:0)

您可以检查此仓库以获取此箭头形状https://github.com/imranhsn/ArrowShape

<com.example.arrowshape.shapes.BubbleView
    android:layout_width="200dp"
    android:layout_marginTop="20dp"
    app:shape_bubble_borderRadius="0dp"
    app:shape_bubble_arrowPosition="left"
    app:shape_bubble_arrowHeight="60dp"
    app:shape_bubble_arrowWidth="100dp"
    android:layout_height="100dp">

    // your child layout

</com.example.arrowshape.shapes.BubbleView>

enter image description here