Android Material Design悬浮按钮和可交互提示
来源:互联网 发布:临床药物查询软件 编辑:程序博客网 时间:2024/06/14 06:26
博客内容:悬浮按钮FloatingActionButton、交互控件Snackbar和CoordinatorLayout。
悬浮按钮FloatingActionButton:
Android Material Design这么叼,肯定会有立体设计咯!在官方的给出的示例中,最简单且最具代表性的立体设计非悬浮按钮莫属,这种按钮不属于主界面平面的一部分,而是位于另外一个维度,因此给人一种悬浮的错觉。
这种错觉当属FloatingActionButton来实现,它是由Design Support库提供的控件。话到这份上,你懂的,使用FloatingActionButton需要添加Design Support库。Design Support默认情况下会使用来作为按钮的颜色,而我们还可以通过给按钮指定一个图标来表明这个按钮干什么用的。
看例子咯!
第一步添加Design Support库:build.gradle/Module:app
compile 'com.android.support:design:23.4.0'
第二步:布局
<?xml version="1.0" encoding="utf-8"?><LinearLayout 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.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" app:elevation="8dp" android:src="@drawable/language"/></LinearLayout>
布局中 bottom|end是什么意思呢?layout_gravity这个属性指定将这个控件放置到左下角,其中end的工作原理和start是一样的。elevation="8dp"是指定悬浮按钮的高度值。
第三步:Java代码----FloatingActionButton点击事件
public class MainActivity extends AppCompatActivity { private FloatingActionButton fab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); fab=(FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "FloatingActionButton点击事件", Toast.LENGTH_SHORT).show(); } }); }}
运行效果图:
交互控件Snackbar和CoordinatorLayout:
相信大家平常都是使用Toast作为提示工具使用,其实呀!还有比Toast更加先进的提示工具,那就是Snackbar。不要误会,Snackbar不是来替换Toast的,他们之间有着不同的应用场景。简单的说Toast提示的是用户没有办法在进行二次选择的事情或提示用户某件事件正在发生,而Snackbar在提示当中加入一个可交互按钮,就是后悔药的形式,再一次确定你是不是要进行某个操作。而且SnackBar允许用户向右滑动消除它,
同为提示工具,SnackBar和Toast用法很相似。Snackbar的构造:
//参数分别是View(只要是当前界面布局的任意一View个都可以),提示信息,持续时间public static Snackbar make(View view,CharSequence text,int duration)SnackBar的常用方法:
//用于设定Action的字体颜色public Snackbar setActionTextColor( int color)
//设定提示的字体public Snackbar setText( CharSequence message)
//设置回调,比如OnDismissed或者OnShownpublic Snackbar setCallback(Callback callback)
//调用SnackBarpublic void show()
//清除SnackBarpublic void dismiss()不是说Snackbar有加入交互按钮(Action)的吗,怎么加入呢?
Snackbar.make(view,"Snackbar", Snackbar.LENGTH_LONG) .setAction("这是action", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "你点击了action",Toast.LENGTH_SHORT).show(); } }).show();
看个例子:在FloatingActionButton例子的基础上改进:
布局:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="wrap_content"> </WebView> <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" app:elevation="8dp" android:src="@drawable/language"/> </android.support.design.widget.CoordinatorLayout></LinearLayout>
细心的朋友会发现主布局多了个CoordinatorLayout,没错,这样写,就是让Snackbar弹出来的时候不要覆盖FloatingActionButton,看下面效果图,你会看到FloatingActionButton被挤上去了,形成动态效果,是不是很棒,要的就是这个效果。至于FloatingActionButton,简单介绍一下,CoordinatorLayout可以说是FrameLayout的加强版(升级了的意思),话说CoordinatorLayout也是由Design Support库提供的,优点是CoordinatorLayout可以监听所有子控件的各种事件。
Java核心代码:
public class MainActivity extends AppCompatActivity { private FloatingActionButton fab; private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView=(WebView) findViewById(R.id.web_view); fab=(FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view,"是否要使用百度", Snackbar.LENGTH_SHORT) .setAction("Yes", new View.OnClickListener() { @Override public void onClick(View v) { webView.getSettings() .setJavaScriptEnabled(true); webView.setWebViewClient( new WebViewClient()); webView.loadUrl("http://www.baidu.com"); } }).show(); } }); }}运行效果图:
本博客用到WebView控件,Android网络技术之WebView点击它即可深入了解。
- Android Material Design悬浮按钮和可交互提示
- Material Design之悬浮按钮和可交互提示
- 悬浮按钮和可交互提示
- Android 悬浮按钮 FloatingActionButton 和交互提示 SnackBar
- Android读书笔记(九)滑动菜单DrawerLayout、悬浮按钮、可交互提示
- android WindowManager可拖动悬浮按钮
- Android 可拖动的悬浮按钮
- Material风格的悬浮按钮
- Material Design学习之悬浮按钮——FloatingActionBar(3)
- Android Study Material Design 十三 之CoordinatorLayout交互动画
- android界面设计语言Material Design---可折叠式标题栏
- Android:Material Design(五) 视图和阴影
- Android Material Design:ViewPager与android.support.design.widget.TabLayout双向交互联动切换
- Android实现滑动悬浮置顶(一)采用Material Design新控件实现
- Android Material Design尝鲜
- Android Material Design
- Android Material Design Dialog
- Android:Material Design详解
- Android Hybrid混合开发(Webview+JSBridge)简介
- 51nod1182
- test1
- arm驱动加载
- C++ 11 之初始化
- Android Material Design悬浮按钮和可交互提示
- Material Design 入门(一)——TextInputLayout和TextInputEditText
- c++:关于迭代器的一些认识
- JS 中对变量类型的判断
- 嵌套的盒子
- MapReduce之自定义Key和Value
- Java 8新特性 Stream API 编程
- linux-使用apt-get安装软件问题汇总
- kubernetes集群问题排查