Material Design学习之 Dialog(顺便把前两天AppBarLayout没讲的部分提一提)

转载请注明出处:王亟亟的大牛之路

继续之前的MD系列的内容,今天说Dialog,不知道还能翻几篇,反正这一系列都说完了话就找点别的内容整整。

Dialogs (提示框)用于提示用户作一些决定,或者是完成某个任务时需要的一些其它额外的信息。 Dialog可以是用一种 取消/确定 的简单应答模式,也可以是自定义布局的复杂模式,比如说一些文本设置或者是文本输入 。

官方的呈现,像这样

Dialog 包含了一个标题(可选),内容 ,事件。

标题:主要是用于简单描述下选择类型。它是可选的,要需要的时候赋值即可。

内容:主要是描述要作出一个什么样的决定 。

事件:主要是允许用户通过确认一个具体操作来继续下一步活动。

当然,dialog也和其他控件一样,有自身的尺寸标准和排列样式。

这里着重提一点 触摸提示框外面的区域可以关闭提示框,谷歌对事件的业务逻辑也进行了规范,从而“希望”提升各个手机厂商的统一性。

原文地址:http://www.google.com/design/spec/components/dialogs.html

理论的噼里啪啦不多说,大致了解下就行了,具体的尺寸分布还是需要走API好好读的,下面贴一下例子的效果。

例子想把2个部分要呈现给大家,1是 自定义的Dialog,另一个就是来回收缩的Bar,先说下Dialog部分

how to use ?

Grade:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.android.support:design:23.2.0'
    compile 'com.android.support:cardview-v7:23.2.0'
    compile 'com.mikepenz:iconics-core:2.5.5@aar'
    compile 'com.mikepenz:material-design-iconic-typeface:2.2.0.1@aar'
    compile('com.github.afollestad.material-dialogs:core:0.8.5.5@aar') { transitive = true }
}

然后记得在主Module的build配置加
allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

Eclipse的话。。。。。。。。。。。。

这个包的依赖比平时那些库确实多不少,但是com.android.support:cardviewcom.android.support:design什么的在别的地方也要用也就还好。

这部分的实现就不详细说了,但是是根据https://github.com/afollestad/material-dialogs改写的,这个库也很厉害,大家可以学习下 看下。

因为这是一个纯正的Diaolg,不是那些自定义控件也不需要放在XML里然后 隐藏掉了全部java代码实现,直接贴MainActivity

关键的设置步骤代码里已经写好了,一看就懂,还有几个没放进去的我再说下

.withIconAnimation(false)  //设置ICON出现时是否有动画
.setHeaderColor(R.color.dialog_header)  //设置Header颜色,例子设置的是图片
.setCancelable(false)  //设置外部点击是否消失
public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // 构建Dialog对象
        final MaterialStyledDialog dialogHeader_1 = new MaterialStyledDialog(MainActivity.this)
                //设置上方Header为图片
                .setHeaderDrawable(R.drawable.flash)
                //设置Header中间的Icon,也可不设
                .setIcon(new IconicsDrawable(MainActivity.this).icon(MaterialDesignIconic.Icon.gmi_github).color(Color.WHITE))
                //设置出现动画
                .withDialogAnimation(true)
                //设置Title
                .setTitle("我是Title!")
                //设置具体文字信息
                .setDescription("我是一段文字内容")
                //设置确认按钮并添加回调
                .setPositive("确定", new MaterialDialog.SingleButtonCallback() {
                    @Override
                    public void onClick(MaterialDialog dialog, DialogAction which) {
                        dialog.dismiss();
                    }
                })
                //设置取消按钮添加回调
                .setNegative("取消", new MaterialDialog.SingleButtonCallback() {
                    @Override
                    public void onClick(MaterialDialog dialog, DialogAction which) {
                        dialog.dismiss();
                    }
                })
                .build();

        CardView dialogHeaderView_1 = (CardView) findViewById(R.id.dialog_1);
        dialogHeaderView_1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialogHeader_1.show();
            }
        });

    }
}


再来提一下AppBarLayout

首先先说下如何实现效果

1.CoordinatorLayout包住AppBarLayout

2.顶部区域的View都放在AppBarLayout里面

3.在AppBarLayout里面的View,通过app:layout_scrollFlags属性来控制,滚动时候的表现

例子中是app:layout_scrollFlags="scroll|exitUntilCollapsed"

Scroll 表示向下滚动时,这个View会被滚出屏幕范围直到隐藏.
enterAlways 表示向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置.

4.在可以滚动的View上设置属性 app:layout_behavior.

例子中是这样那个的

  <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_main">
......

我们包裹CardView的父控件整体被设置为被拉伸部分,这个Behavior的class是真正控制滚动时候View的滚动行为

而上一个例子,我们是自定义了一个Behavior,(也就是我们之前RecyleView例子中被.from的操作)传送门http://blog.csdn.net/ddwhan0123/article/details/50825521

源码地址:https://github.com/ddwhan0123/BlogSample/blob/master/MaterialDesignDialog.zip

时间: 2024-11-08 17:27:28

