写给初学者32_android_安卓UI体验的升级-1

安卓32_UI体验的升级-1

普片人认为安卓的UI，用户交互没有IOS的好，这个问题个人觉得没有绝对，各有千秋吧。安卓这两年的进步也是非常明显，一个显著的进步就是在5.0发布以后Material Design的提出。其实退出的主要目的，还是因为开源的问题，开发商开发风格各有千秋，五花八门，这其实是一种对安卓的伤害。

更好的工具栏 ToolBar

首先要和ActionBar区分开来，因为每创建一个项目，都会有一个ActionBar,有的时候我们还会去取消掉这个ActionBar,这些我们都是通过AppTheme去修改的。

在styles.xml文件下 可以找到AppTheme属性

<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <!-- Customize your theme here. -->    <item name="colorPrimary">@color/colorPrimary</item>    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <item name="colorAccent">@color/colorAccent</item></style>

根据标签的意思我们可以知道，这里我们能够做的事情就是定义我们的主题，当然这里是基于系统的DarkActionBar来做的，我们的父主题也是可以更改的。在style标签可以配置很多颜色

• colorPrimary
• colorPrimaryDark
• colorAccent

主要的是这三个分别代表着主题色，主题灰度色和强调色

基本了解Theme主题以后就可以开始尝试使用Toolbar

Toolbar是5.0以后推出的，存放在V7扩展包一下，使用的步骤：

第一步是需要隐藏掉ActionBar

<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    <!-- Customize your theme here. -->    <item name="colorPrimary">@color/colorPrimary</item>    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <item name="colorAccent">@color/colorAccent</item></style>

第二步在布局中使用

    <android.support.v7.widget.Toolbar    android:id="@+id/mainTool"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@color/colorPrimary"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    ></android.support.v7.widget.Toolbar>

第三部在对应Java文件中使其生效

 @Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    mainTool = (Toolbar) findViewById(R.id.mainTool);    // 设置    setSupportActionBar(mainTool);}

说明

这里很多人会疑惑，因为这个方法名好像是设置ActionBar的，这里主要的目的是让ToolBar具备了ActionBar的功能，还可以很好的完成Material Design。

结果和普通的ActionBar一毛一样

第四步 添加工具栏按钮

也就是在顶部经常可以看到的一些按钮。

首先需要menu布局文件，创建一个Menu文件夹



在这个文件夹下创建一个Menu文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto">    <item    android:id="@+id/menu_one"    android:icon="@mipmap/ic_launcher"    android:title="Item"    app:showAsAction="always" />    <item    android:id="@+id/menu_two"    android:icon="@mipmap/ic_launcher"    android:title="Item"    app:showAsAction="ifRoom" />    <item    android:id="@+id/menu_three"    android:icon="@mipmap/ic_launcher"    android:title="Item1"    app:showAsAction="never" />    <item    android:id="@+id/menu_four"    android:icon="@mipmap/ic_launcher"    android:title="Item2"    app:showAsAction="never" /></menu>

showAsAction 决定按钮的位置

• always 显示在Toolbar上
• ifRoom ToolBar显示的下就在ToolBar中显示否则就在弹出框中显示
• never 弹出框中显示

另外在弹出框中显示的item就只会显示文本

但是这个弹出框的位置和颜色并不是辣么舒服，这个时候我们需要对整个弹出框进行一个风格重新定义。

在style中定义新的style标签对

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">    <item name="android:colorBackground">@color/colorPrimary</item> <!--设置背景色以及menu中的其他属性-->    <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item></style><style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">    <item name="overlapAnchor">false</item>  <!--设置不覆盖--></style>

然后在ToolBar中引用这个主题

 app:popupTheme="@style/ToolbarPopupTheme"

使得这些按钮能够响应点击事件 重写onOptionsItemSelected

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    switch (item.getItemId()) {        case R.id.menu_one:            break;        case R.id.menu_two:            break;        case R.id.menu_three:            break;        case R.id.menu_four:            break;    }    return true;}

需要注意的是返回值，和普通的View的监听类似，就没什么好说的了

第五步 设置其他信息

1.setLogo
APP 的图标。
2.setTitle
主标题。
3.setSubtitle
副标题。

4.setNavigationIcon

@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    mainTool = (Toolbar) findViewById(R.id.mainTool);    mainTool.setTitle("Title");    mainTool.setSubtitle("Sub");    mainTool.setLogo(R.mipmap.ic_launcher);    setSupportActionBar(mainTool);    mainTool.setNavigationIcon(R.mipmap.ic_launcher);    mainTool.setNavigationOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            Toast.makeText(MainActivity.this, "click", Toast.LENGTH_SHORT).show();        }    });}

稍微注意一下这里的NavigationBar需要在setSupportActionBar后才会有效果。

滑动菜单 DrawerLayout

早期要实现一个滑动菜单是一个大费周章的操作。不过现在安卓已经将其集成，功能和交互性都非常的好。

首先这是一个Layout，有就意味这是一个ViewGroup，在这当中可以添加其他的视图。

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/mainDrawer"android:layout_width="match_parent"android:layout_height="match_parent"><FrameLayout    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="@color/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:popupTheme="@style/ToolbarPopupTheme"></android.support.v7.widget.Toolbar></FrameLayout><TextView    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_gravity="left"    android:background="#fff"    android:gravity="center"    android:text="隐藏部分"    android:textSize="30sp" /></android.support.v4.widget.DrawerLayout>

