web-dev-qa-db-ja.com

Android三角形と長方形の形状をプログラムで作成する方法

以下のように、バルーン描画可能シェイプを作成するにはどうすればよいですか。色を動的に変更することができます。 enter image description here

androidshapedrawable
52
Dory

ここでは、XMLとtriangleのrectangleです。描画可能なフォルダー内に保存します。

triangle.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item >
        <rotate
            Android:fromDegrees="45"
            Android:toDegrees="45"
            Android:pivotX="-40%"
            Android:pivotY="87%" >
            <shape
                Android:shape="rectangle"  >
                <stroke Android:color="@Android:color/transparent" Android:width="10dp"/>
                <solid
                    Android:color="#000000"  />
            </shape>
        </rotate>
    </item>
</layer-list>

rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item> 
    <shape Android:shape="rectangle">
      <solid Android:color="#B2E3FA" /> 
    </shape>
  </item>
</layer-list>

およびlayout必要な形状の場合。

<RelativeLayout
        Android:id="@+id/rlv1"
        Android:layout_width="150dp"
        Android:layout_height="50dp"
        Android:background="@drawable/rectangle" />

    <RelativeLayout
        Android:id="@+id/rlv2"
        Android:layout_width="50dp"
        Android:layout_height="50dp"  
        Android:layout_below="@+id/rlv1"
        Android:background="@drawable/triangle"
        Android:rotation="180" />

enter image description here

必要に応じてマージンを設定します。

ソース

55
Sanket Kachhela

レイアウトに境界線が必要な場合

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/linear_root"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="vertical"
    >

    <TextView
        Android:id="@+id/text_message"
        Android:layout_width="100dp"
        Android:layout_height="wrap_content"
        Android:background="@drawable/bg_rectangle"
        Android:layout_marginLeft="20dp"
        Android:layout_marginRight="20dp"
        Android:layout_marginTop="20dp"
        Android:padding="8dp"
        Android:text="Abc"
        />

    <ImageView
        Android:id="@+id/image_arrow"
        Android:layout_marginTop="-1.5dp"
        Android:layout_width="16dp"
        Android:layout_height="16dp"
        Android:layout_gravity="center_horizontal"
        Android:background="@drawable/icon_arrow_down"
        />
</LinearLayout>

bg_rectangle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <solid Android:color="#eaeaea" />
    <stroke
        Android:width="1dp"
        Android:color="#f00" />
    <corners Android:radius="8dp" />

</shape>

icon_arrow_down、または here のようなベクトルで三角形を作成できます

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

    <item>
        <rotate
            Android:fromDegrees="45"
            Android:pivotX="135%"
            Android:pivotY="15%"
            Android:toDegrees="45"
            >
            <shape Android:shape="rectangle">
                <solid Android:color="#eaeaea"/>
                <stroke
                    Android:width="1dp"
                    Android:color="#f00" />
            </shape>
        </rotate>
    </item>
</layer-list>
18
Phan Van Linh

動的に保ちながらこれを行うためのクリーンで正しい方法は、Viewクラスを拡張することです。

次に、onDrawで次のようにします。

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

    drawBackground(canvas);
}

private void drawBackground(Canvas canvas) {
    int width = (int) mWidth;
    int height = (int) mHeight;

    Point a = new Point(0, 0);
    Point b = new Point(width, 0);
    Point c = new Point(width, height - mPointHeight);//mPointedHeight is the length of the triangle... in this case we have it dynamic and can be changed.
    Point d = new Point((width/2)+(mPointedHeight/2), height - mPointHeight);
    Point e = new Point((width/2), height);// this is the sharp point of the triangle
    Point f = new Point((width/2)-(mPointedHeight/2), height - mPointHeight);
    Point g = new Point(0, height - mPointHeight);

    Path path = new Path();
    path.moveTo(a.x, a.y);
    path.lineTo(b.x, b.y);
    path.lineTo(c.x, c.y);
    path.lineTo(d.x, d.y);
    path.lineTo(e.x, e.y);
    path.lineTo(f.x, f.y);
    path.lineTo(g.x, g.y);

    canvas.drawPath(path, mPointedBackgroundPaint);// mPointedBackgroundPaint is whatever color you want as the fill.
}

不要な階層化や動的またはクリーンでないコードはありません。ボックスにテキストを追加することもできます。

5
Jessicardo

カスタムビューを作成し、キャンバスでトレイングルを描画する

package com.example.dickbutt;

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.view.View;

public class TriangleShapeView extends View {

    public int colorCode = Color.Magenta;

    public int getColorCode() {
        return colorCode;
    }

    public void setColorCode(int colorCode) {
        this.colorCode = colorCode;
    }

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

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

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

    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        int w = getWidth() / 2;
        int h = getHeight() / 2;

        Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(w, 2 * h);
        path.lineTo(2 * w, 0);
        path.lineTo(0, 0);

        path.close();

        Paint p = new Paint();
        p.setColor(colorCode);
        p.setAntiAlias(true);

        canvas.drawPath(path, p);
    }
}

結果

enter image description here

使用法

<TextView
    Android:id="@+id/progress_value"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_alignParentTop="true"
    Android:layout_centerHorizontal="true"
    Android:background="@Android:color/holo_purple"
    Android:gravity="center_horizontal"
    Android:text="200,0000000"
    Android:textColor="#fff" />

<com.example.dickbutt.TriangleShapeView
    Android:id="@+id/textView1"
    Android:layout_width="10dp"
    Android:layout_height="20dp"
    Android:layout_below="@+id/progress_value"
    Android:layout_centerHorizontal="true"
    Android:background="@drawable/rectangle"
    Android:gravity="center_horizontal"
    Android:textSize="10sp" />

利点

  • ビューの幅と高さに応じて形状を変更します。
  • 高度なカスタマイズが可能。
  • きれいに見える
1
Hitesh Sahu

三角形の画像と長方形の画像を使用し、上記の形式で数学的に整列させます。カラーフィルターを使用して、その色を動的に変更します。

ベクトルグラフィックス、カスタムカラーを使用して、カスタムビューにそれらを描画することもできます。これは、この問題を解決する別の方法です。

1
Aman Agnihotri

カスタムViewクラス内のonDrawメソッドで Canvas を使用します。

他の方法は、 パス クラスを使用することです。

0
Prettygeek

最初に、xmlフォルダー内にdrawableを1つ作成できます

xmlは、長方形の境界線の色を担当します。

以下のコードでそのような境界線形状を作成できます

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item> 
    <shape Android:shape="rectangle">
      <solid Android:color="#B2E3FA" /> 
    </shape>
  </item>   
    <item Android:left="5dp" Android:bottom="5dp"  Android:top="5dp" >  
     <shape Android:shape="rectangle"> 
      <solid Android:color="#D8D8D8" />
    </shape>
   </item>    
 </layer-list>

さて、これは長方形の形状に必要な境界線を作成します。この長方形の背景をこのようなドロウアブルに割り当てる必要があります

Android:background="@drawable/bg"

bgは、Drawableフォルダーに保存されたxmlファイル名です

その後、その三角形を長方形オブジェクトの真下に配置する必要があります。

あなたが私の論理を理解したことを願っています

0
Aamirkhan