Android, как создать программный треугольник и прямоугольник?

Как мы можем создать форму шара, как показано ниже. Где мы можем изменить цвет его динамически. Введите описание изображения здесь

Solutions Collecting From Web of "Android, как создать программный треугольник и прямоугольник?"

Здесь это 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> 

И макет для формы, в которой вы нуждаетесь.

 <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" /> 

Введите описание изображения здесь

Установите маржу в соответствии с требованиями.

Источник

Если вам нужна рамка для вашего макета

Введите описание изображения здесь

 <?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> 1 <?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 , или вы можете создать треугольник по вектору, как здесь

 <?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> 1 <?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> 

Чистый и правильный способ сделать это, сохраняя динамику, – это расширить класс 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(ax, ay); path.lineTo(bx, by); path.lineTo(cx, cy); path.lineTo(dx, dy); path.lineTo(ex, ey); path.lineTo(fx, fy); path.lineTo(gx, gy); canvas.drawPath(path, mPointedBackgroundPaint);// mPointedBackgroundPaint is whatever color you want as the fill. } 

Там вы идете, нет ненужного слоя или кода, который не является динамическим или чистым. Вы также можете добавить текст в поле.

Используйте изображение треугольника и прямоугольное изображение и математически выровняйте их в вышеупомянутом формате. Используйте цветную фильтрацию для динамического изменения цвета.

Вы можете даже нарисовать их на пользовательском представлении, используя векторную графику, используя пользовательские цвета, и это будет другим способом решения этой проблемы.

Используйте Canvas в методе onDraw внутри пользовательского класса View .

Другой способ – использовать класс Path .

Сначала вы можете создать одну внутреннюю папку с xml

Этот 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 – это имя файла xml, которое было сохранено в папке с возможностью копирования

После этого вам нужно поместить этот треугольник точно под прямоугольник.

Надеюсь, вы поняли мою логику

Создание пользовательского представления и рисование поцелуев с холстом

 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); } } 

результат

Введите описание изображения здесь

Применение

 <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" /> 

преимущества

  • Измените форму в соответствии с шириной и высотой просмотра.
  • Возможна высокая настройка.
  • Смотри очистить