如何在彼此之上绘制 3 个圆圈,每个圆圈的透明度不同?
How to draw 3 circles on top of each other that are each transparent differently?
我正在尝试创建一个由 3 个全部位于内部的圆圈组成的层。在里面我会有一个花的图像。
背景可以改变...
如果它坐在蓝色背景上,它将是蓝色阴影。所以我需要以某种方式调整透明度以使其工作。
不过,中心 必须始终 完全是白色的。然后我想在中心添加我的图像。
我创建了一个图层列表来实现这个,但是我不能让圆圈透明,我只能让两个圆圈出现?
我怎样才能让位图出现在中心?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger circle in back -->
<item>
<shape android:shape="oval">
<solid android:color="#726"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="25dp"
android:height="25dp"/>
</shape>
</item>
<!-- Smaller circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="@android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
试试这个
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#b5ed9259" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="5dp"
android:color="@android:color/transparent" />
<solid android:color="#cff27527" />
<size
android:width="25dp"
android:height="25dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="oval">
<stroke
android:width="5dp"
android:color="@android:color/transparent" />
<solid android:color="#fbda5807" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="oval">
<stroke
android:width="5dp"
android:color="@android:color/transparent" />
<solid android:color="#FFFFFF" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
</item>
<item
android:bottom="5dp"
android:drawable="@drawable/ic_fav"
android:gravity="center"
android:left="5dp"
android:right="5dp"
android:top="5dp"/>
</layer-list>
输出
背景可以改变... 如果它坐在蓝色背景上,它将是蓝色阴影。所以我需要以某种方式调整透明度以使其工作。 不过,中心 必须始终 完全是白色的。然后我想在中心添加我的图像。
我创建了一个图层列表来实现这个,但是我不能让圆圈透明,我只能让两个圆圈出现? 我怎样才能让位图出现在中心?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger circle in back -->
<item>
<shape android:shape="oval">
<solid android:color="#726"/>
<size
android:width="35dp"
android:height="35dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="25dp"
android:height="25dp"/>
</shape>
</item>
<!-- Smaller circle in front -->
<item>
<shape android:shape="oval">
<!-- transparent stroke = larger_circle_size - smaller_circle_size -->
<stroke android:color="@android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
试试这个
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#b5ed9259" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="5dp"
android:color="@android:color/transparent" />
<solid android:color="#cff27527" />
<size
android:width="25dp"
android:height="25dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="oval">
<stroke
android:width="5dp"
android:color="@android:color/transparent" />
<solid android:color="#fbda5807" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<shape android:shape="oval">
<stroke
android:width="5dp"
android:color="@android:color/transparent" />
<solid android:color="#FFFFFF" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
</item>
<item
android:bottom="5dp"
android:drawable="@drawable/ic_fav"
android:gravity="center"
android:left="5dp"
android:right="5dp"
android:top="5dp"/>
</layer-list>
输出