Android Studio中的新形态介绍

DebugUsery
338 阅读4分钟

Android Studio中的新形态介绍

新形态是一个设计概念，用于制作基于物体阴影的软体小部件。它使用高光和阴影来创建似乎漂浮在表面之上的元素。

换句话说，物体似乎是从背景中挤出的。它的审美是为了实现实际的Android组件。

下图显示了一个使用新形态设计创建的计算器应用程序。

Neumorphism music player

镂空元素类似于现实生活中的物体。下面的例子展示了skeuomorphic元素。

Instagram new logo design illustration

下面是其他一些骨架形态的例子。

Apple example

Telegram mail example

背景

新形态主义在很大程度上依赖于层次、阴影和角度来决定层次和背景，同时拥抱极简主义。新形态主义开始于Dribbble上发布的许多概念。其中一个元素是由Alexander Plyuto发布的。

在本指南中，我们将看看如何在Android Studio中实现新形态的设计。下面是一些使用Neumorphic概念实现的屏幕。

Neumorphism example

Neumorphism example

新形态是如何工作的

Neumorphism设计结构依赖于一个阴影系统。这种方法将一个物体提升到基础层之上。因此，它创造了逼真和独特的外观元素。

例如，考虑一个在一个角落有光源的物体。该物体将有两层盒状阴影。一层是较暗的，作为阴影，而另一个区域是较亮的。

因此，这意味着，如果有一个光源。

  • 在光的方向会有一个白色的盒状阴影。
  • 在相反的方向上也会有一个黑色的盒状阴影。

新形态将显示以下阴影和高光，这取决于光源。

neumorphism-light-source

以下形状可以用新形态来实现。

neumorphism-shape-type

前提条件

要跟上本指南，之前的Java知识是必不可少的。你还应该熟悉Android Studio。

开始学习

为了在Android Studio中实现新形态，我们需要安装一个neumorphism 库。

来吧，开始一个新的项目。

然后在你的app.gradle 文件中包含以下库。

implementation 'com.github.fornewid:neumorphism:0.2.1'

这个库可以将Android应用中的UI组件转化为新形态的视图，而不需要创建自定义模式。

一般的实现

Neumorphism允许你实现浮动的UI对象。这个概念几乎与材料设计相同。

两者之间的主要区别是，neumorphic对象是从背景中挤出的，而material design组件在阻挡光源的同时投下了阴影。

使用方法

父级neumorphic视图（元素）应该总是被设置为false (android:clipChildren="false")。这对防止阴影的剪切很重要。如果这个解决方案不起作用（取决于视图组，如Relativelayout ），请使用android:padding 。

一个物体应该有与你的背景相同的颜色。有一个匹配的背景颜色对于创造美学框架的阴影是至关重要的。

让我们使用neumorphic模式创建几个视图。我们将创建一个签到页面来演示如何将视图转换为neumorphic效果。

在你的color.xml 文件中添加以下颜色属性。

<resources>
    <color name="text_color">#1E4175</color>
    <color name="background_color">#ecf0f3</color>
    <color name="highlight">#ffffff</color>
    <color name="shadow_color">#d9dbde</color>
</resources>

新形态支持views ，如Button 、TextView 、Image 、ImageButton 和FloatingActionButton ，以及ViewGroups ，如CardView 。

要在Android Studio中实现neumorphism，请导入必要的部件并定义首选的形状类型，如FLAT,BASIN, 和PRESSED 。

