android实现Materia Design风格APP(二):部分Materia Design风格的控件介绍一

本篇大部分内容学习自第一行代码第二版加上部分自己理解。介绍了,Snakebar、FloatingActionButton、CoordinateLayout、ToolBar四个控件,会的请自行跳过。

首先需要在build.gradle中依赖:

implementation 'com.android.support:design:28.0.0'

1.Snackbar

我感觉是一个增强版的Toast,可以实现Toast的功能的基础上增加了与用户的交互事件,效果如下:

android实现Materia Design风格APP(二):部分Materia Design风格的控件介绍一_第1张图片

使用方法:

xml布局:






 java代码:

public class Main2Activity extends AppCompatActivity {

    @BindView(R.id.root)
    FrameLayout root;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);

        //基本使用方法与Toast类似
        //构建普通不带点击事件的Snakebar
        Snackbar.make(root, "Hello, I am is a Snakebar.", Snackbar.LENGTH_SHORT).show();

        new Thread(new Runnable() {
            @Override
            public void run() {

                SystemClock.sleep(5000);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //构建带点击事件的Snakebar
                        Snackbar.make(root, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
                                .setAction("确定", new View.OnClickListener() {
                                    @Override
                                    public void onClick(View v) {

                                        Snackbar.make(root, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
                                    }
                                }).show();
                    }
                });
            }
        }).start();
    }
}

 2.FloatingActionButton

立体悬浮按钮是ImageButton的子类,是一个圆形加上点阴影效果的按钮。可以通过style里的colorAccent指定背景颜色,通过src指定图片

android实现Materia Design风格APP(二):部分Materia Design风格的控件介绍一_第2张图片

xml布局:




    

java代码:

public class Main2Activity extends AppCompatActivity {

    @BindView(R.id.fab)
    FloatingActionButton fab;//悬浮按钮

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);

        //设置悬浮按钮点击事件
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //构建带点击事件的Snakebar
                Snackbar.make(fab, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
                        .setAction("确定", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {

                                Snackbar.make(fab, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });
    }
}

3.CoordinatorLayout

加强版的FrameLayout,由Design Support库提供,使用方法参照FrameLayout,加强的地方在于可以监听其所有子控件的各种事件,然后自动帮我们做出最为合理的响应。注意layout_behavior这个新的属性,可以让被监听view随着指定该属性的子view做出反应,默认的常用值有@string/appbar_scrolling_view_behavior,大概意思就是指定了这个属性值的view并且这个view支持竖向和嵌套滑动时,appbar就可以自动的跟随view做滑动。可能说了这些还是不明白这个属性到底干什么用的,不过不要紧,那就先忽略这个属性吧,反正后面会用到,看到直观效果你就知道是干嘛用的了,别着急。

先看看CoordinatorLayout的简单用法,就是替代FrameLayout,还记得刚才FloatingActionButton的效果图吧?点击按钮Snakebar会挡住FloatingActionButton一半,而上边我们的xml布局里一直用的都是FrameLayout,现在改为CoordinateLayout我们看看效果吧。

android实现Materia Design风格APP(二):部分Materia Design风格的控件介绍一_第3张图片

xml代码:




    

java代码没有改动。

4.Toolbar

大家都很熟悉吧?actionBar的替代,之所以还要写是我之前没怎么用过,记笔记。

android实现Materia Design风格APP(二):部分Materia Design风格的控件介绍一_第4张图片

menu布局:




    
    
    

    

xml布局:




    
    

    

java代码:

public class Main2Activity extends AppCompatActivity {

    @BindView(R.id.fab)
    FloatingActionButton fab;//悬浮按钮
    @BindView(R.id.toolBar)
    Toolbar toolbar;//toolBar

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);

        //设置toolBar的title文字
        toolbar.setTitle("ActionBar");
        //将toolBar设置为actionBar
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        //显示返回按钮
        actionBar.setDisplayHomeAsUpEnabled(true);

        //设置悬浮按钮点击事件
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //构建带点击事件的Snakebar
                Snackbar.make(fab, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
                        .setAction("确定", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {

                                Snackbar.make(fab, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });
    }

    //设置toolBar上的menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }
}

 

你可能感兴趣的:(UI动画类,Design风格APP)