Material Design学习之 Dialog(顺便把前两天AppBarLayout没讲的部分提一提)的相关文章

Material Design学习之 Sliders(详细分析,悬空气球显示进度值,附带Eclipse可以jar)

转载请注明出处:王亟亟的大牛之路 Material Design系列的文章这是第五篇,今天讲滑块控件(Sliders). 之前的传送门:http://blog.csdn.net/ddwhan0123/article/details/50578348(代码实现都靠画,学好View还是很重要的) 老规矩,先说下理论部分 滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值.区间最小值放在左边,对应的,最大值放在右边.滑块(Sliders)可以在滑动条的左

Material Design学习之 Bottom Sheets (顺便提提CoordinatorLayout)

转载请注明出处:王亟亟的大牛之路 昨天连续上了2篇介绍第三方库的文章,正直好久没提交自己写东西了,那么就补一篇之前MD系列漏的部分 Bottom Sheets Bottom Sheets–底部动作条 底部动作条(Bottom Sheets)是一个从屏幕底部边缘向上滑出的一个面板,使用这种方式向用户呈现一组功能.底部动作条呈现了简单.清晰.无需额外解释的一组操作. 在一个标准的列表样式的底部动作条(Bottom Sheets)中,每一个操作应该有一句描述和一个左对齐的 icon.如果需要的话,也可

Material Design学习之 Button(详细分析,传说中的水滴动画)

转载请注明出处:王亟亟的大牛之路       上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/50541561 这一片来具体学习下里面的内容,这篇分为两部分一部分是原理分析,一部分是代码分析. 先简要的介绍一些理论知识,顺便温顾下基础知识 按钮 按钮由文字和/或图标组成,文字及图标必须能让人轻易地和点击后展示的内容联系起来. 主要的按钮有三种: 悬浮响应按钮(Floating ac

Material Design学习之 Snackbars(详细分析,Toast的加强版)

转载请注明出处:王亟亟的大牛之路 昨天把Material Design Button部分的内容分析完了,不知道大家理解了他的实现没有.如果没看的话,可以看下,传送门:http://blog.csdn.net/ddwhan0123/article/details/50555958 这几篇关于Material Design文章的代码几乎都是Git上摘录的,我做的事主要是分享给大家+解释分析. 昨天有小伙伴看完后希望我像以前一样把按钮那一部分的代码单独提取出来单独打成一个包,想单独使用或者学习而不是去

Material Design学习之 Camera

转载请注明出处:王亟亟的大牛之路 年后第一篇,自从来了某司产量骤减,这里批评下自己,这一篇的素材来源于老牌Material Design控件写手afollestad的 https://github.com/afollestad/material-camera 开篇前,继续安利,你懂的:https://github.com/ddwhan0123/Useful-Open-Source-Android (最近把 6.0授权部分单独罗列出来了) 介绍代码之前先贴下效果图 如何使用 先是添加依赖让mave

Material Design学习之 CheckBox(详细分析,富有表现力)

转载请注明出处:王亟亟的大牛之路 这些天一直在讲Material Design控件的内容,今天继续,说说CheckBox(妈蛋,好冷),上一篇的传送门:http://blog.csdn.net/ddwhan0123/article/details/50560638 老规矩,两部分,第一部分理论知识,第二部分代码 选择控制器 选择控制器允许用户选择选项.有三种类型:复选框.单选框以及开/关切换.选择控制器使用主题同样的颜色.(待会的代码主要讲的是单选按钮) 复选框 单选按钮 切换开关 官方对呈现的

Material Design学习之 Switch(详细解释)

转载请注明出处:王亟亟的大牛之路 继续这一系列的Material Design之行,昨天讲的是Sliders链接如下:http://blog.csdn.net/ddwhan0123/article/details/50586510 今天讲的是Switch,本来有考虑把它和CheckBox一起做了,但是毕竟实现不同,还是分开做吧,废话不多,开始正题 开关 On/off 开关切换单一设置选择的状态.开关控制的选项以及它的状态,应该明确的展示出来并且与内部的标签相一致.开关应该单选按钮呈现相同的视觉特

Material Design学习之 EditText (功能强大,优于系统自带,感谢“扔物线”)

转载请注明出处:王亟亟的大牛之路 继续之前的Material Design历程,今天是EditText,素材来源于http://www.rengwuxian.com/post/materialedittext(那么代码解释部分大家可以看原作者的文档,我在这里把理论知识灌输下就OK了,作者做的很全面,我都不知道要讲什么了 只能6666666) 大牛的这个库已经有了广泛的认知度和认可,EditText部分就拿他的作为比较推崇的演示版本. 因为大牛已经做了Jar包的支持,所以平时的拆的工作都省了,要直

Material Design学习之 ProgreesBar

转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址如下:http://blog.csdn.net/ddwhan0123/article/details/50592579 进度和动态 在用户可以查看并与内容进行交互之前,尽可能地减少视觉上的变化,尽量使应用加载过程令人愉快.每次操作只能由一个活动指示器呈现,例如,对于刷新操作,你不能即用刷新条,又用动态圆圈来指示. 指示器类型 在操作中,对于完成部分可以确定的情况下,使用确