如何使用 xml 在 android 中绘制来创建半圆填充形状?
How to create half circle filled shape using xml drawable in android?
我想使用 xml drawble 创建一个半填充的圆形?
像这样
这是我到目前为止所做的努力
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FCD83500"/>
<size
android:width="10dp"
android:height="5dp"/>
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"/>
</shape>
使用上面的代码我可以创建半圆但我不知道如何使半圆透明
我也访问过一些 SO post 但无法找到任何解决方案
- How to define a circle shape in an Android xml drawable file?
如果需要更多信息,请告诉我。提前致谢。您的努力将不胜感激。
更新
使用这个
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>
</rotate>
输出
最后我得到了使用 layer-list
实现此目的的解决方案
- A
LayerDrawable
是一个 drawable
对象,它管理其他 drawables
的数组。列表中的每个 drawable
都按列表的顺序绘制 - 列表中的最后一个 drawable
绘制在顶部。
我的代码
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="26px"
android:right="26px">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
<solid android:color="#00006AC5" />
<size
android:width="50dp"
android:height="50dp" />
<stroke
android:width="2dp"
android:color="#00BCD4" />
</shape>
</item>
<item
android:width="50dp"
android:height="25dp"
android:end="2dp"
android:gravity="center"
android:start="2dp"
android:top="22dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00BCD4" />
<size
android:width="10dp"
android:height="5dp" />
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp" />
</shape>
</item>
</layer-list>
输出
Note : feel free to post answer if you have any other solution's
我已经从 Vector Graphics 创建了代码:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>
输出将是:
现在如果你想按照你的角度显示:
您可以如下使用:
android:rotation="90"
在你的 ImageView
TextView
可绘制对象的更新:
为旋转可绘制对象创建自定义方法。
private Drawable rotate(Drawable drawable, int degree) {
Bitmap iconBitmap = ((BitmapDrawable) drawable).getBitmap();
Matrix matrix = new Matrix();
matrix.postRotate(degree);
Bitmap targetBitmap = Bitmap.createBitmap(iconBitmap, 0, 0, iconBitmap.getWidth(), iconBitmap.getHeight(), matrix, true);
return new BitmapDrawable(getResources(), targetBitmap);
}
使用如下:
Drawable result = rotate(ContextCompat.getDrawable(mContext, R.drawable.ic_round), 90);
yourTextView.setCompoundDrawablesWithIntrinsicBounds(result, null, null, null);
Note: If you will find SVG image as you want then you do now have to
do above code. I have tried to find image but didn't found so Rotation
code is necessary here.
希望对您有所帮助。
谢谢。
试试这个:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:color="#FCD83500"
android:width="1dp"/>
<size
android:width="20dp"
android:height="20dp"/>
<corners
android:radius="50dp"/>
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle">
<solid android:color="#FCD83500"/>
<size
android:width="20dp"
android:height="10dp"/>
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"/>
</shape>
</item>
</layer-list>
使用此代码制作半圆矢量图像。如果你想旋转矢量图像意味着使用带有旋转元素的组标签。参考这个
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
android:translateX="314.015"
android:rotation="90">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</group>
</vector>
我想使用 xml drawble 创建一个半填充的圆形?
像这样
这是我到目前为止所做的努力
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FCD83500"/>
<size
android:width="10dp"
android:height="5dp"/>
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"/>
</shape>
使用上面的代码我可以创建半圆但我不知道如何使半圆透明
我也访问过一些 SO post 但无法找到任何解决方案
- How to define a circle shape in an Android xml drawable file?
如果需要更多信息,请告诉我。提前致谢。您的努力将不胜感激。
更新
使用这个
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>
</rotate>
输出
最后我得到了使用 layer-list
实现此目的的解决方案
- A
LayerDrawable
是一个drawable
对象,它管理其他drawables
的数组。列表中的每个drawable
都按列表的顺序绘制 - 列表中的最后一个drawable
绘制在顶部。
我的代码
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="26px"
android:right="26px">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
<solid android:color="#00006AC5" />
<size
android:width="50dp"
android:height="50dp" />
<stroke
android:width="2dp"
android:color="#00BCD4" />
</shape>
</item>
<item
android:width="50dp"
android:height="25dp"
android:end="2dp"
android:gravity="center"
android:start="2dp"
android:top="22dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00BCD4" />
<size
android:width="10dp"
android:height="5dp" />
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp" />
</shape>
</item>
</layer-list>
输出
Note : feel free to post answer if you have any other solution's
我已经从 Vector Graphics 创建了代码:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>
输出将是:
现在如果你想按照你的角度显示:
您可以如下使用:
android:rotation="90"
在你的 ImageView
TextView
可绘制对象的更新:
为旋转可绘制对象创建自定义方法。
private Drawable rotate(Drawable drawable, int degree) {
Bitmap iconBitmap = ((BitmapDrawable) drawable).getBitmap();
Matrix matrix = new Matrix();
matrix.postRotate(degree);
Bitmap targetBitmap = Bitmap.createBitmap(iconBitmap, 0, 0, iconBitmap.getWidth(), iconBitmap.getHeight(), matrix, true);
return new BitmapDrawable(getResources(), targetBitmap);
}
使用如下:
Drawable result = rotate(ContextCompat.getDrawable(mContext, R.drawable.ic_round), 90);
yourTextView.setCompoundDrawablesWithIntrinsicBounds(result, null, null, null);
Note: If you will find SVG image as you want then you do now have to do above code. I have tried to find image but didn't found so Rotation code is necessary here.
希望对您有所帮助。
谢谢。
试试这个:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:color="#FCD83500"
android:width="1dp"/>
<size
android:width="20dp"
android:height="20dp"/>
<corners
android:radius="50dp"/>
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle">
<solid android:color="#FCD83500"/>
<size
android:width="20dp"
android:height="10dp"/>
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"/>
</shape>
</item>
</layer-list>
使用此代码制作半圆矢量图像。如果你想旋转矢量图像意味着使用带有旋转元素的组标签。参考这个
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
android:translateX="314.015"
android:rotation="90">
<path
android:fillColor="#FCD83500"
android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</group>
</vector>