Android之MaterialDesign应用技术

2021-12-20 23:48:06

　　PS:纵观现在大大小小软件的界面都变的比较漂亮，还有一些系统了，比如小米的MIUI，华为的EMUI等，虽然底层都是安卓，但他们的界面多多少少都会不同，谷歌对这个UI也是非常重视的，MaterialDesign就是今天的主角，首先在看这个的同时，要搞清楚什么是Material Design，百度百科解释，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。design，中文是设计之意，即“设想和计划，设想是目的，计划是过程安排”，通常指有目标和计划的创作行为、活动。在这个竞争激烈的数字化信息时代，企业建立自己的网站已经刻不容缓。无论大、中、小型企业，都决不能被时代所淘汰，所以，建设网站是企业把握时代脉搏，衡量企业是否跟上时代的标准。精明的经营者懂得并擅于用最先进的媒体--互联网，树立企业形象，宣传企业产品。企业建立网站，是企业在网络时代的企业舞台中展现自身实力和寻求发展的重要途径。

　　网上冲浪，这是一个很有意思的事情，可以看到最新的工程师的动态，最新的技术和该技术的广泛性，网上有很多人写过这个design文章，但一般都没有写滑动删除和滑动标题悬浮等功能，这个标题悬浮和那个tablayout吸顶差不多一个概念，都是增强了用户的视觉，使用户有更好的体验。废话不多说，列重点

滑动删除及撤销（SwipeDismissBehavior，Snackbar）
滑动列表控制控件消失和出现
实现下滑动悬浮效果

在这之前，首先添加依赖

　  compile 'com.android.support:appcompat-v7:25.3.1'

   compile 'com.android.support:support-v4:25.3.1'

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

   compile 'com.android.support:recyclerview-v7:25.3.1'

1：滑动删除及撤销

例子：一个textview滑动消失，撤销恢复。

　　效果图

1.1:创建布局文件design_main_layout.xml

这个布局文件非常简单，只有一个CoordinatorLayout和TextView,但是CoordinatorLayout是重点，滑动控件什么的都和他有关，他也是一个布局，和线性布局什么的都一样用，该布局是协调控件之间的联系的。

<?xml version="1.0" encoding="utf-8"?>

<!--协调者布局-->

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

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

    android:orientation="vertical">

    <TextView

        android:id="@+id/id_tv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textSize="30dp"

        android:clickable="true"

        android:layout_gravity="center"

        android:background="#a8aace"

        android:text="滑动我试试"/>

</android.support.design.widget.CoordinatorLayout>

1.2：Activity具体代码

SwipeDismissBehavior主要是控制控件的行为，LayoutParams是布局参数，textview这个控件是在协调者布局中滑动的，所以，要获取该布局的参数，然后再设置行为。behavior.setListener(this);这一行是必须写的，如果不写的话，就算滑掉了，按照原轨迹再滑过来，还是会显示的，他只是我们看不到了而且，通道还在。

ViewCompat.animate(tv1).alpha(1).start();则是显示滑掉的内容。

Snackbar的用法，我想大家一看就能懂，这就不多说了。

        tv1 = (TextView) findViewById(R.id.id_tv);

        CoordinatorLayout.LayoutParams cLayout=(CoordinatorLayout.LayoutParams) tv1.getLayoutParams();

        //第一种滑动方法

        SwipeDismissBehavior<TextView> behavior = new SwipeDismissBehavior<>();

        //如果不写监听的话,滑动消失后,还可再滑动出现。

        behavior.setListener(this);

        cLayout.setBehavior(behavior);

该滑动删除还是比较简单的，相比那些还要计算坐标的方法简单多了，

在这里有一个重点就是behavior的监听，有两个方法要重写，而且是关键方法

 @Override

    public void onDismiss(View view) {

        view.setVisibility(View.GONE);

        Snackbar.make(view,"删除控件",Snackbar.LENGTH_LONG)

                .setAction("撤销",new View.OnClickListener(){

                    @Override

                    public void onClick(View v) {

                        tv1.setVisibility(View.VISIBLE);

                        //显示,设置通道为1,因为Gone以后,通道就是0了。

                        ViewCompat.animate(tv1).alpha(1).start();

                    }

                }).show();

    }

    @Override

    public void onDragStateChanged(int state) {

    }

2：滑动列表控制控件消失和出现

例子：一个recyclerview，往下滑，则返回顶部图标显示，往上滑图标不显示，

原因:在很多段子软件中，会有大量的文字和图片，当用户往下翻的时候，也就是说内容会不断的在上方消失，下面的内容不算的刷新出来，这时右下角出现一个辅助用户回到顶部的按钮，因为在往上翻时候可能加载的了很多，有些用户就像一步到达顶部，这就出现了滑动监听。

效果图：

2.1：创建布局文件

外层是协调者布局，中间就是一个类似于listview的RecyclerView，和一个右下角的返回顶部按钮。

 <android.support.v7.widget.RecyclerView

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:id="@+id/id_rview"

        app:layoutManager="LinearLayoutManager"

        ></android.support.v7.widget.RecyclerView>

    <ImageView

        android:id="@+id/id_img"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textSize="30dp"

        android:clickable="true"

        android:layout_gravity="bottom|right"

        android:layout_marginBottom="20dp"

        android:layout_marginRight="20dp"

        android:src="@mipmap/shoubu"

        />

