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地址：项目地址
8203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