这里TextView就是我们侧滑隐藏的部分，可以看到我们界面的主要布局其实是FreamLayout，其中还包含着ToolBar，我们在左侧拉的时候才会将侧滑菜单拉出，但是问题是这个的体验有点差，因为得从最左边开始拉。并且默认的侧滑宽度我们也需要调整

如果你想让ToolBar不被遮挡住那么可以这么写

<LinearLayout 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:orientation="vertical"><android.support.v7.widget.Toolbar    android:id="@+id/toolBarOther"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    android:background="@color/colorPrimary"    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    app:popupTheme="@style/ToolbarPopupTheme"></android.support.v7.widget.Toolbar><android.support.v4.widget.DrawerLayout    android:id="@+id/drawerOther"    android:layout_width="match_parent"    android:layout_height="match_parent">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"            android:gravity="center"            android:text="主体部分" />    </FrameLayout>    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="left"        android:background="@color/colorAccent"        android:gravity="center"        android:text="隐藏部分" /></android.support.v4.widget.DrawerLayout></LinearLayout>

将DrawerLayout放置到另外的布局中和ToolBar成为并列关系，不再是包含关系

为ToolBar添加上一个按钮，更好的实现侧滑功能

原理的话很简单，无非是对ToolBar增加一个导航按钮，并且监听这个按钮，点击以后实现侧滑。

系统已经提供好的一个监听者ActionBarDrawerToggle

你只需要在这里添加一些代码

Toolbar toolbar = (Toolbar) findViewById(R.id.toolBarOther);    drawerLayout = (DrawerLayout)findViewById(R.id.drawerOther);    setSupportActionBar(toolbar);    // 设置按钮可用    getSupportActionBar().setDisplayHomeAsUpEnabled(true);    // 系统的监听对象 更好的完成侧滑效果    ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.app_name, R.string.app_name);    mDrawerToggle.syncState();    drawerLayout.addDrawerListener(mDrawerToggle);

如果你非要自己来做，也是可以的，会稍微麻烦一点

setContentView(R.layout.activity_drawer_other);    Toolbar toolbar = (Toolbar) findViewById(R.id.toolBarOther);    drawerLayout = (DrawerLayout)findViewById(R.id.drawerOther);    setSupportActionBar(toolbar);    ActionBar actionBar = getSupportActionBar();    actionBar.setDisplayHomeAsUpEnabled(true);    // 设置图片    actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);

接着监听一下，监听依旧是和之前ToolBar中的菜单按钮在一个地方

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {    switch (item.getItemId()){        case android.R.id.home:// 按钮id            // 开始            drawerLayout.openDrawer(GravityCompat.START);            break;    }    return true;}

这样基本的侧滑就能够实现了，接下来无非是在侧滑当中放上一些内容，一般放置的都是一些用户信息，设置偏好这类的，也可以称之为导航栏

NavigationView 导航视图

谷歌为了使Design更快的融入，对导航视图也做了一次很好的封装。使用这个视图，我们可以很快，简单的搭建一个导航视图。

添加依赖

compile 'com.android.support:design:24.2.1'

更好的封装

• headerLayout
• menu

NavigationView将导航拆分为两个部分，头部布局和菜单，我们之后使用的时候就可以通过简单的布局调用就能达到效果

使用

这里我们结合到侧滑菜单使用

完成headerLayout 就和普通布局一样

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/colorPrimary"android:orientation="vertical"android:padding="24dp"><ImageView    android:layout_width="80dp"    android:layout_height="80dp"    android:layout_gravity="center"    android:src="@mipmap/ic_launcher" /><TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:text="edison"    android:textColor="#fff"    android:textSize="24sp" /><TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center"    android:text="abcdefg"    android:textColor="#fff"    android:textSize="16sp" /></LinearLayout>

完成menu

<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single">    <item        android:id="@+id/nav_home"        android:icon="@drawable/ic_menu_home"        android:title="主页" />    <item        android:id="@+id/nav_people"        android:icon="@drawable/ic_menu_cc_am"        android:title="我的朋友" />    <item        android:id="@+id/nav_find"        android:icon="@drawable/ic_menu_find"        android:title="查询" />    <item        android:id="@+id/nav_gallery"        android:icon="@drawable/ic_menu_gallery"        android:title="相册" />    <item        android:id="@+id/nav_share"        android:icon="@drawable/ic_menu_share"        android:title="分享" /></group></menu>

在Nav中进行调用

<android.support.design.widget.NavigationView        android:id="@+id/mainNa"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="left"        app:menu="@menu/na_menu"        app:headerLayout="@layout/nav_header"></android.support.design.widget.NavigationView>

达到结果

相对来将已经非常完善了，最后无非是对这些菜单进行一个监听，达到响应点击的效果。

navigationView = (NavigationView) findViewById(R.id.mainNa);    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {        @Override        public boolean onNavigationItemSelected(@NonNull MenuItem item) {            switch (item.getItemId()) {                case R.id.nav_home:                    Toast.makeText(DrawerLayoutDemoActivity.this, "clike", Toast.LENGTH_SHORT).show();                    break;            }            return true;        }    });

你如果要点击后侧滑消失，closeDrawer()就好了

掌握了ToolBar,DrawerLayout以及这里的NavigationView基本上市面上主流的布局都是能够很好的完成的。使用这些安卓提供的，无非是更贴切它的Material Design，而且确实很方便，也很好看、