Requisitos de la interfaz de usuario: realice el efecto "Falta el botón de degradado en la esquina inferior derecha"
Hay dos maneras de lograr esto:
1. Dibujo de interfaz de usuario 9 imágenes de fondo, implementadas directamente por Selector
2. Utilice listas de formas, selectores y capas para implementar
No había ninguna imagen de fondo del botón en el borrador de diseño proporcionado por UI. Después de que lo terminé con Shape, me dijo que había hecho una imagen de fondo. ¡WTF!
Pero el proceso de implementación con Shape también es bastante divertido.
Graba esto:
- "Botón de degradado dorado con esquina inferior derecha" a la izquierda : el fondo es un color degradado, con un degradado lineal de tres colores y un trazo de 1 px.
- "Botón negro semitransparente con esquina inferior derecha" a la derecha : el fondo es de color negro sólido + transparencia, más un borde de 1px
El proceso de implementación toma como ejemplo el botón dorado de la izquierda: se implementa el botón dorado y el botón negro de la izquierda se implementa de la misma manera.
Primero, eche un vistazo a la idea de implementación del "Botón de esquina con muesca con degradado dorado":
1. Una única Forma sólo puede formar esquinas redondeadas.
La forma puede usar el atributo "<esquinas>" para lograr el efecto de "solo falta una esquina" , pero solo puede crear un efecto de esquina redondeada, no un efecto de ángulo obtuso.
<!-- android:radius 圆角的半径 --> <corners android:radius="2dp" //关键点 android:topLeftRadius="0dp" android:topRightRadius="1dp" android:bottomRightRadius="2dp" android:bottomLeftRadius="3dp" />Aviso:
- android: el radio debe ser mayor que 1; de lo contrario, no habrá efecto de esquinas redondeadas
- Si solo configuras android:radius, las cuatro esquinas tendrán el mismo efecto redondeado.
2. Dos formas rectangulares para lograr las esquinas que faltan
Como no se puede implementar una forma, está bien, entonces usa dos.
- La primera forma es un mapa base degradado dorado.
- La segunda forma toma el valor de color de la interfaz de fondo de la pantalla donde se encuentra el botón, lo gira 45° y lo mueve a la esquina inferior derecha de la primera forma para cubrirla y crear una esquina faltante.
Esto parece un " botón degradado dorado con muescas"
Código anterior:
2.1 Archivo xml del botón de referencia:
<RadioButton
android:id="@+id/fatigue_monitor"
android:layout_width="192dp"
android:layout_height="48dp"
android:gravity="center"
android:background="@drawable/radiobutton_bg_selector"
android:textSize="18sp"
android:textColor="@color/radiobutton_text_color_selector"
android:text="确定" />2.2 radiobutton_text_color_selector.xml
Color del texto del botón en estados seleccionados y no seleccionados
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#FF000000" />
<item android:state_checked="false" android:color="#CCFFFFFF" />
</selector>2.2 radiobutton_bg_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/radiobutton_bg_selector_on_layerlists" />
<item android:state_checked="false" android:drawable="@drawable/radiobutton_bg_selector_off_layerlists" />
</selector>2.3 radiobutton_bg_selector_on_layerlists.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--第一层shape做背景，size其实可以不写，由外部适配-->
<item>
<shape android:shape="rectangle">
<size
android:width="190dp"
android:height="48dp" />
<gradient
android:type="linear"
android:startColor="#FFE180"
android:centerColor="#F0C03B"
android:endColor="#F3912C" />
<stroke
android:width="1dp"
android:color="#66FFE180" />
</shape>
</item>
<!--在第一层shape上盖一层做缺角-->
<item>
<rotate
android:fromDegrees="45"
android:pivotX="45%"
android:pivotY="545%">
<shape android:shape="rectangle">
<size
android:width="190dp"
android:height="48dp" />
<solid android:color="#161616" />
<stroke
android:width="1dp"
android:color="#66FFE180" />
</shape>
</rotate>
</item>
</layer-list>explicar:
atributo de forma:
- <gradiente>: generalmente hay tres tipos de degradados de forma de degradado de color
: lineal (gradiente lineal), radial (gradiente radial), barrido (gradiente de escaneo).
startColor, centerColor y endColor definen el color del degradado. - <sólido>: El color de relleno y la prioridad del atributo <gradiente> son mayores que <sólido>.
El color de relleno de la segunda forma se establece en el mismo color de fondo de la interfaz mostrada por el botón.
Esto hace que toda la capa- La lista parece un espacio. Botón de gradiente dorado rectangular angular. - <trazo>: define el tamaño y el color del trazo
Atributos sin forma:
- <rotate>: define la rotación del control
android:fromDegrees: el grado de rotación del control.El origen de la rotación se establece de forma predeterminada en el origen del control , es decir, la esquina superior izquierda android:pivotX y android:pivotY representanlas coordenadas de posición del origen de la rotación del control. .
Las diferentes asignaciones que se les asignan tienen diferentes significados:
android:pivotX="50"
android:pivotY="50" Agregue 50px a X e Y del
origen del control como origen de rotaciónandroid:pivotX="50%"
android:pivotY="50%" Las X e Y del
origen del control suman cada una "50% del ancho y alto del control (si el ancho es 100, el 50% es 50 )" como origen de rotaciónandroid:pivotX="50%p"
android:pivotY="50%p" Los X e Y
del origen del control se agregan cada uno al "50% del ancho del control principal" como origen de rotación .
2.4 Primero eche un vistazo al efecto de diseño en el estudio:
2.5 Debido a que el área finalmente utilizada para la visualización del control es solo el tamaño del área de la Forma subyacente , la forma superior no se mostrará excepto las esquinas que faltan.
Entonces el efecto de control final que se muestra en el dispositivo es así:
El valor del color de la parte de la esquina que falta es el color de fondo. Después de integrarse con la interfaz de fondo, parece que todo el efecto de control puede cumplir con los requisitos de la interfaz de usuario.
2.6 Antes de integrar este control de interfaz de usuario en el dispositivo para su visualización, si aún no comprende el principio de implementación, lo dejaré claro de un vistazo ajustando ligeramente pivotX y pivotY: android:pivotX="45%" android: pivotY=
"
20 %"
2.7 El efecto de visualización final en el dispositivo:
