• 最佳UI体验


    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是实现刷新的核心

     这时候RecyclerView变成了一个子控件,所以要将behavior转到外面去

    我们用setOnrefreshListener()设置一个监听事件,initFruits()刷新数据,notifyDataSetChange()表示数据发生变化,我们在setRefreshing中传入fals表示刷新完后关闭进度条

    可折叠标题

    CollapsingToolbarLayout是作用在Toobar布局之上的它不能单独存在,它作为最外层的布局

    下面我们在CollapsingToolbarLayout中定义ImageView和Toolbar,意味着这个高级版的标题栏由普通的标题和图片组成。

    接下来修改main.xml

    因为NestedScollView中只能有一个子控件,所以添加LinerLayout布局,我们liner中添加卡片和文字

    修改FruitAdapter处理RecyclerView的点击事件

     

    我们给CaredView 注册了监听事件

  • 相关阅读:
    Django----博客文章数据返回
    Django----admin模块初识
    Django搭建博客文章---模型层
    Js 提交 form 表单
    sql 查询 between and 和 >= <= 比较
    C# 未能加载项目文件
    不一样的 Null
    Js实现table单双行交替色
    C# 判断一个string型的时间格式是否正确
    利用 Label 小小的提升一下用户体验
  • 原文地址:https://www.cnblogs.com/lyl123/p/7222543.html
Copyright © 2020-2023  润新知