android技术分享主题,如何做技术分享 | Material Design 在 Android 中的应用

1、主题

一个项目的开始，你得先确定这个项目的主题颜色是什么？你可以使用谷歌给你提供的Material Theme:

@android:style/Theme.Material(深色版本)

@android:style/Theme.Material.Light(浅色版本)

@android:style/Theme.Material.Light.DarkActionBar

当然，也可以使用自定义的主题，先看一下非常普遍的图片:

可以通过定制不同的类别的主题颜色，来达到预期的主题效果。

colorPrimary 项目主颜色，一般是Titlebar的背景颜色

colorPrimaryDark 比主颜色深一点颜色，一般是状态栏颜色

textColorPrimary 文字的主颜色

windowBackground 窗口背景颜色

navigationBarColor 导航栏颜色

通过在styles中配置颜色来定制您的主题，并在AndroidManifest中应用。

2、BottomNavigationView

主题构建好了，下面就是主要内容架构，我大致分为四个模块:武器简介、人物简介、配件简介和空头简介。那么底下就需要一个tab进行切换，BottomNavigationView便开始登场。从名字就可以看出 「底部导航view」，主要的作用在于给每个模块一个导航定位的功能。

先看一下效果:

1. 在menu/下创建菜单文件:

android:id="@+id/bottom_weapon_inc"

android:icon="@drawable/about"

android:title="@string/weapon_inc"/>

2.XML中进行引用

android:id= "@+id/navigation"

android:layout_width= "match_parent"

android:layout_height= "wrap_content"

app:itemBackground= "@color/colorPrimary"

app:itemIconTint= "@android:color/white"

app:itemTextColor= "@android:color/white"

app:menu= "@menu/bottom_menu"/>

3. 代码中设置点击事件

navigation!! .setOnNavigationItemSelectedListener{}

3、DrawerLayout、NavigationView

和BottomNavigationView相对的，不得不介绍一下NavigationView，这两者都是导航View，后者一般需要配合DrawerLayout实现侧滑菜单效果。

请看效果：

在XML直接引用

android:id="@+id/dl_main"

android:layout_width="match_parent"

android:layout_weight="1"

android:layout_height="0dp">

android:fitsSystemWindows="true"

android:id="@+id/fl_content"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/nv_left"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="start"

app:headerLayout="@layout/nav_header"

app:menu="@menu/nav_menu"/>

通过配置layout_gravity的属性来设置侧滑的方向：start：从左侧划出，end从右侧划出。

headerLayout: 设置其头布局menu: 设置菜单布局

详细使用请看我之前写的一篇博客：高大上的DrawerLayout

https://www.jianshu.com/p/ce8a7a20c03c

4、Toolbar

整体的架构搭建好了，剩下就是开始每个模块的内容了，内容当然少不了标题，那么就开始介绍一下Toolbar。

Toolbar作为早期Android中ActionBar的替代品，定制性和操作性挺高了不少。使用的时候需要设置NoActionBar的主题。

5、RecyclerView+SwipeRefreshLayout

项目中列表肯定是少不了的，那么这就不得不提RecyclerView了，强大之处不用多说，感兴趣的话看一下我之前写的博客，对其使用有个简单的介绍：简单粗暴RecyclerView

https://www.jianshu.com/p/60819de9eb42

那如果想实现侧滑删除和长按拖拽的功能怎么办呢？RecyclerView原生就支持这些，只需要继承ItemTouchHelper.Callback的类，并实现它几个抽象方法即可。

1. 创建实现ItemTouchHelper.Callback的类

internalinner classItemTouchHelperCallback: ItemTouchHelper.Callback() {

overridefungetMovementFlags(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder): Int{

valdragFlags = ItemTouchHelper.UP or ItemTouchHelper.DOWN

valswipeFlags = ItemTouchHelper.START or ItemTouchHelper.END

returnmakeMovementFlags(dragFlags, swipeFlags)

}

overridefunonMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder): Boolean{

myAdapter!!.onItemMove(viewHolder.adapterPosition, target.adapterPosition)

returnfalse

}

overridefunonSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int){

myAdapter!!.onItemDismiss(viewHolder.adapterPosition)

}

}

2. 和RecyclerView建立连接

valmItemTouchHelper = ItemTouchHelper(ItemTouchHelperCallback())

