Android如何实现Neumorphism UI控件

2024-10-26 技术教程

小编给大家分享一下Android如何实现NeumorphismUI控件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

效果图

第三方库支持

Github：https://github.com/fornewid/neumorphism

代码示例

将介绍第三方库引入和xml布局

引入第三方库

引入jitpack.io，添加到工程级build.gradle，若是Kotlin项目工程则在 settings.gradle 中引入

allprojects{repositories{maven{url"https://jitpack.io"}}}

在项目中引入

//新拟物化风格implementation'com.github.fornewid:neumorphism:0.3.2'黑暗模式布局

<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#1A1A1A"android:gravity="center_horizontal"android:orientation="vertical"tools:context=".activity.TestActivity"><soup.neumorphism.NeumorphCardViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="50dp"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"><LinearLayoutandroid:layout_width="316dp"android:layout_height="200dp"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginTop="10dp"android:text="程序员银行"android:textColor="#2E2E2E"android:textSize="18sp"/><soup.neumorphism.NeumorphTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginTop="100dp"android:text="8989891234567890"android:textColor="#1A1A1A"android:textSize="26sp"android:textStyle="bold"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"/></LinearLayout></soup.neumorphism.NeumorphCardView><soup.neumorphism.NeumorphTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginVertical="20dp"android:text="ThisisText"android:textColor="#1A1A1A"android:textSize="26sp"android:textStyle="bold"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"/><soup.neumorphism.NeumorphButtonandroid:id="@+id/btn1"android:layout_width="150dp"android:layout_height="65dp"android:gravity="center"android:text="灵魂按钮"android:textColor="#5E5E5E"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"/><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><soup.neumorphism.NeumorphCardViewandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"/><soup.neumorphism.NeumorphCardViewandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"app:neumorph_shapeType="basin"app:neumorph_strokeColor="#1A1A1A"app:neumorph_strokeWidth="8dp"/><soup.neumorphism.NeumorphCardViewandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"app:neumorph_shapeType="pressed"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><soup.neumorphism.NeumorphFloatingActionButtonandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"/><soup.neumorphism.NeumorphImageViewandroid:layout_width="100dp"android:layout_height="100dp"android:layout_marginHorizontal="15dp"android:padding="25dp"android:scrollbarSize="15sp"android:src="@mipmap/face"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"/><soup.neumorphism.NeumorphFloatingActionButtonandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shadowColorDark="#0E0E0E"app:neumorph_shadowColorLight="#202020"app:neumorph_shapeType="pressed"/></LinearLayout></LinearLayout>明亮风格

<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#F3F3F3"android:gravity="center_horizontal"android:orientation="vertical"tools:context=".activity.TestActivity"><soup.neumorphism.NeumorphCardViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="50dp"><LinearLayoutandroid:layout_width="316dp"android:layout_height="200dp"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginTop="10dp"android:text="程序员银行"android:textColor="#999999"android:textSize="18sp"/><soup.neumorphism.NeumorphTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="20dp"android:layout_marginTop="100dp"android:text="8989891234567890"android:textColor="#F3F3F3"android:textSize="26sp"android:textStyle="bold"app:neumorph_shapeType="pressed"/></LinearLayout></soup.neumorphism.NeumorphCardView><soup.neumorphism.NeumorphTextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginVertical="20dp"android:text="ThisisText"android:textColor="#F3F3F3"android:textSize="26sp"android:textStyle="bold"/><soup.neumorphism.NeumorphButtonandroid:id="@+id/btn1"android:layout_width="150dp"android:layout_height="65dp"android:gravity="center"android:text="灵魂按钮"android:textColor="#999999"/><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><soup.neumorphism.NeumorphCardViewandroid:layout_width="100dp"android:layout_height="100dp"/><soup.neumorphism.NeumorphCardViewandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shapeType="basin"app:neumorph_strokeColor="#F3F3F3"app:neumorph_strokeWidth="8dp"/><soup.neumorphism.NeumorphCardViewandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shapeType="pressed"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><soup.neumorphism.NeumorphFloatingActionButtonandroid:layout_width="100dp"android:layout_height="100dp"/><soup.neumorphism.NeumorphImageViewandroid:layout_width="100dp"android:layout_height="100dp"android:layout_marginHorizontal="15dp"android:padding="25dp"android:scrollbarSize="15sp"android:src="@mipmap/face"/><soup.neumorphism.NeumorphFloatingActionButtonandroid:layout_width="100dp"android:layout_height="100dp"app:neumorph_shapeType="pressed"/></LinearLayout></LinearLayout>文档说明（案例）

<soup.neumorphism.NeumorphCardViewapp:neumorph_shadowElevation="6dp"app:neumorph_shadowColorLight="@color/solid_light_color"app:neumorph_shadowColorDark="@color/solid_dark_color"app:neumorph_lightSource="leftTop|leftBottom|rightTop|rightBottom"app:neumorph_shapeType="{flat|pressed|basin}"app:neumorph_shapeAppearance="@style/CustomShapeAppearance"app:neumorph_backgroundColor="@color/background_color"app:neumorph_strokeColor="@color/stroke_color"app:neumorph_strokeWidth="@dimen/stroke_width"app:neumorph_inset="12dp"app:neumorph_insetStart="12dp"app:neumorph_insetEnd="12dp"app:neumorph_insetTop="12dp"app:neumorph_insetBottom="12dp"android:padding="12dp"></soup.neumorphism.NeumorphCardView><stylename="CustomShapeAppearance"><itemname="neumorph_cornerFamily">{rounded|oval}</item><itemname="neumorph_cornerSize">32dp</item><itemname="neumorph_cornerSizeTopLeft">16dp</item><itemname="neumorph_cornerSizeTopRight">16dp</item><itemname="neumorph_cornerSizeBottomLeft">16dp</item><itemname="neumorph_cornerSizeBottomRight">16dp</item></style>

以上是“Android如何实现NeumorphismUI控件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！