美文网首页
Material Design 实战

Material Design 实战

作者: 郑在学_blog | 来源:发表于2017-07-25 23:48 被阅读0次

    1.Toolbar

    由于ActionBar被限定智能位于活动的顶部,从而不能实现一些MaterialDesign的效果,因此官方现在已经不再建议使用ActionBar。
    Toolbar的强大之处在于,不仅继承了ActionBar的所有功能,而且可以配合其他空间来完成一些MaterialDesign的效果。

    Toolbar的实现

    1.1 指定一个不带ActionBar的主题
    打开res/values/styles.xml文件
    修改AppTheme 的 parent属性为Theme.AppCompat.NoActionBar(深色)或者 Theme.AppCompat.Light.NoActionBar(淡色)
    修改Xml布局文件

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

    在Activity添加代码

     toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    

    我们还可以在Toolbar上添加一些按钮来让Toolbar更丰富一些。

    首先,在res文件夹下添加menu文件夹,新建一个Menu resource file文件。

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/backup"
            android:title="BackUp"
            app:showAsAction="always"
            android:icon="@mipmap/backup"
            />
        <item
            android:id="@+id/delete"
            android:title="Delete"
            app:showAsAction="ifRoom"
            android:icon="@mipmap/delete"
            />
        <item
            android:id="@+id/settings"
            android:title="Settings"
            android:icon="@mipmap/setting"
            app:showAsAction="never"/>
    </menu>
    

    接下来在Activity中重写onCreateOptionsMenu和onOptionsItemSelected方法,与普通的菜单项添加方法一样。

    @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.toolbar,menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()){
                case R.id.backup:
                    Toast.makeText(this,"点击了备份",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.delete:
                    Toast.makeText(this,"点击了删除",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.settings:
                    Toast.makeText(this,"点击了设置",Toast.LENGTH_SHORT).show();
                    break;
                case android.R.id.home:
                    drawerLayout.openDrawer(GravityCompat.START);
    
            }
            return true;
        }
    

    附:

    • 添加xmlns:app="http://schemas.android.com/apk/res-auto"可以让item使用ap:前缀的语句。
    • app:showAsAction 的三个属性always代表按钮总是显示,ifRoom代表按钮如果有空间才显示,没空间则显示在菜单中,never代表只显示在菜单中。

    效果图:

    只需要关注Toolbar,其他下面详细说明

    2.滑动菜单(抽屉)

    所谓的滑动菜单就是将一些菜单选项隐藏起来,而不是在主屏幕上,可以通过滑动的方式将菜单显示出来。
    先介绍一下DrawerLayout的用法,在布局中允许放入两个直接的子控件。第一个控件是主屏幕中显示的内容,可以使用一个布局包裹其他子控件来作为DrawerLayout的第一个子控件。DrawerLayout的第二个子控件是滑动菜单中显示的内容。

    <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/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.design.widget.CoordinatorLayout  //第一个子控件,主屏幕的内容
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorPrimary"
                    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:layout_scrollFlags="snap|scroll|enterAlways" />
            </android.support.design.widget.AppBarLayout>
    
            <android.support.v4.widget.SwipeRefreshLayout
                android:id="@+id/swipe_refresh"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
                <android.support.v7.widget.RecyclerView
                    android:id="@+id/recyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
            </android.support.v4.widget.SwipeRefreshLayout>
    
    
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_margin="16dp"
                android:src="@drawable/done" />
    
        </android.support.design.widget.CoordinatorLayout>
        <android.support.design.widget.NavigationView  //第二个子控件,菜单内容
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/nav_menu" />
    
    
    </android.support.v4.widget.DrawerLayout>
    

    控件中的代码在后面会详细说明。

    在Acitivity中添加代码

    DrawerLayout drawerLayout = (DrawerLayout)findViewById(R.id.drawer);
    
    ActionBar actionBar = getSupportActionBar();
            if(actionBar!=null){
                actionBar.setDisplayHomeAsUpEnabled(true); //在toolbar添加HomeAsUp按钮,点击可以打开抽屉
            }
    

    在onOptionsItemSelected方法中添加代码

    case android.R.id.home:
                    drawerLayout.openDrawer(GravityCompat.START);//打开抽屉
    

    附:

    • HomeAsUp按钮的id默认为 android.R.id.home (不用声明)

    3. NavigationView

    NavigationView是严格按照MaterialDesign的要求来进行设计的一个控件,使用NavigationView使滑动菜单页面的实现变得非常简单。
    NavigationView的设计分为menu设计和header设计。

    1. 首先添加依赖
    compile 'com.android.support:design:25.3.1'
    compile 'de.hdodenhof:circleimageview:2.1.0'
    

    第一个是design support库,第二个是一个开源项目,可以实现图片圆形化。

    1. 然后设计menu,即活动菜单中的菜单项
    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item
            android:id="@+id/backup"
            android:title="BackUp"
            app:showAsAction="always"
            android:icon="@mipmap/backup"
            />
        <item
            android:id="@+id/delete"
            android:title="Delete"
            app:showAsAction="ifRoom"
            android:icon="@mipmap/delete"
            />
        <item
            android:id="@+id/settings"
            android:title="Settings"
            android:icon="@mipmap/setting"
            app:showAsAction="never"/>
    </menu>
    

    编写的方法与上面的一样。

    1. 然后设计header
      新建XML布局文件(nav_header.xml)
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="?attr/colorPrimary"
        android:padding="10dp">
        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@mipmap/headicon"
            android:id="@+id/icon_image"
            android:layout_centerInParent="true"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/mail"
            android:text="uhsdiahdsi@qq.com"
            android:textColor="#ffffff"
            android:textSize="14sp"
            android:layout_alignParentBottom="true"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/username"
            android:layout_above="@id/mail"
            android:text="zjj"
            android:textSize="14sp"
            android:textColor="#ffffff"/>
    </RelativeLayout>
    

    布局的设计与普通的布局设计一样,只需把ImageView改为de.hdodenhof.circleimageview.CircleImageView,把图片裁剪为圆形。

    1. 修改布局文件,把滑动菜单的主控件改为NavigationView,代码在上面已经贴出。
      <android.support.design.widget.NavigationView  //第二个子控件,菜单内容
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start" //滑动菜单从哪个方向滑出,start为按系统语言的方向
            app:headerLayout="@layout/nav_header" //header的ID
            app:menu="@menu/nav_menu"//menu的ID 
    />
    

    5.在Activity中添加代码

    NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
    
    navView.setCheckedItem(R.id.nav_call); //设置默认选择项
            navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
                    drawerLayout.closeDrawers();
                    return true;
                }
            }); // 选择的监听事件
    

    效果图:

    Drawer

    4.悬浮按钮和可交互提示

    FloatingActionButton

    在主屏幕中添加代码

    <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_margin="16dp"
                android:src="@drawable/done" />
    

    代码很好理解,就不罗嗦了。还可以使用app:elevation设置悬浮的高度,高度影响投影的深浅和大小。

    然后再Acitivity中添加悬浮按钮的点击事件,方法其实与普通按钮一样。

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                        }
                    }).show(); 
                }
            });//可交互的提示
    
    Snackbar(可交互提示)

    代码在上面。
    与Toast很类似,但是第一个参数是一个View类型的值,而不是Context值。它可以通过View值获得其最外层的父布局。
    Snackbar的出现可以防止用户操作失误,例如当用户需要删除图片的时候,可以询问用户是否确认删除。而不是Toast那样直接返回删除成功与否。

    效果图:

    Snackbar ,Undo可以点击

    5. CoordinatorLayout

    CoordinatorLayout是一个加强版的FrameLayout,把他作为主屏幕的主控件,可以确保Snackbar的出现不会遮挡住悬浮按钮。
    代码在上面出现过。

    6. 卡片式布局

    CardView可以让人看上去每一个RecyclerView子项有立体的感觉。RecyclerView在这里就不详细说明,以后我会在新的文章中系统的说明。

    1. 首先添加依赖
    compile 'com.android.support:recyclerview-v7:25.3.1' //RecyclerView的依赖
    compile 'com.android.support:cardview-v7:25.3.1' //卡片式布局
    compile 'com.github.bumptech.glide:glide:3.7.0' //图片加载库,轻松加载网络图片
    

    2.添加RecyclerView
    新增Dog类

    package com.example.peek_mapdemotest.materialdesign;
    
    /**
     * Created by Administrator on 2017/7/25.
     */
    
    public class Dog {
        private String name;
        private String introduce;
        private int pic;
    
        public Dog(String name, String introduce, int pic) {
            this.name = name;
            this.introduce = introduce;
            this.pic = pic;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getIntroduce() {
            return introduce;
        }
    
        public void setIntroduce(String introduce) {
            this.introduce = introduce;
        }
    
        public int getPic() {
            return pic;
        }
    
        public void setPic(int pic) {
            this.pic = pic;
        }
    }
    
    

    新增适配器

    package com.example.peek_mapdemotest.materialdesign;
    
    import android.content.Context;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import java.util.ArrayList;
    
    /**
     * Created by Administrator on 2017/7/25.
     */
    
    public class DogAdapter extends RecyclerView.Adapter<DogAdapter.ViewHolder> {
        private ArrayList<Dog>  mDogList;
        private Context mContext;
        public DogAdapter(ArrayList<Dog> dogList){
            mDogList = dogList;
        }
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if(mContext == null){
                mContext = parent.getContext();
            }
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.dog_item,parent,false);
            ViewHolder holder = new ViewHolder(view);
            return holder;
        }
    
        @Override
        public void onBindViewHolder(ViewHolder holder, int position) {
            Dog dog = mDogList.get(position);
            holder.dogImage.setImageResource(dog.getPic());
            holder.dogIntroduce.setText(dog.getIntroduce());
            holder.dogName.setText(dog.getName());
    
        }
    
        @Override
        public int getItemCount() {
            return mDogList.size();
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
            ImageView dogImage;
            TextView dogName;
            TextView dogIntroduce;
    
            public ViewHolder(View itemView) {
                super(itemView);
                dogImage= (ImageView) itemView.findViewById(R.id.dog_image);
                dogName = (TextView) itemView.findViewById(R.id.dog_name);
                dogIntroduce = (TextView) itemView.findViewById(R.id.introduce);
            }
        }
    }
    
    

    在Activity中添加数据源

     private void initData() {
            Dog dog1 = new Dog("哈士奇","西伯利亚雪橇犬是原始的古老犬种,在西伯利亚东北部、格陵兰南部生活。",R.drawable.hashiqi);
            dogList.add(dog1);
            dogs.add(dog1);
            Dog dog2 = new Dog("博美","头部相当短小,头盖宽广且平,形状像狐狸头。眼睛大小中等,古铜色,略成椭圆形,两眼间距适中黑色眼眶。鼻端部较细,呈楔形,鼻子和被毛同色。耳朵小,两耳间距较近,多为直立耳,就如狐狸的耳朵。",R.drawable.bomei);
            dogs.add(dog2);
            dogList.add(dog2);
            Dog dog3 = new Dog("贵宾","贵宾犬,Poodle,也称“贵妇犬”,又称“卷毛狗”",R.drawable.guibin);
            dogList.add(dog3);
            dogs.add(dog3);
            Dog dog4 = new Dog("牛头梗","牛头梗是为绅士们饲养的,为此这些绅士强烈要求公平竞赛,大家不要与弄虚作假的人进行比赛。牛头梗被教以勇敢地进行自卫和保护它的主人,但决不允许它去尝试挑战——白色的品种被称作“白色的骑士”,这是它保持至今的荣誉。",R.drawable.niutougeng);
            dogList.add(dog4);
            dogs.add(dog4);
            Dog dog5 = new Dog("牧羊犬","国内血统比较好的边境牧羊犬如乾通名犬俱乐部繁育的卡尔,都是国内顶尖级别的血统,多次在美国西敏寺犬展中获得优异成绩。",R.drawable.muyangquan);
            dogList.add(dog5);
            dogs.add(dog5);
            Dog dog6 = new Dog("柴犬","柴犬是体型中等并且又最古老的犬。柴犬能够应付陡峭的丘陵和山脉的斜坡,拥有灵敏的感官,使得柴犬屡次成为上乘的狩猎犬。",R.drawable.chaiquan1);
            dogList.add(dog6);
            dogs.add(dog6);
            Dog dog7 = new Dog("巴哥","巴哥犬是体贴,可爱的小型犬种",R.drawable.bage);
            dogList.add(dog7);
            dogs.add(dog7);
    
        }
    

    声明RecyclerView,把RecyclerView设置为瀑布型。

    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
             adapter = new DogAdapter(dogList);
            StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
            recyclerView.setLayoutManager(layoutManager);
            recyclerView.setAdapter(adapter);
    

    7.AppBarLayout

    你做了上面的操作会发现RecyclerView会把ToolBar遮挡住,主要是因为CoordinatorLayout是一个加强版的FrameLayout,所以默认在左上角开始摆放控件。
    添加了AppBarLayout之后会解决到这种问题,并且可以设计出,当往上滑动的时候,ToolBar会隐藏了。因为此时,用户的注意力会放在RecyclerView上,隐藏ToolBar会更适合用户的体验。

    修改代码,在ToolBar上加一层AppBarLayout布局。并且在Recyclerview中添加以下属性,这样可以解决遮挡问题。

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    

    然后再RecyclerView中添加以下属性,这样可以设计出Toolbar隐藏效果。

    app:layout_scrollFlags="snap|scroll|enterAlways"
    

    scroll指当RecyclerView向上滚动的时候,Toolbar会隐藏。enterAlways表示当RecyclerView向下滚动的时候,Toolbar会一起滚动。snap表示当Toolbar还没有完全隐藏或者显示的时候,会根据当前滚动的距离,自动选择隐藏还是显示。

    效果图:

    Toolbar在向上滚动的过程中隐藏了

    8.下拉刷新

    在RecyclerView的外层添加

    <android.support.v4.widget.SwipeRefreshLayout
                android:id="@+id/swipe_refresh"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">
    

    注意,在RecyclerView中的布局行为要移动到SwipeRefreshLayout布局中。

    然后在Activity中添加代码,声明SwipeRefreshLayout。

      swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
            swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
            swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
                @Override
                public void onRefresh() {
                    refreshDog();
                }
            });
    

    添加下拉刷新的逻辑

    private void refreshDog() {
            new Thread(new Runnable() {
                @Override
                public void run() {
                    try {
                        Thread.sleep(2000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            randomData();
                            adapter.notifyDataSetChanged();
                            swipeRefreshLayout.setRefreshing(false);
                        }
                    });
                }
            }).start();
        }
    
    public void randomData(){
            int j =dogs.size();
            dogList.clear();
            for(int i= 0;i<=8;i++){
                Random random = new Random();
                int index = random.nextInt(j);
                dogList.add(dogs.get(index));
            }
        }
    

    下拉刷新的效果只是模拟出来,因为读取的是本地数据,所以很快完成,看不到效果。因此,在线程中sleep了2秒,模拟从网络服务器拉数据下来的过程。

    效果图:

    下拉刷新中

    总结:
    Material design的设计规范细致入微,需要消化好一阵子。虽然今天只是学习Material design的第一天,但是越读越感受到它的妙处。这只是Material design的冰山一角。假如每个细节都严格遵照Material design的思想来设计,哪怕你不是设计人员,你的产品也一定不会难用和难看。

    学习资料:重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习笔记

    相关文章

      网友评论

          本文标题:Material Design 实战

          本文链接:https://www.haomeiwen.com/subject/ttygkxtx.html