说说 Android 的 Material Design 设计(

作者: deniro | 来源:发表于2018-09-09 14:19 被阅读47次

    Material Design 的设计理念是应用程序的界面应该是有立体效果的,立体效果最具代表性的就是悬浮按钮啦O(∩_∩)O~

    1 悬浮按钮(FloatingActionButton)

    FloatingActionButton 是 Design Support 库中提供的控件,使用它就可以实现悬浮按钮效果。

    在 drawable 目录下新增一张图标(tip.png),然后修改布局文件:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:material="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
          ...
          
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/tip"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_margin="20dp"
                android:src="@drawable/tip"
                material:elevation="20dp"
                material:backgroundTint="@color/colorPrimaryDark"
                />
        </FrameLayout>
    
       ...
    
    </android.support.v4.widget.DrawerLayout>
    
    1. 我们在布局文件中新增了 FloatingActionButton 配置。
    2. layout_gravity 设置为屏幕下角(bottom);end 表示如果系统语言为从左到右,那么就在右边,否则在左边。
    3. layout_margin 表示外边距。 这里使用了 dp 作为单位,因为 dp 会随着不同的屏幕而改变控件长度的像素数量。
    4. 因为用到了 Material Design 特殊设置,所以这里引用了 Material Design 的命名空间 xmlns:material="http://schemas.android.com/apk/res-auto"
    5. elevation 表示控件高度,高度越大,投影范围也就越大。
    6. backgroundTint 表示控件背景色,默认使用 @color/colorAccent

    在活动类中添加悬浮按钮的点击事件:

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        ...
    
        //悬浮按钮点击事件
        FloatingActionButton fab=(FloatingActionButton)findViewById(R.id.tip);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "欢迎来到喵星人世界O(∩_∩)O~", Toast.LENGTH_SHORT).show();
            }
        });
    }
    
    悬浮按钮效果

    2 交互式提示栏(Snackbar)

    Snackbar 可在提示栏中加入一个按钮,点击时执行一些额外的事件。

    Snackbar 的 make 方法定义如下:

    public static Snackbar make(@NonNull View view, @NonNull CharSequence text,
                @Duration int duration) {
            Snackbar snackbar = new Snackbar(findSuitableParent(view));
            snackbar.setText(text);
            snackbar.setDuration(duration);
            return snackbar;
        }
    
    参数 说明
    view View 对象。
    text 需要显示的文本内容。
    duration 显示时长,单位毫秒。

    我们修改悬浮按钮的点击事件:

    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
    //                Toast.makeText(MainActivity.this, "欢迎来到喵星人世界O(∩_∩)O~", Toast.LENGTH_SHORT).show();
            Snackbar.make(v,"欢迎来到喵星人世界O(∩_∩)O~",Snackbar.LENGTH_LONG).setAction("更多", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "喵星人,网络语言,假想猫咪是从遥远外太空来的,喵星人是来到地球的外星人,因为很萌的外表而获得人类的信任,成为少数与人类平等交往的朋友。", Toast.LENGTH_SHORT).show();
                }
            }).show();
        }
    });
    
    交互式提示栏效果

    3 CoordinatorLayout

    上面的例子中,弹出的交互式提示栏遮挡了部分悬浮按钮,我们可以使用 CoordinatorLayout 来解决这个问题。CoordinatorLayout 可以监听旗下所有的子控件中的各种事件。CoordinatorLayout 会监听交互式提示栏的弹出事件,让悬浮按钮向上移动,从而提供更好的用户体验。

    我们修改布局文件,把原来的 FrameLayout 改为 CoordinatorLayout 即可:

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        ...
    </android.support.design.widget.CoordinatorLayout>
    

    虽然 Snackbar 并不是 CoordinatorLayout 的子控件,但我们把 FloatingActionButton 作为 View 参数传入了 Snackbar 的 make() 方法,所以这个 make() 事件就被 CoordinatorLayout 监听到咯 O(∩_∩)O~

    最终演示效果

    相关文章

      网友评论

        本文标题:说说 Android 的 Material Design 设计(

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