mItemTouchHelper.attachToRecyclerView(mRecyclerView)

实现效果如下：

6、CardView

列表结构写好了，里面内容得优化吧，CardView自带圆角和阴影效果，让每个Item看起来就非常的自然，正如其名像卡片一样，也符合了Material Design特点。

作为ViewGroup包裹子View实现圆角和阴影的效果：

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="2dp"

app:cardCornerRadius="5dp"

app:cardElevation="5dp">

主要由两个属性控制：

cardCornerRadius：圆角半径

cardElevation：高度(直接影响阴影的大小)7、CoordinatorLayout+AppBarLayout+Toolbar

列表写好了，接下来就是滑动的交互，CoordinatorLayout：作为根View或者是一个活多个子View特定的容器，用于协调子View之间滑动的交互，可以说CoordinatorLayout是整个Design库中最核心的控件。

AppBarLayout其实就是LinearLayout,通过layout_scrollFlags来控制滑动的效果。前提是滑动view必须实现NestedScrollingChild的接口，且需要配置behavior，最基本的使用就是：

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">

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

app:popupTheme="@style/Theme.AppCompat.Light"/>

android:id="@+id/refresh_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

android:id="@+id/recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:foregroundGravity="center"/>

有两个重点：

滑动的view必须实现NestedScrollingChild接口。比如RecyclerView、NestedScrollView.

必须配置behavior。app:layout_behavior="@string/appbar_scrolling_view_behavior"

来看一下layout_scrollFlags有哪些属性，为了方便理解，将可以滑动的view简称为ScrollView,设置了layout_scrollFlags称为DependentView：

1. scroll

子view必须设置该属性其他的属性的才会生效，这个是最基本的属性。

2. scroll|enterAlways

只要ScrollView滑动，滑动事件就会交给设置DependentView，当DependentView滑动结束才会将事件交给ScorllView。也就是下面的效果:

3. scroll|enterAlwaysCollapsed

当ScrollView向下滑动时，DependentView先折叠到最小高度(这里是0),然后将事件交给ScrollView，当ScrollView滑动结束，DependentView才继续滑动事件，直至展开，如下图所示：

4. scroll|enterAlwaysCollapsed|enterAlways

这边就展示一下折叠的效果，我们先设置最小的高度

android:layout_width="match_parent"

android:layout_height="100dp"

android:minHeight="50dp"

app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways"/>

展示一下效果：

5. scroll|exitUntilCollapsed

这个搭配重点在于上拉的时候，DependentView会先折叠到最小高度，然后事件全部交给ScrollView。那下拉的时候就是当ScrollView滑动结束，才开始DependentView的滑动事件。

6. scroll|enterAlways|snap

这个snap就是在上面的基础上多了一个回弹的效果,当DependentView正在滑动，此时手指离开屏幕时，DependentView会自动移动到离自己较劲的终点或者始点。效果如下:

上面的属性完全可以像第四种情况叠加使用，至于效果自己尝试了了才能感觉到它的奥妙之处。

8、转场动画

交互有了，现在看是添加点击跳转效果了。咱们之前跳转动画都是在startActivity之后调用overridePendingTransition方法，传入进入和退出的动画实现跳转动画。Android 5.0提供了强大的转场动画，给每个item赋予了生命，跳转时，仿佛每块布局都参与了这次搬迁大运动。

使用时，需在setContentView()之前加上

window.requestFeature( Window.FEATURE_CONTENT_TRANSITIONS)

跳转时候这样写:

startActivity( intent,

ActivityOptions.makeSceneTransitionAnimation( activity) .toBundle())

跳转的界面设置转场动画或者出场动画：

window.enterTransition = Explode()

window.exitTransition = Slide()

为了看出效果我设置了2s的延迟：

9、Toast、SnackBar和AlertDialog

基本的界面写完了，剩下的就是一些逻辑上的操作啦，比如「提示」。那么Android提示分为三种：

友好的Toast(比如网络失败)

拥有附加行为的提示SnackBar(比如误删信息回撤)

强制让用户做出选择的AlertDialg(比如未登录)

那么这三种的效果是什么呢？

大概先讲这些，有时间再进行后续补充。

严格按照Material Design风格进行开发，相信一定能开发出非常漂亮的APP！

我的博客

http://xiaweizi.cn/

大厂App 性能分析与优化方案研究返回搜狐，查看更多