android原生项目新建项目界面之阴影和圆角
如何让界面看起来更美观,更有高级感。最简单实用的方法就是为边框有一个合适的角度。这样你的界面元素就会显得不那么生硬。当界面元素有了边框以后,会发现是舒适了很多,但是和背景融合,没有层次感,依然不够高级。这时候加入外阴影,层次感立马就上来了。这是一个CSS的按钮预设的网站,有兴趣可以看看,阴影给UI带来的直观感受。Neumorphism/Soft UI CSS shadow generator
本文章是对初学者来讲,没有过多的界面设计知识,又想要好的界面而写的一个模版。老手请划走。
一、创建项目
我用的是android studio,有的会用IDEA,这里展示是也是android studio的,两者差别并不大。
-
首先点击new project,会弹窗一个窗口
如果想要一个什么都是空的项目,则选择第一个Empty,这个会为你建一个空项目,只有一个界面。而如果不想自己写,可以直接用官方给的模版,本文会用scrolling Activity。 -
点击next
Name是你项目的名字,package name则是你的包名,一般你自己改好了项目名字,包名会默认更改的。savelocation是项目存储的位置。language则是你用的开发语言,目前开发安卓主流的两种Java和kotlin,我比较偏向后者,兼容Java,语法更简单。然后点击finish。
-
进入项目
进入以后会有如下的结构。左边是空项目没有的,比如menu,layout中的也是main,这里是srolling。中间是activity的代码。右边是app的build。框中的是官方的视图绑定:viewbinding,这是空项目没有的,个人更加推荐使用这个,学起来很快,很简单但很使用。本文只讲界面,所以并不会过多有逻辑上的代码讲述。
用虚拟机直接跑模版,一点不改,就是如下的界面。右上角是一个下拉菜单,UiMode是app的名字。
下面是右上角的下拉菜单的界面,如果需要其它选项,可以依葫芦画瓢写上去。然后在中间的代码区域,添加对应的点击监听处理
底部的那一长串文字,是通过其它xml文件引入的。我们可以把直接删除掉。或者沿用该布局。我写的示例是直接删掉的。删掉的同时,记得要想srollingactivity中也删除对应控件id,因为删除找不到了,所以不删除运行的话会报错。
删除后,activity_scrolling.xml代码如下
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true" tools:context=".ScrollingActivity"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:fitsSystemWindows="true" android:theme="@style/Theme.UiMode.AppBarOverlay"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/toolbar_layout" style="@style/Widget.MaterialComponents.Toolbar.Primary" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:toolbarId="@+id/toolbar"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/Theme.UiMode.PopupOverlay" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout>
-
添加阴影
这时候,你会发现,模版给你了你一个Toolbar。我们不需要去改。向上滑动时,它会自动向上收缩。
而阴影一般来说,是需要自己去写的。但是对于初学者来说,这并不友好。所以我要讲的是官方给的一个控件。它优点是使用简单,不需要过多的写界面。缺点就是不能够自定义,包括阴影方向之类的。但对于优化界面足够了。
我向界面中添加两个控件,一个是NestedScrollView和CardView(卡片布局)。最主要的就是后者,卡片布局,它自己提供了圆角和阴影。现在代码如下
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true" tools:context=".ScrollingActivity"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:fitsSystemWindows="true" android:theme="@style/Theme.UiMode.AppBarOverlay"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/toolbar_layout" style="@style/Widget.MaterialComponents.Toolbar.Primary" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:toolbarId="@+id/toolbar"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/Theme.UiMode.PopupOverlay" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:id="@+id/item_detail_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="10dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:orientation="vertical" app:cardCornerRadius="10dp" app:cardElevation="10dp" app:contentPadding="10dp"> </androidx.cardview.widget.CardView> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>
可以看到界面出现了一个比较立体的元素。这个就是卡片布局。
-
向布局中添加其它元素
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true" tools:context=".ScrollingActivity"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height" android:fitsSystemWindows="true" android:theme="@style/Theme.UiMode.AppBarOverlay"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/toolbar_layout" style="@style/Widget.MaterialComponents.Toolbar.Primary" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:toolbarId="@+id/toolbar"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/Theme.UiMode.PopupOverlay" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.core.widget.NestedScrollView android:id="@+id/item_detail_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="10dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:orientation="vertical" app:cardCornerRadius="10dp" app:cardElevation="10dp" app:contentPadding="10dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@color/white" android:orientation="vertical" android:paddingTop="4dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical"> <TextView android:layout_width="66dp" android:layout_height="wrap_content" android:layout_marginTop="12dp" android:layout_marginBottom="12dp" android:alpha="0.4" android:text="商品售价" android:textColor="@color/black" android:textSize="14sp" /> <TextView android:id="@+id/temp" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="14dp" android:layout_weight="1" android:gravity="center" android:text="50" android:textSize="14sp" /> <TextView android:layout_width="30dp" android:layout_height="30dp" android:gravity="center" android:text="¥" /> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> </androidx.core.widget.NestedScrollView> </androidx.coordinatorlayout.widget.CoordinatorLayout>
界面如下
可以看到,元素与背景一下就隔开了,很有层次感。
结语:本文只是浅浅的介绍下,一个新项目,如何快速写出好看的界面。当然这只是一个例子,要灵活运用,才能写出好看的界面。为什么要注重界面,因为app给人一个好的印象很重要。当然除了这些,还有配色也很重要。好的配色也是一大加分项。这里就不展开了,毕竟我不是学设计的,对配色的了解不深,就不好为人师了。不过网上很多配色网站,这里给大家留一个渐变色的网站:渐变色
gitee地址:项目地址