Android实现Neumorphism UI控件
程序员文章站
2023-01-01 23:15:57
目录效果图第三方库支持代码示例引入第三方库黑暗模式布局明亮风格文档说明(案例)总结效果图第三方库支持github:https://github.com/fornewid/neumorphism代码示例...
效果图
第三方库支持
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'
黑暗模式布局
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns: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.neumorphcardview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="50dp" app:neumorph_shadowcolordark="#0e0e0e" app:neumorph_shadowcolorlight="#202020"> <linearlayout android:layout_width="316dp" android:layout_height="200dp" android:orientation="vertical"> <textview android: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.neumorphtextview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="20dp" android:layout_margintop="100dp" android:text="898989 1234567890 " android:textcolor="#1a1a1a" android:textsize="26sp" android:textstyle="bold" app:neumorph_shadowcolordark="#0e0e0e" app:neumorph_shadowcolorlight="#202020" /> </linearlayout> </soup.neumorphism.neumorphcardview> <soup.neumorphism.neumorphtextview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginvertical="20dp" android:text="this is text " android:textcolor="#1a1a1a" android:textsize="26sp" android:textstyle="bold" app:neumorph_shadowcolordark="#0e0e0e" app:neumorph_shadowcolorlight="#202020" /> <soup.neumorphism.neumorphbutton android: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" /> <linearlayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <soup.neumorphism.neumorphcardview android:layout_width="100dp" android:layout_height="100dp" app:neumorph_shadowcolordark="#0e0e0e" app:neumorph_shadowcolorlight="#202020" /> <soup.neumorphism.neumorphcardview android: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.neumorphcardview android:layout_width="100dp" android:layout_height="100dp" app:neumorph_shadowcolordark="#0e0e0e" app:neumorph_shadowcolorlight="#202020" app:neumorph_shapetype="pressed" /> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <soup.neumorphism.neumorphfloatingactionbutton android:layout_width="100dp" android:layout_height="100dp" app:neumorph_shadowcolordark="#0e0e0e" app:neumorph_shadowcolorlight="#202020" /> <soup.neumorphism.neumorphimageview android: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.neumorphfloatingactionbutton android:layout_width="100dp" android:layout_height="100dp" app:neumorph_shadowcolordark="#0e0e0e" app:neumorph_shadowcolorlight="#202020" app:neumorph_shapetype="pressed" /> </linearlayout> </linearlayout>
明亮风格
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns: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.neumorphcardview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margintop="50dp"> <linearlayout android:layout_width="316dp" android:layout_height="200dp" android:orientation="vertical"> <textview android: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.neumorphtextview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginleft="20dp" android:layout_margintop="100dp" android:text="898989 1234567890 " android:textcolor="#f3f3f3" android:textsize="26sp" android:textstyle="bold" app:neumorph_shapetype="pressed" /> </linearlayout> </soup.neumorphism.neumorphcardview> <soup.neumorphism.neumorphtextview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginvertical="20dp" android:text="this is text " android:textcolor="#f3f3f3" android:textsize="26sp" android:textstyle="bold" /> <soup.neumorphism.neumorphbutton android:id="@+id/btn1" android:layout_width="150dp" android:layout_height="65dp" android:gravity="center" android:text="灵魂按钮" android:textcolor="#999999" /> <linearlayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <soup.neumorphism.neumorphcardview android:layout_width="100dp" android:layout_height="100dp" /> <soup.neumorphism.neumorphcardview android:layout_width="100dp" android:layout_height="100dp" app:neumorph_shapetype="basin" app:neumorph_strokecolor="#f3f3f3" app:neumorph_strokewidth="8dp" /> <soup.neumorphism.neumorphcardview android:layout_width="100dp" android:layout_height="100dp" app:neumorph_shapetype="pressed" /> </linearlayout> <linearlayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <soup.neumorphism.neumorphfloatingactionbutton android:layout_width="100dp" android:layout_height="100dp" /> <soup.neumorphism.neumorphimageview android:layout_width="100dp" android:layout_height="100dp" android:layout_marginhorizontal="15dp" android:padding="25dp" android:scrollbarsize="15sp" android:src="@mipmap/face" /> <soup.neumorphism.neumorphfloatingactionbutton android:layout_width="100dp" android:layout_height="100dp" app:neumorph_shapetype="pressed" /> </linearlayout> </linearlayout>
文档说明(案例)
<soup.neumorphism.neumorphcardview <!--预定义样式--> style="@style/widget.neumorph.cardview" <!--设置阴影高度和颜色--> app: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" <!--使用插图来避免剪裁阴影。 (默认为12dp)--> app:neumorph_inset="12dp" app:neumorph_insetstart="12dp" app:neumorph_insetend="12dp" app:neumorph_insettop="12dp" app:neumorph_insetbottom="12dp" <!--使用填充,默认为12db--> android:padding="12dp"> <!--在这里可以直接包裹子布局--> </soup.neumorphism.neumorphcardview> <style name="customshapeappearance"> <item name="neumorph_cornerfamily">{rounded|oval}</item> <item name="neumorph_cornersize">32dp</item> <!-- or if wants different radii depending on the corner. --> <item name="neumorph_cornersizetopleft">16dp</item> <item name="neumorph_cornersizetopright">16dp</item> <item name="neumorph_cornersizebottomleft">16dp</item> <item name="neumorph_cornersizebottomright">16dp</item> </style>
总结
到此这篇关于android实现neumorphism ui控件的文章就介绍到这了,更多相关android neumorphism ui控件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: 按摩大赫穴位的作用与好处及按摩手法
下一篇: 渊腋穴位位置图,按摩渊腋穴的作用与好处