最佳UI体验

2017-07-23 09:04 烈'焰阅读(248) 评论(0) 编辑收藏举报

1.toobar 我们新建一个项目后，熟悉是你指定一个app命名空间，有了它我们才可以指定id,宽，高等类型。xmlns:android 也是命名空间

 xmlns:app="http://schemas.android.com/apk/res-auto"

2.我们定义一个v7包中的Toolbar控件，在其中theme属性是设置主题的我们可以将主题转变为浅色的主题，popupTheme它是设置弹出菜单框主题的。一下都是浅色主题

   android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
   app:popupTheme="@style/Theme.AppCompat.Light"

3.我们在主函数中通过findViewById()找到toobar实例，通过setSupporyActionBar()开启实例，我们也可以在清单文件中的activity中添加android:lable属性，它是设置我们应用名称的。

4.如果我们想添加几个图标充当按钮时我们首先要在res下创建menu文件夹在这个文件夹中创建xml文件，我们用<item>标签来定义按钮，icon属性是设置图片的，title属性设置标题，showAsAction属性设置它显示的位置，它有以下几种选择：always永远显示在toolbar中直到空间不足时候不显示；ifRoom，在ToolBar空间足够的时候显示在控件上，如果不够就显示在菜单中，never永久显示在菜单中。

 1 <menu xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:app="http://schemas.android.com/apk/res-auto" >
 3     <item
 4         android:id ="@+id/backup"
 5         android:icon="@drawable/b"
 6         android:title="Backup"
 7         app:showAsAction="always"
 8         />
 9     <item
10         android:id ="@+id/delete"
11         android:icon="@drawable/a"
12         android:title="delete"
13         app:showAsAction="ifRoom"
14         />
15     <item
16         android:id ="@+id/setting"
17         android:icon="@drawable/setting"
18         android:title="Setting"
19         app:showAsAction="never"
20         />
21 </menu>

下面我们就实现点击事件，首先在主函数中通过onCreateOptionsMenu()方法加载我们创建的xml文件然后在onOptionsItemSelected()方法中实现点击事件

 public boolean onCreatePanelMenu(int featureId, Menu menu) {
       getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

 public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()){case R.id.backup:
              Toast.makeText(getApplicationContext(),"上传中。。。",Toast.LENGTH_SHORT).show();
              break;
          case R.id.delete:
          。。。。
      }
       return true;
    }
}

下面我们介绍滑动菜单：

滑动菜单就是将一些菜单选项隐藏起来，通过滑动的方式将菜单显现出来，在这我们用到DrawerALayout控件，它首先是一个布局，它的里面可以放两个子控件，第一个是直接在显示屏上显示的，另一个为滑动时候显示的。这里没有限制固定的控件

我们说一下textView中layout_gravity控件，这个属性必须设置，它是控制在那边滑动的，start表示根据系统滑动，left表示在左边滑动，right右侧滑动

下面我们添加导航按钮，首先DrawerLayout实例，用它调用find找到找到滑动实例，然后调用getSupportActionBar()方法得到ActionBar实例，然后用ActionBar调用setDisPlayHomeAsUpEnable()方法让导航按钮显现出来，然后再按调用setHomeAsUpIndicator()添加导航图片。实际上，TooBar最左侧的按钮将HomeAsUp按钮，它的默认图标为箭头，含返回上一个活动的功能，接下来我们在onOptionsInemSelected中设置HomeAsUp按钮的点击事件，R.id.home

我们这里调用了DrawerLayout的openDrawer方法是导航显现出来，注意它要求传入Gravity参数，这里我们传入GravityCompat.START来保证与xml文件一致

NavigationView滑动菜单界面，它是design SuPPORT库中的方法，要想使用它就要添加依赖

第一行添加design Support库，第二行是开源项目circlerimageview,他可以使图片圆形化。

我们需要先准备menu和headerLayout。在menu中我们设置标题和图标

代码中 group表示组，single表示只能选择一个。

下面我们在layout文件中创建headerLayout布局

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="180dp"
 4     android:padding="10dp"
 5     android:background="?attr/colorPrimary">
 6     <!--layout_centerInParent  居中设置-->
 7 <de.hdodenhof.circleimageview.CircleImageView
 8     android:layout_width="70dp"
 9     android:layout_height="70dp"
10     android:src="@drawable/k"
11    android:layout_centerInParent="true"
12     />
13     <TextView
14         android:id="@+id/mail"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:layout_alignParentBottom="true"
18         android:text="liuyunlong@qq.com"
19         android:textColor="#fff"
20         android:textSize="14sp"
21         />
22     <TextView
23         android:id="@+id/username"
24         android:layout_width="wrap_content"
25         android:layout_height="wrap_content"
26       android:layout_above="@+id/mail"
27         android:text="Tom"
28         android:textColor="#fff"
29         android:textSize="14sp"
30         />
31 </RelativeLayout>

其中我们在background中设置布局的颜色，CirclenImageView使图片圆形化android:layout_centerInParent="true"居中设置，这里设置完成后还要去main.xml中设置将textView换成NavigationView

我们可以看到我们通过menu和headerLayout属性将我们设置的meun和headLayout设置进去，接下来我们去主函数中去设置，先找到navigationView实例，接着通过实例调用setNavigionItemSelectListener监听事件，当用户点击时候就会回调OnNavigationItemSelectedListener，在onNavigationItemSelected()方法中实现响应的逻辑

悬浮按钮 FloatingActionButton,在main.xml中设置

其中bottom|end表示屏幕下方的右侧，end和star类似。在这里面可以添加app:elevation设置映射效果，其中传入的值越大越明显。下面使悬浮按钮可以点击。找到控件，设置点击事件

SnackBar先进的提示工具

利用make设置Snackbar参数，参数1当前页面的view,setAction可以理解为点击事件，但是这种方法有bag它会覆盖掉悬浮按钮，面对这个我们要引入CoordinatorLayout布局，它的用法非常简单将原来的Fram布局替换掉就可以了

cardView是卡片布局非常重要的控件，它是由v7包提供的

cardCornerRadius设置卡片的圆润度。为了丰富屏幕的空间我们要用recyclerview和cardView控件所以添加依赖

设置完后我们早main.xml中添加

下面创建水果实例

下面我们需要创建一个布局CaredView作为最外层的布局文件，因为它只可以有一个子控件所以我们在里面创建了linerLayout布局，在这个布局中设置显示图片和介绍的控件

在主函数中创建一个数组，将我们定义好的图片添加到数组中

写完以后你会看到它将ToolBar覆盖了，那我们怎么解决AppBarLayout就完全可以解决这个问题，将ToolBar控件添加到AppBarlayout中然后在recyclervidew中添加behavior属性，添加appbar_scrolling_view_behaving,这样就解决了。如果我们在Toolbar控件中添加app:layout_scrollFlags="scroll|enterAlways|snap",scroll表示RecyclerView向上滚动toolbar隐藏，向下时出现，snap自动选择隐藏位置。

swiperRefreshLayout是实现刷新的核心