在 android 中绘制自定义可绘制形状
Draw custom drawable shape in android
我想在 xml 布局中绘制自定义形状，如下所示：
我尝试在 XML 中编写一些代码，但我不明白如何为这个阴影的轮廓赋予阴影效果。
我做了什么：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:width="120dp"
android:height="36dp"
android:bottom="6dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="@color/color_white"
android:startColor="@color/color_white"
android:type="linear" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>
我得到的结果：
任何人都可以建议我如何像上面提到的图片那样给轮廓添加阴影？或任何其他解决方案，如 9 补丁图像。我怎样才能画出这样的9个补丁图像？
更好的方法不要使用 layer-list
创建整个形状
- 使用它的主要缺点是你需要固定
hight 和 width of shape
使用简单的方法只需使用 layer-list 创建顶部箭头，然后使用下面的示例
试试这个
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="10dp"
android:src="@drawable/test" />
<LinearLayout
android:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text=" Lorem ipsum dolor sit amet, consectetur adipiscing elit"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text=" Lorem ipsum dolor sit amet, consectetur adipiscing elit"
android:textColor="@android:color/black" />
</LinearLayout>
</LinearLayout>
@drawable/test"
<?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="-40%"
android:pivotY="87%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="@android:color/white" />
<solid android:color="@android:color/white" />
</shape>
</rotate>
</item>
</layer-list>
输出
**Try this:**
> **if you remove corner then delete <corners android:radius="@dimen/dp_5"/> this line.**
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="@dimen/dp_30"
android:height="@dimen/font_20"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="60%"
android:pivotY="80%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<solid android:color="@color/white"/>
</shape>
</rotate>
</item>
<item
android:width="120dp"
android:height="36dp"
android:bottom="6dp">
<shape android:shape="rectangle">
<corners android:radius="@dimen/dp_5"/>
<solid android:color="@color/white"/>
</shape>
</item>
</layer-list>
您创建分层形状
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="120dp"
android:height="36dp"
>
<shape>
<padding
android:bottom="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item
android:width="120dp"
android:height="36dp"
>
<shape>
<padding
android:bottom="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item
android:width="120dp"
android:height="36dp"
>
<shape>
<padding
android:bottom="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="70%"
android:pivotY="40%"
android:toDegrees="45">
<shape android:shape="rectangle">
<gradient android:type="linear" android:angle="270" android:startColor="#05CCCCCC" android:endColor="#05CCCCCC"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="70%"
android:pivotY="40%"
android:toDegrees="45">
<shape android:shape="rectangle">
<gradient android:type="linear" android:angle="270" android:startColor="#20CCCCCC" android:endColor="#20CCCCCC"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="60%"
android:pivotY="45%"
android:toDegrees="45">
<shape android:shape="rectangle">
<gradient android:type="linear" android:angle="270" android:startColor="#30CCCCCC" android:endColor="#30CCCCCC"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:top="1dp"
android:width="120dp"
android:height="36dp"
android:bottom="5dp">
<shape android:shape="rectangle">
<gradient
android:endColor="@android:color/white"
android:startColor="@android:color/white"
android:type="linear" />
</shape>
</item>
</layer-list>
输出：
试试这个
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="121dp"
android:height="37dp"
android:bottom="5dp">
<shape android:shape="rectangle">
<stroke
android:color="@color/lightgrey"
android:width="1dp"/>
</shape>
</item>
<item
android:width="21dp"
android:height="21dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:color="@color/lightgrey"
android:width="1dp"/>
<corners android:bottomRightRadius="0dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:width="120dp"
android:height="36dp"
android:bottom="6dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="@color/white"
android:startColor="@color/white"
android:type="linear" />
</shape>
</item>
</layer-list>
我想在 xml 布局中绘制自定义形状，如下所示：
我尝试在 XML 中编写一些代码，但我不明白如何为这个阴影的轮廓赋予阴影效果。
我做了什么：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:width="120dp"
android:height="36dp"
android:bottom="6dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="@color/color_white"
android:startColor="@color/color_white"
android:type="linear" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>
我得到的结果：
任何人都可以建议我如何像上面提到的图片那样给轮廓添加阴影？或任何其他解决方案，如 9 补丁图像。我怎样才能画出这样的9个补丁图像？
更好的方法不要使用 layer-list
- 使用它的主要缺点是你需要固定
hight和widthofshape
使用简单的方法只需使用 layer-list 创建顶部箭头，然后使用下面的示例
试试这个
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="10dp"
android:src="@drawable/test" />
<LinearLayout
android:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text=" Lorem ipsum dolor sit amet, consectetur adipiscing elit"
android:textColor="@color/colorAccent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text=" Lorem ipsum dolor sit amet, consectetur adipiscing elit"
android:textColor="@android:color/black" />
</LinearLayout>
</LinearLayout>
@drawable/test"
<?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="-40%"
android:pivotY="87%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:width="10dp"
android:color="@android:color/white" />
<solid android:color="@android:color/white" />
</shape>
</rotate>
</item>
</layer-list>
输出
**Try this:**
> **if you remove corner then delete <corners android:radius="@dimen/dp_5"/> this line.**
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="@dimen/dp_30"
android:height="@dimen/font_20"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="60%"
android:pivotY="80%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<solid android:color="@color/white"/>
</shape>
</rotate>
</item>
<item
android:width="120dp"
android:height="36dp"
android:bottom="6dp">
<shape android:shape="rectangle">
<corners android:radius="@dimen/dp_5"/>
<solid android:color="@color/white"/>
</shape>
</item>
</layer-list>
您创建分层形状
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="120dp"
android:height="36dp"
>
<shape>
<padding
android:bottom="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item
android:width="120dp"
android:height="36dp"
>
<shape>
<padding
android:bottom="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item
android:width="120dp"
android:height="36dp"
>
<shape>
<padding
android:bottom="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="70%"
android:pivotY="40%"
android:toDegrees="45">
<shape android:shape="rectangle">
<gradient android:type="linear" android:angle="270" android:startColor="#05CCCCCC" android:endColor="#05CCCCCC"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="70%"
android:pivotY="40%"
android:toDegrees="45">
<shape android:shape="rectangle">
<gradient android:type="linear" android:angle="270" android:startColor="#20CCCCCC" android:endColor="#20CCCCCC"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="60%"
android:pivotY="45%"
android:toDegrees="45">
<shape android:shape="rectangle">
<gradient android:type="linear" android:angle="270" android:startColor="#30CCCCCC" android:endColor="#30CCCCCC"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:top="1dp"
android:width="120dp"
android:height="36dp"
android:bottom="5dp">
<shape android:shape="rectangle">
<gradient
android:endColor="@android:color/white"
android:startColor="@android:color/white"
android:type="linear" />
</shape>
</item>
</layer-list>
输出：
试试这个
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="121dp"
android:height="37dp"
android:bottom="5dp">
<shape android:shape="rectangle">
<stroke
android:color="@color/lightgrey"
android:width="1dp"/>
</shape>
</item>
<item
android:width="21dp"
android:height="21dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<stroke
android:color="@color/lightgrey"
android:width="1dp"/>
<corners android:bottomRightRadius="0dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:width="20dp"
android:height="20dp"
android:gravity="top|left">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="45">
<shape android:shape="rectangle">
<corners android:bottomRightRadius="2dp"/>
<gradient android:type="linear" android:angle="270" android:startColor="#ffffff" android:endColor="#ffffff"/>
</shape>
</rotate>
</item>
<item
android:width="120dp"
android:height="36dp"
android:bottom="6dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="@color/white"
android:startColor="@color/white"
android:type="linear" />
</shape>
</item>
</layer-list>