下面是一个简单的签到用户界面的例子。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/background_color">

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:text="Welcome"
        android:textStyle="bold"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:textColor="@color/text_color"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:transitionName="textview" />
    <TextView
        android:layout_width="wrap_content"
        android:text="Let's get started"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_gravity="center"
        android:textColor="@color/text_color"
        android:layout_marginStart="10dp"/>

    <soup.neumorphism.NeumorphCardView
        android:layout_width="match_parent"
        android:id="@+id/layout_email"
        android:layout_height="wrap_content"
        app:neomorph_view_type="rectangular"
        app:neomorph_shadow_type="outer"
        android:layout_above="@+id/layout_pass"
        app:neomorph_corner_radius="10dp"
        app:neomorph_elevation="6dp"
        app:neomorph_background_color="@color/background"
        app:neomorph_shadow_color="@color/shadow_color"
        app:neomorph_highlight_color="@color/highlight">

        <EditText
            android:layout_width="match_parent"
            android:gravity="center"
            android:textColor="@color/text_color"
            android:layout_height="match_parent"
            android:textColorHint="@color/text_color"
            android:padding="14dp"
            android:inputType="textEmailAddress"
            android:paddingEnd="10dp"
            android:hint=" Email"
            android:autofillHints="" />
    </soup.neumorphism.NeumorphCardView>

    <soup.neumorphism.NeumorphCardView
        android:id="@+id/layout_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:neomorph_view_type="rectangular"
        app:neomorph_shadow_type="outer"
        app:neomorph_elevation="6dp"
        app:neomorph_corner_radius="10dp"
        app:neomorph_background_color="@color/background"
        app:neomorph_shadow_color="@color/shadow_color"
        app:neomorph_highlight_color="@color/highlight">

        <EditText
            android:gravity="center"
            android:padding="14dp"
            android:paddingEnd="10dp"
            android:layout_width="match_parent"
            android:id="@+id/password"
            android:layout_height="match_parent"
            android:hint="Password"
            android:inputType="textPassword"
            android:textColor="@color/text_color"
            android:autofillHints=""
            android:textColorHint="@color/text_color"
            tools:ignore="RtlSymmetry" />
    </soup.neumorphism.NeumorphCardView>

    <soup.neumorphism.NeumorphButton
        android:layout_width="200dp"
        android:textSize="16dp"
        android:layout_height="wrap_content"        
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:text="Sign In"
        android:textColor="@color/text_color"
        style="@style/Widget.Neumorph.Button">
    </soup.neumorphism.NeumorphButton>
</LinearLayout>
</RelativeLayout>

neumorphism-login-ui

在上面的代码中，你应该记住。

  • 将你的光源指定为app:neumorph_lightSource="leftTop|leftBottom|rightTop|rightBottom"。
  • 添加阴影高度和高光颜色。
  • 预先定义ViewGroup或View类型（style="@style/Widget.Neumorph.Button" ）。
  • 指定首选的形状和外观。

上面的例子可以通过指定app:neumorph_shapeType="pressed" ，复制到一个不同的形状类型，如PRESSED 。

<RelativeLayout 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="@color/background_color">

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:text="Welcome"
            android:textStyle="bold"
            android:layout_height="wrap_content"
            android:textSize="40sp"
            android:textColor="@color/text_color"
            android:layout_marginTop="10dp"
            android:layout_gravity="center" />
        <TextView
            android:layout_width="wrap_content"
            android:text="Let's get started"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:layout_gravity="center"
            android:textColor="@color/text_color"
            android:layout_marginStart="10dp"/>

        <soup.neumorphism.NeumorphCardView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_marginTop="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            style="@style/Widget.Neumorph.CardView"
            app:neumorph_shapeType="pressed">

            <EditText
                android:gravity="center"
                android:textColor="@color/text_color"
                android:hint=" Email"
                android:inputType="textEmailAddress"
                android:layout_width="match_parent"
                android:paddingEnd="10dp"
                android:layout_height="match_parent"
                android:padding="14dp"
                android:textColorHint="@color/text_color"
                android:autofillHints="" />
        </soup.neumorphism.NeumorphCardView>

        <soup.neumorphism.NeumorphCardView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_marginTop="10dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            style="@style/Widget.Neumorph.CardView"
            app:neumorph_shapeType="pressed">

            <EditText
                android:textColor="@color/text_color"
                android:inputType="textPassword"
                android:gravity="center"
                android:id="@+id/password"
                android:padding="14dp"
                android:layout_width="match_parent"
                android:paddingEnd="10dp"
                android:layout_height="match_parent"
                android:hint="Password"
                android:autofillHints=""
                android:textColorHint="@color/text_color"
                tools:ignore="RtlSymmetry" />
        </soup.neumorphism.NeumorphCardView>

        <soup.neumorphism.NeumorphButton
            android:layout_marginTop="10dp"
            android:layout_width="200dp"
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:text="Sign In"
            android:textColor="@color/text_color"
            style="@style/Widget.Neumorph.Button">
        </soup.neumorphism.NeumorphButton>
    </LinearLayout>
</RelativeLayout>

neumorphism-pressed-login-ui

最后说明

Neumorphism不是一个非常通用的设计。有时它并不清晰，特别是在使用按钮时。这是因为状态的变化不够明显。这对有视觉障碍的人或屏幕质量不高的手机来说是个挑战。新形态的最佳使用案例之一是在使用卡片时。

请看下面这个用Neumorphism实现的现代仪表盘设计。

neumorphism-dashboard-ui-design

使用Neumorphism的最好方法是与不同的设计元素进行交互，以感受到什么是有效的，什么是无效的。

Neumorphism可以很好地应用于。

  • 单页的应用程序和小项目。
  • 用户互动相当直接的地方。
avatar
文章
阅读
粉丝