2.2：创建自定义Adapter和Behavior

这里的适配器和继承baseadapter类似，里面都是数据和泛型，但是该适配器是写了Viewholder，onBindViewHolder返回数据项，onCreateViewHolder（）方法是加载控件的，也就是样式，返回值是一个对象。

适配器因为不是重点，这里就不多说了，大家知道这是一个传入list<String>的RecyclerView适配器就行

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{

    public Context context;

    private List<String> list;

    public MyAdapter(Context context, List<String> list) {

        this.context = context;

        this.list = list;

    }

    @Override

    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        TextView view =new TextView(context);

        return new RecyclerView.ViewHolder(view){};

    }

    @Override

    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        ((TextView)holder.itemView).setText(list.get(position));

    }

    @Override

    public int getItemCount() {

        return list.size();

    }

}

行为：继承协调者布局中的Behavior,实现其中的两个方法。

实现上下滑动监听处理方法，其中的scaleX（0）和Y（0）是不显示，为1则显示。两个方法都有关键作用，一个是滚动时，关心该事件，一个是开始滚动，监听该事件。

public class MyBehavior extends CoordinatorLayout.Behavior {

    @Override

    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {//滚动发生时，关心该事件。

        return true;

    }

    /**滚动开始时，监听该事件。

     * 滚动监听*/

    @Override

    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dx, int dy, int[] consumed) {

        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);

        if(dy < 0){

            ViewCompat.animate(child).scaleX(0).scaleY(0).start();

        }else{

            ViewCompat.animate(child).scaleX(1).scaleY(1).start();//显示和不显示

        }

    }

}

2.3：Activity中逻辑处理代码

通过id找到控件
然后赋值
然后添加适配器
然后添加行为

        img = (ImageView) findViewById(R.id.id_img);

        final List<String> list=new ArrayList<>();

        //添加数据

        final RecyclerView recyclerView= (RecyclerView) findViewById(R.id.id_rview);

        for(int i=0;i<100;i++){

            list.add("wo shi "+i);

        }

        myAdapter = new MyAdapter(this,list);

        recyclerView.setAdapter(myAdapter);

        CoordinatorLayout.LayoutParams cLayout=(CoordinatorLayout.LayoutParams) img.getLayoutParams();

        MyBehavior myBehavior=new MyBehavior();

        cLayout.setBehavior(myBehavior);

关键来了，那么返回顶部的按钮代码怎么写呢，其实呢，这就是更新一下适配就行了，这里我把更新后的数据改了，为了的就让大家可以看清刷新了，

 img.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

               myAdapter.notifyDataSetChanged();

                //为了显示出返回顶部成功,我把数据换了,可以让大家看清变化。

                list.clear();

                for(int i=0;i<100;i++){

                    list.add("更新后: "+i);

                }

                myAdapter=new MyAdapter(DesignMainActivity.this,list);

                recyclerView.setAdapter(myAdapter);

                Toast.makeText(DesignMainActivity.this, "顶部定位成功", Toast.LENGTH_SHORT).show();

            }

        });

总结：该效果用普通的计算坐标方法也是可以实现的，但是这样的方法比较简单，起码不用太费脑子也能实现自己想要的方法。

3:实现下滑动悬浮效果

悬浮效果和tablayout什么的效果是一样的，这个现象是为了让用户知道时时刻刻在浏览页面的标题是什么，增强的了用户的体验。

效果图：

这个是总的效果图，根据属性的不通，实现的效果也是不一样的。比如说，toolbar在何时显示，可以选择只要是上滑就显示，也可以选择是滑到最上面的内容才显示，这个例子就是滑动到最上面的内容toolbar再显示。

3.1：创建xml文件

重点：一个是菜单列表----(悬停效果）这个textview 要写在toolbar下面，AppBarLayout里面，否侧不会出现这样的效果，app:layout_scrollFlags="scroll|enterAlwaysCollapsed"这个就是说明toolbar在何时显示。RecyclerView中

app:layout_behavior="@string/appbar_scrolling_view_behavior"方法是必须写的，因为coordinatorlayout和帧布局相似，会覆盖，在帧布局中写上id然后说在某个控件下面或者上面就可以，这个布局就要写app:layout_behavior即可。

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

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

        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar

            android:layout_width="match_parent"

            android:layout_height="?actionBarSize"

            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

            android:id="@+id/id_toolbar"/>

        <TextView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="----菜单列表----(悬停效果)"/>

    </android.support.design.widget.AppBarLayout>

3.2：Activity中逻辑处理

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

        setSupportActionBar(toolbar);

添加即可。这样就Ok了；

总结：这里的代码虽然看着少，那是因为大部分代码都被封装好了，我们一开始添加的依赖就是封装好的包，悬停效果能够给人一个很好的体验，当你在翻一个软件简介的时候，无论翻多少行，标题始终都会在上头悬浮，而且，悬浮的地方还可以添加点击监听，这都是可以自定义的。

码农公寓