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控件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
android studio 项目 ：UI设计高精度实现简单计算器
UI设计: 实验目的: 自主完成一个简单APP的设计工作,综合应用已经学到的Android UI设计技巧,重点注意合理使用布局.实验要求: 1.完成一个计算器的设计,可以以手机自带的计算器为参考.设计过程中,注意考虑界面的美观性,不同机型的适应性,以及功能的完备性. 2.注意结合Activity的生命周期,考虑不同情况下计算器的界面状态. 3.如有余力,可以考虑实现一个高精度科学计算型的计算器. 实现效果: 整数和浮点数的加减乘除.取余.开根号,异号.清零 计算结果全部实现. 精度保留到小数点后
-
android studio实验: UI设计 ListView及事件响应
实验目的: 1.学习使用ListView及其事件响应方法. 2.阅读sdk/doc/index脱机文档或者在Android developer开发者网站上,学习使用弹出菜单PopupMenu及其事件响应方法. 实验要求: 1.实现一个列表,其中显示班级学号姓名,提供添加功能 2.对添加的选项,通过长按某项,调用弹出菜单显示删除功能,并删除该选项. package com.example.shiyan3; import androidx.annotation.NonNull; import and
-
Android ListView UI组件使用说明
一.ListView 该组件是android中最常用的一个UI组件,用于实现在屏幕上显示多个内容,以便于我们用手指来回翻转. 先在layout中进行布局我们的组件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent
-
Android实现Neumorphism UI控件
目录 效果图 第三方库支持 代码示例 引入第三方库 黑暗模式布局 明亮风格 文档说明(案例) 总结 效果图 第三方库支持 Github:https://github.com/fornewid/neumorphism 代码示例 将介绍第三方库引入和xml布局 引入第三方库 引入jitpack.io,添加到工程级build.gradle,若是Kotlin项目工程则在 settings.gradle 中引入 allprojects { repositories { maven { url "https
-
Android编程处理窗口控件大小，形状，像素等UI元素工具类
本文实例讲述了Android编程处理窗口控件大小,形状,像素等UI元素工具类.分享给大家供大家参考,具体如下: /** * 处理窗口控件大小,形状,像素等工具类 * * @author chen.lin * */ public class UITools { /** * 把像素转化为dp * * @param context * @param px * @return */ public static int px2dip(Context context, float px) { float d
-
Android UI控件之ListView实现圆角效果
今天在Android群里面有人再求圆角ListView的实现方式,正好自己以前实现过.因此就共享了现在将其实现方式写在博客中共他人学习.给出实现方式之前顺带加点自己的想法,感觉上android中方形的ListView还是太"硬性",没有圆角的有亲和力.连Apple也为了"圆角"这个设计去申请专利. 看来圆角确实比较适合现在人们的喜好吧. 照老规矩先上两张效果图吧: 第一张: 第二张: 该方式主要就是需要重新去实现自己的ListView代码如下: package co
-
Android UI控件之Spinner下拉列表效果
下拉列表---Spinner用于显示列表项,类似于一组单选按钮RadioButton.Spinner的使用,可以极大的提升用户的体验性.当需要用户选择的时候,可以提供一个下拉列表项给用户选择. 具体来说下拉列表是如何实现的呢? 通过查阅API知道Spinner继承AdapterView,因此它的数据源需要通过Adapter实现. 一般来说Spinner的数据源可以是数组,也可以是一个XML文件. 一.以数组作为数据源 这种实现方式比较简单,先上效果图: xml文件代码; <LinearLayou
-
Android自定义圆环倒计时控件
本文实例为大家分享了Android自定义圆环倒计时控件的具体代码,供大家参考,具体内容如下 先来一张最终效果图: 主要思路: 在画渐变色圆环的时候,设置一个属性动画,根据属性动画的执行时长,来作为倒计时的时长.监听属性动画的进度,来达到 倒计时的目的. 二话不说,直接贴代码.具体实现思路都在注释上. 自定义属性: <declare-styleable name="CountDownProgressBar"> <attr name="countDown_cir
-
JavaFx UI控件与代码间的绑定方法
JavaFx初探一,UI控件的使用,具体内容如下 方式一:使用纯代码直接new view控件,这样就不涉及到与fxml文件之间的交互了 方式二:使用fxml编写界面文件,用可视化工具scene builder 来构建交互界面. 分两种方式绑定控件,可以用Android的方法在java中直接调用类似findviewbyId的方法,先在xml文件中设置fxid,然后根据id去找这个控件,代码如下 @Override public void start(Stage primaryStage) thro
-
Android自定义实现日历控件
本文实例为大家分享了Android自定义实现日历控件的具体代码,供大家参考,具体内容如下 1. Calendar类 2. 布局 创建calendar_layout.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:padding="20sp" android:orientation="vertical" android:l
-
Android开发之TextView控件用法实例总结
本文实例总结了Android开发之TextView控件用法.分享给大家供大家参考,具体如下: TextView控件可以向用户展现文本信息,我们可以设置该文本信息是否能编辑 1.TextView基本使用 在程序中创建TextView对象 在xml文件中布局使用 2.New Android Project-> Project name:TextView Build Target:Android 2.2 Application name:TextViewDemo Package name:com.b5
-
Android中findViewById获取控件返回为空问题怎么解决
在Android程序中,有时候需要加载非原来activity中xml布局中的控件,来使Android程序的界面更加丰富. 我本身是在使用ViewFlipper中遇到的问题. public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); inflater=(LayoutInflater)getSystemService(LAYO
-
android开发实现列表控件滚动位置精确保存和恢复的方法(推荐)
Android开发经常要对列表的滚动位置进行保存和恢复,网上也有很多关于此功能的方法文章,但绝大多数都只能保存恢复到某一行,对于滚动到半行的情况不能精确的恢复.也有很多文章介绍了好几种方法,也说某些方法能够精确的控制,但实际上根本不能实现.还有些介绍了很多玄乎且非常复杂的方法,但也没看到能完整实现的代码. 经过一段时间的研究测试,下面的代码可以完美的实现列表滚动位置的精确保存和恢复,而且只是在原来记忆到行位置的基础上增加了2行代码而已. 具体见下面代码和注释: //保存位置: int posit