Android實現Neumorphism UI控件
效果圖
第三方庫支持
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控件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Android studio六大基本佈局詳解
- Android自定義彈窗提示效果
- android自定義對話框實例代碼
- Android中ScrollView監聽滑動距離案例講解
- 使用ListView實現網上訂餐首頁