Android 组件装饰：自定义 Drawable、Shape、Selector 与高级美化技巧

1
<!-- 椭圆形 -->
2
<shape xmlns:android="http://schemas.android.com/apk/res/android"
3
    android:shape="oval">
4
    <solid android:color="#E91E63" />
5
    <size android:width="64dp" android:height="64dp" />
6
</shape>
7

8
<!-- 环形（进度条背景） -->
9
<shape xmlns:android="http://schemas.android.com/apk/res/android"
10
    android:shape="ring"
11
    android:innerRadiusRatio="3"
12
    android:thicknessRatio="8"
13
    android:useLevel="false">
14
    <solid android:color="#E0E0E0" />
15
</shape>
16

17
<!-- 分隔线 -->
18
<shape xmlns:android="http://schemas.android.com/apk/res/android"
19
    android:shape="line">
20
    <stroke
21
        android:width="0.5dp"
22
        android:color="#E0E0E0" />
23
    <size android:height="0.5dp" />
24
</shape>

1
fun createCircleDrawable(context: Context, color: Int, sizeDp: Int): Drawable {
2
    val size = TypedValue.applyDimension(
3
        TypedValue.COMPLEX_UNIT_DIP,
4
        sizeDp.toFloat(),
5
        context.resources.displayMetrics
6
    ).toInt()
7

8
    return GradientDrawable().apply {
9
        setColor(color)
10
        shape = GradientDrawable.OVAL
11
        setSize(size, size)
12
    }
13
}
14

15
// 圆形头像
16
val avatarDrawable = createCircleDrawable(context, Color.parseColor("#2196F3"), 48)
17
imageView.setImageDrawable(avatarDrawable)

1
import android.graphics.Outline
2
import android.view.View
3
import android.view.ViewOutlineProvider
4

5
fun View.clipToRoundedCorners(radiusDp: Float) {
6
    val radius = radiusDp * resources.displayMetrics.density
7
    outlineProvider = object : ViewOutlineProvider() {
8
        override fun getOutline(view: View, outline: Outline) {
9
            outline.setRoundRect(0, 0, view.width, view.height, radius)
10
        }
11
    }
12
    clipToOutline = true
13
}
14

15
// 使用
16
imageView.clipToRoundedCorners(12f)

1
@Composable
2
fun DecoratedCard() {
3
    Box(
4
        modifier = Modifier
5
            .size(200.dp, 100.dp)
6
            .background(
7
                color = Color.White,
8
                shape = RoundedCornerShape(16.dp)
9
            )
10
            .border(
11
                width = 2.dp,
12
                brush = Brush.horizontalGradient(
13
                    colors = listOf(Color(0xFF667eea), Color(0xFF764ba2))
14
                ),
15
                shape = RoundedCornerShape(16.dp)
16
            )
17
            .shadow(
18
                elevation = 8.dp,
19
                shape = RoundedCornerShape(16.dp),
20
                clip = false
21
            ),
22
        contentAlignment = Alignment.Center
23
    ) {
24
        Text("装饰后的组件", fontWeight = FontWeight.Bold)
25
    }
26
}

1
@Composable
2
fun GradientText(text: String) {
3
    val brush = Brush.horizontalGradient(
4
        colors = listOf(
5
            Color(0xFFFF6B6B),
6
            Color(0xFFFFC371)
7
        )
8
    )
9

10
    Text(
11
        text = text,
12
        style = TextStyle(
13
            brush = brush,
14
            fontSize = 24.sp,
15
            fontWeight = FontWeight.Bold
16
        )
17
    )
18
}

1
@Composable
2
fun CircularAvatar(
3
    imageUrl: String,
4
    modifier: Modifier = Modifier,
5
    size: Dp = 64.dp,
6
    borderWidth: Dp = 3.dp
7
) {
8
    AsyncImage(
9
        model = imageUrl,
10
        contentDescription = "头像",
11
        modifier = modifier
12
            .size(size)
13
            .clip(CircleShape)
14
            .border(borderWidth, Color.White, CircleShape),
15
        contentScale = ContentScale.Crop
16
    )
17
}

1
@Composable
2
fun RippleButton(onClick: () -> Unit) {
3
    Box(
4
        modifier = Modifier
5
            .clip(RoundedCornerShape(12.dp))
6
            .background(Color(0xFF2196F3))
7
            .clickable(
8
                interactionSource = remember { MutableInteractionSource() },
9
                indication = rememberRipple(
10
                    bounded = true,
11
                    color = Color.White.copy(alpha = 0.4f)
12
                ),
13
                onClick = onClick
14
            )
15
            .padding(horizontal = 24.dp, vertical = 12.dp),
16
        contentAlignment = Alignment.Center
17
    ) {
18
        Text("点击按钮", color = Color.White, fontWeight = FontWeight.Bold)
19
    }
20
}