XML定義を使用して三角形を作成しますか？
Xmlファイルで三角形を指定する方法はありますか？
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="triangle">
<stroke Android:width="1dip" Android:color="#FFF" />
<solid Android:color="#FFF" />
</shape>
これをパスシェイプなどで実行できますか？正三角形が必要です。
ありがとう
この投稿 でその方法を説明します。そして、これが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="@color/transparent" Android:width="10dp"/>
<solid
Android:color="@color/your_color_here" />
</shape>
</rotate>
</item>
</layer-list>
不明な点がある場合や、構築方法の説明が必要な場合は、私の投稿を参照してください。それは切り抜き長方形を回転させます:)それは非常にスマートでうまく機能するソリューションです。
編集：->のような矢印を作成するには：
...
Android:fromDegrees="45"
Android:toDegrees="45"
Android:pivotX="13%"
Android:pivotY="-40%" >
...
<-のような矢印を作成するには、次を使用します。
Android:fromDegrees="45"
Android:toDegrees="45"
Android:pivotX="87%"
Android:pivotY="140%" >
<TextView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:text="▼"/>
こちら より多くのオプションを取得できます。
vectorを使用して、このような三角形を作成できます
ic_triangle_right.xml
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:width="24dp"
Android:height="24dp"
Android:viewportWidth="24.0"
Android:viewportHeight="24.0">
<path
Android:pathData="M0,12l0,12 11.5,-5.7c6.3,-3.2 11.5,-6 11.5,-6.3 0,-0.3 -5.2,-3.1 -11.5,-6.3l-11.5,-5.7 0,12z"
Android:strokeColor="#00000000"
Android:fillColor="#000000"/>
</vector>
そして、それを次のように使用します
<ImageView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_triangle_right"
/>
色と方向を変更するには、Android:tintとAndroid:rotationを使用します
<ImageView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_triangle_right"
Android:rotation="180" // change direction
Android:tint="#00f" // change color
/>
結果
ベクトルの形状を変更するには、ベクトルの幅/高さを変更できます。幅を10dpに変更する例
<vector
Android:width="10dp"
Android:height="24dp"
>
...
</vector>
vector drawables を使用できます。
最小APIが21未満の場合、Android Studioはビルド時にそれらの下位バージョンのPNGビットマップを自動的に作成します（ Vector Asset Studio を参照）。サポートライブラリを使用する場合、AndroidはAPI 7までの「実際のベクトル」を管理します（詳細については、この投稿の下部の更新で）。
赤い上向きの三角形は次のようになります。
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="100dp"
Android:width="100dp"
Android:viewportHeight="100"
Android:viewportWidth="100" >
<group
Android:name="triableGroup">
<path
Android:name="triangle"
Android:fillColor="#FF0000"
Android:pathData="m 50,0 l 50,100 -100,0 z" />
</group>
</vector>
レイアウトに追加し、三角形を回転させる場合は、clipChildren = "false"を忘れずに設定してください。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:clipChildren="false">
<ImageView
Android:layout_width="130dp"
Android:layout_height="100dp"
Android:rotation="0"
Android:layout_centerInParent="true"
Android:background="@drawable/triangle"/>
</RelativeLayout>
ビューのlayout_width/layout_height属性を設定して、三角形のサイズ（幅/高さ）を変更します。このように、正しい計算を行うと、等辺三角形も得られます。
2017年11月25日更新
サポートライブラリを使用する場合、API 7までさかのぼる（ビットマップ作成の代わりに）実際のベクトルを使用できます。追加するだけです：
vectorDrawables.useSupportLibrary = true
モジュールのbuild.gradleでdefaultConfigを実行します。
次に、（ベクターxml）ドロウアブルを次のように設定します。
<ImageView
Android:layout_height="wrap_content"
Android:layout_width="wrap_content"
app:srcCompat="@drawable/triangle" />
すべてが Vector Asset Studio ページに非常にうまく文書化されています。
この機能以来、私はアイコンの観点からビットマップなしで完全に作業してきました。 これによりAPKサイズもかなり小さくなります。
この場合、Viewを実装することは間違いなくあります。
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 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;
Path path = new Path();
path.moveTo( w, 0);
path.lineTo( 2 * w , 0);
path.lineTo( 2 * w , w);
path.lineTo( w , 0);
path.close();
Paint p = new Paint();
p.setColor( Color.RED );
canvas.drawPath(path, p);
}
}
次のようにレイアウトで使用します。
<TriangleShapeView
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="#ff487fff">
</TriangleShapeView>
この実装を使用すると、次の結果が得られます。
Jacek Milewskiの解 は私にとっては有効であり、彼の解に基づいて、必要であれば逆三角形を使用できます。
<?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="135%"
Android:pivotY="15%">
<shape Android:shape="rectangle">
<solid Android:color="@color/aquamarine" />
</shape>
</rotate>
</item>
</layer-list>
こちらの回答をご覧ください： 画像のないカスタム矢印：Android
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:width="32dp"
Android:height="24dp"
Android:viewportWidth="32.0"
Android:viewportHeight="24.0">
<path Android:fillColor="#e4e4e8"
Android:pathData="M0 0 h32 l-16 24 Z"/>
</vector>
without XMLを使用してお手伝いできますか？
単に、
カスタムレイアウト（スライス）：
import Android.content.Context;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.graphics.Paint.Style;
import Android.graphics.Path;
import Android.graphics.Point;
import Android.util.AttributeSet;
import Android.view.View;
public class Slice extends View {
Paint mPaint;
Path mPath;
public enum Direction {
NORTH, SOUTH, EAST, WEST
}
public Slice(Context context) {
super(context);
create();
}
public Slice(Context context, AttributeSet attrs) {
super(context, attrs);
create();
}
public void setColor(int color) {
mPaint.setColor(color);
invalidate();
}
private void create() {
mPaint = new Paint();
mPaint.setStyle(Style.FILL);
mPaint.setColor(Color.RED);
}
@Override
protected void onDraw(Canvas canvas) {
mPath = calculate(Direction.SOUTH);
canvas.drawPath(mPath, mPaint);
}
private Path calculate(Direction direction) {
Point p1 = new Point();
p1.x = 0;
p1.y = 0;
Point p2 = null, p3 = null;
int width = getWidth();
if (direction == Direction.NORTH) {
p2 = new Point(p1.x + width, p1.y);
p3 = new Point(p1.x + (width / 2), p1.y - width);
} else if (direction == Direction.SOUTH) {
p2 = new Point(p1.x + width, p1.y);
p3 = new Point(p1.x + (width / 2), p1.y + width);
} else if (direction == Direction.EAST) {
p2 = new Point(p1.x, p1.y + width);
p3 = new Point(p1.x - width, p1.y + (width / 2));
} else if (direction == Direction.WEST) {
p2 = new Point(p1.x, p1.y + width);
p3 = new Point(p1.x + width, p1.y + (width / 2));
}
Path path = new Path();
path.moveTo(p1.x, p1.y);
path.lineTo(p2.x, p2.y);
path.lineTo(p3.x, p3.y);
return path;
}
}
あなたの活動（例）：
import Android.app.Activity;
import Android.graphics.Color;
import Android.os.Bundle;
import Android.view.ViewGroup.LayoutParams;
import Android.widget.LinearLayout;
public class Layout extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Slice mySlice = new Slice(getApplicationContext());
mySlice.setBackgroundColor(Color.WHITE);
setContentView(mySlice, new LinearLayout.LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
}
作業例：
あなたが興味を持っているかもしれないもう一つの絶対にシンプルなCalculate関数..
private Path Calculate(Point A, Point B, Point C) {
Path Pencil = new Path();
Pencil.moveTo(A.x, A.y);
Pencil.lineTo(B.x, B.y);
Pencil.lineTo(C.x, C.y);
return Pencil;
}
直角三角形の矢印が必要な場合は、次をご覧ください。
ステップ1：描画可能なXMLファイルを作成し、次のXMLコンテンツをコピーして描画可能なXMLに貼り付けます。 （描画可能なXMLファイルには任意の名前を使用できます。私の場合、「v_right_arrow」という名前を付けます）
<?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="15%"
Android:pivotY="-36%" >
<shape
Android:shape="rectangle" >
<stroke Android:color="@Android:color/transparent" Android:width="1dp"/>
<solid
Android:color="#000000" />
</shape>
</rotate>
</item>
</layer-list>
STEP 2：レイアウトのXMLでビューを作成し、その背景を作成したばかりの描画可能なXMLにバインドしますステップ1。私の場合、v_right_arrowをビューの背景プロパティにバインドします。
<View
Android:layout_width="200dp"
Android:layout_height="200dp"
Android:background="@drawable/v_right_arrow">
</View>
サンプル出力：
これがお役に立てば幸いです！
次のxmlを使用して、次の三角形をバックグラウンドで追加できます。
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:height="100dp"
Android:width="100dp"
Android:viewportHeight="100"
Android:viewportWidth="100" >
<group
Android:name="triableGroup">
<path
Android:name="triangle"
Android:fillColor="#848af8"
Android:pathData="M 0,20 L 0,0 L 100,0 L 100,20 L 54,55 l -1,0.6 l -1,0.4 l -1,0.2 l -1,0 l -1,-0 l -1,-0.2 l -1,-0.4 l -1,-0.6 L 46,55 L 0,20 -100,-100 Z" />
</group>
</vector>
XMLデザインをカスタマイズするためのロジック全体は、パスデータにあります。左上の（0,0）を考慮し、要件に従ってレイアウトを設計します。 this answerを確認してください。
<?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="0dp"/>
<solid
Android:color="#fff" />
</shape>
</rotate>
</item>
</layer-list>
ベクトルDrawableの使用：
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:width="24dp"
Android:height="24dp"
Android:viewportWidth="24.0"
Android:viewportHeight="24.0">
<path
Android:pathData="M0,0 L24,0 L0,24 z"
Android:strokeColor="@color/color"
Android:fillColor="@color/color"/>
</vector>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<rotate
Android:fromDegrees="45"
Android:pivotX="135%"
Android:pivotY="1%"
Android:toDegrees="45">
<shape Android:shape="rectangle">
<stroke
Android:width="-60dp"
Android:color="@Android:color/transparent" />
<solid Android:color="@color/orange" />
</shape>
</rotate>
</item>
</layer-list>
私はパーティーに遅刻し、同じ問題に遭遇しました。Googleは最初の結果としてこのStackOverflowスレッドを指摘しました。
Xmlの方法を使用して三角形を追加し、xmlアプローチによる三角形の形状が表示されるよりも多くのスペースを使用しているという問題を見つけました。
レイアウト境界がオンのスクリーンショットを見る
そのため、次のタイプの三角形を描画できるこのカスタムビュークラスを作成することになりました。
- 上向き
- 下向き
- 左向き＆
- 右向き
と同じように
package com.hiteshsahu.materialupvotewidget;
import Android.content.Context;
import Android.graphics.Canvas;
import Android.graphics.Color;
import Android.graphics.Paint;
import Android.graphics.Path;
import Android.support.annotation.NonNull;
import Android.util.AttributeSet;
import Android.view.View;
public class TriangleShapeView extends View {
private int colorCode = Color.DKGRAY;
public int getColorCode() {
return colorCode;
}
public void setColorCode(int colorCode) {
this.colorCode = colorCode;
}
public TriangleShapeView(Context context) {
super(context);
if (isInEditMode())
return;
}
public TriangleShapeView(Context context, AttributeSet attrs) {
super(context, attrs);
if (isInEditMode())
return;
}
public TriangleShapeView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
if (isInEditMode())
return;
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int w = getWidth() / 2;
int h = getHeight() / 2;
//Choose what type of triangle you want here
Path path = getLeftTriangle(w, h);
path.close();
Paint p = new Paint();
p.setColor(colorCode);
p.setAntiAlias(true);
canvas.drawPath(path, p);
}
@NonNull
/**
* Return Path for down facing triangle
*/
private Path getInvertedTriangle(int w, int h) {
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(w, 2 * h);
path.lineTo(2 * w, 0);
path.lineTo(0, 0);
return path;
}
@NonNull
/**
* Return Path for Up facing triangle
*/
private Path getUpTriangle(int w, int h) {
Path path = new Path();
path.moveTo(0, 2 * h);
path.lineTo(w, 0);
path.lineTo(2 * w, 2 * h);
path.lineTo(0, 2 * h);
return path;
}
@NonNull
/**
* Return Path for Right pointing triangle
*/
private Path getRightTriangle(int w, int h) {
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(2 * w, h);
path.lineTo(0, 2 * h);
path.lineTo(0, 0);
return path;
}
@NonNull
/**
* Return Path for Left pointing triangle
*/
private Path getLeftTriangle(int w, int h) {
Path path = new Path();
path.moveTo(2 * w, 0);
path.lineTo(0, h);
path.lineTo(2 * w, 2 * h);
path.lineTo(2 * w, 0);
return path;
}
}
このように単純にXMLレイアウトで使用できます
<com.hiteshsahu.materialupvote.TriangleShapeView
Android:layout_width="50dp"
Android:layout_height="50dp"></com.hiteshsahu.materialupvote.TriangleShapeView>
私はOPがxmlソリューションでソリューションを望んでいることを知っていますが、xmlアプローチの問題を指摘したように。私はそれが誰かを助けるかもしれないことを望みます。
私はこれをやったことがありませんが、私が理解していることからPathShapeクラスを使用できます： http://developer.Android.com/reference/Android/graphics/drawable/shapes/PathShape.html
Jacek Milewski のソリューションを使用して、透明な背景で下向きの角度を作成しました。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item>
<rotate
Android:fromDegrees="135"
Android:pivotX="65%"
Android:pivotY="20%"
Android:toDegrees="135"
>
<shape Android:shape="rectangle">
<stroke
Android:width="1dp"
Android:color="@color/blue"
/>
<solid Android:color="@color/transparent" />
</shape>
</rotate>
</item>
</layer-list>
Android:pivotXとAndroid:pivotYを変更して、角度をシフトできます。
使用法：
<ImageView
Android:layout_width="10dp"
Android:layout_height="10dp"
Android:src="@drawable/ic_angle_down"
/>
パラメータは画像のサイズに依存します。たとえば、ImageViewのサイズが100dp * 80dpの場合、これらの定数を使用する必要があります。
<rotate
Android:fromDegrees="135"
Android:pivotX="64.5%"
Android:pivotY="19%"
Android:toDegrees="135"
>
Androidナビゲーションバーの戻るボタンのような三角形の画像を作成しようとしましたが、解決策が見つかりませんでした。
今、私は自分自身で解決策を見つけ、それを共有したいと思います。
以下のxmlを使用
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item
Android:bottom="20dp"
Android:left="480dp"
Android:right="60dp"
Android:top="20dp">
<shape>
<size Android:width="60dp" />
<corners Android:radius="80dp"/>
<solid Android:color="#AAA" />
</shape>
</item>
<item
Android:bottom="480dp"
Android:right="70dp"
Android:top="20dp">
<rotate
Android:fromDegrees="-28"
Android:pivotX="96%"
Android:pivotY="50%"
Android:toDegrees="-20">
<shape>
<corners Android:radius="80dp"/>
<size Android:height="60dp" />
<solid Android:color="#AAA" />
</shape>
</rotate>
</item>
<item
Android:bottom="20dp"
Android:right="70dp"
Android:top="480dp">
<rotate
Android:fromDegrees="28"
Android:pivotX="96%"
Android:pivotY="50%"
Android:toDegrees="-20">
<shape>
<corners Android:radius="80dp"/>
<size Android:height="60dp" />
<solid Android:color="#AAA" />
</shape>
</rotate>
</item>
<LinearLayout
Android:id="@+id/ly_fill_color_shape"
Android:layout_width="300dp"
Android:layout_height="300dp"
Android:layout_gravity="center"
Android:background="@drawable/shape_triangle"
Android:gravity="center"
Android:orientation="horizontal" >
</LinearLayout>
<item>
<rotate
Android:fromDegrees="45"
Android:pivotX="-15%"
Android:pivotY="77%"
Android:toDegrees="45" >
<shape Android:shape="rectangle" >
<stroke
Android:width="2dp"
Android:color="@color/black_color" />
<solid Android:color="@color/white" />
<padding Android:left="1dp" />
</shape>
</rotate>
</item>
<item Android:top="200dp">
<shape Android:shape="line" >
<stroke
Android:width="1dp"
Android:color="@color/black_color" />
<solid Android:color="@color/white" />
</shape>
</item>