android 发光背景边框

原创

mob64ca12f66e6c 2024-09-08 06:25:09 ©著作权

文章标签 Android 布局文件 UI 文章分类 Android 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f66e6c的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android 发光背景边框实现详解

在现代移动应用开发中，UI设计不仅要好看，还要具备良好的用户体验。随着Android开发的不断发展，发光效果的背景边框逐渐成为了提升应用视觉效果的重要元素。本文将探讨如何在Android应用中实现发光背景边框，并提供示例代码。

项目准备

在实现发光背景边框之前，确保您已经创建了一个Android项目，并在项目中添加了所需的库。

依赖库

在build.gradle文件中，我们需要确保引入了Material Design组件或其他必要的UI库。如果您已经在使用AndroidX，通常这些库会已经包含在内。

dependencies {
    implementation 'com.google.android.material:material:1.4.0'
    // 其他依赖
}

XML布局设计

首先，我们需要在布局文件中设计一个简单的背景边框。在这里，我们可以使用ShapeDrawable及其自定义属性来构建我们的发光效果。

以下是一个示例布局文件activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@drawable/glow_background">
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, Android!"
            android:textSize="24sp"
            android:layout_gravity="center"/>
    </FrameLayout>

</RelativeLayout>

自定义发光背景

接下来，我们可以创建一个自定义的背景drawable，以实现发光边框的效果。

在res/drawable目录中创建一个新的文件glow_background.xml，如下所示：

<layer-list xmlns:android="
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke 
                android:width="4dp" 
                android:color="@android:color/transparent"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>
    
    <item android:right="1dp" android:left="1dp" android:top="1dp" android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
            <stroke 
                android:width="6dp"
                android:color="@android:color/holo_blue_light"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
            <stroke
                android:width="8dp"
                android:color="@android:color/holo_blue_bright"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>
</layer-list>

在上述代码中，我们使用了layer-list来叠加多个shape，以实现发光效果。最外层的边框使用了更浅的颜色，内部边框则使用了更深的颜色，从而形成了渐变的发光效果。

动态效果实现

为了使边框效果更加动感，我们可以通过动画来实现发光的变换。使用ObjectAnimator的简单示例代码如下：

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private FrameLayout frameLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        frameLayout = findViewById(R.id.frame_layout);
        
        // 加载动画
        Animation glowAnimation = AnimationUtils.loadAnimation(this, R.anim.glow_animation);
        frameLayout.startAnimation(glowAnimation);
    }
}

在res/anim目录中，我们添加一个名为glow_animation.xml的动画文件：

<set xmlns:android="
    <scale
        android:fromScale="1.0"
        android:toScale="1.1"
        android:duration="300"
        android:repeatCount="infinite"
        android:repeatMode="reverse"/>
</set>

关系图

下面是一个简单的ER图，描绘了我们的布局和背景drawable之间的关系：

erDiagram
    Layout {
        String id
        String layout_type
        String background
    }

    Drawable {
        String id
        String drawable_type
        String shape
    }

    Layout ||--|| Drawable : has