Android Design Support Library 常用控件

最新推荐文章于 2021-05-28 17:25:47 发布
最新推荐文章于 2021-05-28 17:25:47 发布
阅读量332 收藏
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changchou/article/details/53129549
版权

Floating Action Button - 浮动圆形按钮

在使用Android Design Support Library的时候需要在build.gradle里添加

compile 'com.android.support:design:24.2.1' 后面数字随版本而定

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"

    app:backgroundTint="#ff0000"
    app:fabSize="normal"
    app:elevation="5dp"
    app:rippleColor="#FF4081"
    />
<!--背景色-->
<!--背景与图标间隔-->
<!--按钮阴影-->
<!--按钮点击颜色变化效果-->

TextInputLayout - 让EditText提示人性化

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.TextInputLayout>
在activity中 

final TextInputLayout textInput = (TextInputLayout) findViewById(R.id.text_input);
textInput.setHint("请输入用户名");

EditText text = textInput.getEditText();
text.addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        if (s.length() > 10) {
            textInput.setError("用户名不能超过10位");
            textInput.setErrorEnabled(true);
        }else {
            textInput.setErrorEnabled(false);
        }
    }

    @Override
    public void afterTextChanged(Editable s) {

    }
});

当输入的字符超过10位则会：



Snackbar - 可交互提示框

final FloatingActionButton btn = (FloatingActionButton) findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        final Snackbar snackbar = Snackbar.make(btn, "你点击了按钮", Snackbar.LENGTH_LONG);
        snackbar.show();
        snackbar.setAction("我知道了", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                snackbar.dismiss();
            }
        });
    }
});
点击按钮弹出的Snackbar提示框出现在界面下方，除了和Toast一样的功能外，还能添加文字自行关闭该提示框。



TabLayout标签

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    app:tabBackground="@android:color/holo_green_light"
    app:tabIndicatorColor="@android:color/holo_orange_light"
    app:tabIndicatorHeight="5dp"

    app:tabSelectedTextColor="@android:color/holo_red_light"
    app:tabTextColor="@android:color/black" />
<!--tab背景颜色 直接用android：background也行-->
<!--tab下标颜色-->
<!--tab下标指示器高度-->
<!--app:tabMode="scrollable"-->
<!--tab标签可滑动-->
<!--tab被选中字体颜色-->
<!--tab字体颜色-->

tablayout一般与ViewPager、Fragment一起使用，具体方法可参见另一篇关于TabLayout的文章。


Navigation View - 侧滑视图

Navigation需要在DrawLayout中使用，可创建一个DrawLayout的xml文件或者将主Activity的xml的最外层设为DrawLayout：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/activity_main" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/head_view"
        app:menu="@menu/menu_main" />

</android.support.v4.widget.DrawerLayout>
此时，侧滑菜单基本已实现，效果如图：



CoordinatorLayout - Design Support 核心部件

普通layout的效果，如图:


此时Snackbar会遮住下面的view，使用CoordinatorLayout则不会：


但是CoordinatorLayout只支持Toobar，要显示Action只能自己加入Toobar，Toobar最好是放在AppBarLayout之中。

同时CoordinatorLayout中与ScrollView兼容性不是很好，一般使用NestedScrollView。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  必须加上，不然里面的内                                                                      容会在toobar下面
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:text="1111111111111"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"/>

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <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="10dp"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
效果如下：



Toobar可以加一个layout_scrollFlags属性

app:layout_scrollFlags="scroll|enterAlways"

往下拉时，toobar就会出来。


app:layout_scrollFlags="scroll|enterAlwaysCollapsed"

往下拉倒第一个，toobar才会出来。


app:layout_scrollFlags="scroll|exitUntilCollapsed"

这个需要和toobar中的android:minHeight="20dp"配合使用


toobar会留下最小高度


Toobar之外还可以再加上一层CollapsingToolbarLayout，做成伸缩效果：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
效果图：


同时CollapsingToolbarLayout也可以设置标题：

CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing);
collapsingToolbarLayout.setTitle("自定义标题");
效果：


CollapsingToolbarLayout的app:expandedTitleMarginStart="180dp"属性可设置文字的位置。


蓝色部分我们可以替换为一张图片，做成更丰富的效果。在CollapsingToolbarLayout里面，Toobar同级位置插入一个ImageView，并去掉Toobar的背景色。

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/pic"
        app:layout_collapseMode="parallax"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.CollapsingToolbarLayout>
效果图：


ImageView中有个属性app:layout_collapseParallaxMultiplier="0.5"其值为[0-1]，值为0，图片向上滑动，最后显示图片的最下面部分，0.5时，图片向上滑动后显示中间部分，1显示最顶端部分，且图片不会动，只是下面画上去。

如果希望最后显示出Toobar可设置CollapsingToolbarLayout的app:contentScrim="#3f51b2"


changchou
关注
专栏目录
android CoordinatorLayout使用
09-02 21万+
一、CoordinatorLayout有什么作用 CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能： 1、作为顶层布局 2、调度协调子布局 动画作为Material Design的重要元素，CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形似产生动画效果。CoordinatorLayout通
android design support library最新版,Android Design Support Library 兼容库使用详解
weixin_31301881的博客
05-26 529
1. 添加 Design Support Library 依赖在 Android Studio 中，通过在build.gradle(Module: app)中的dependencies中添加：compile 'com.android.support:design:23.1.0'(其中23.1.0为当前库版本号)2. 常规控件2.1 FloatingActionButton - 浮动的圆形按钮布局文...
Android Design Support Library常用控件（下）
true100的专栏
01-28 1305
在之前一篇文章Android Design Support Library常用控件（上）中介绍了几个常用的控件，如FloatingActionButton，SnackBar等。这篇文章再介绍另外几个常用的控件AppBarLayout，NavigationView，CoordinatorLayout及CollapsingToolbarLayout等等。 主要的几个控件都放在布局中，有简单的注释，更多
android design support library 大全,Android Design Support Library系列之三:TextInputLayout的使用...
weixin_35070578的博客
05-26 216
原标题：Android Design Support Library系列之三:TextInputLayout的使用EditText作为Android中最常用的组件之一，相信很多人对它都很熟悉，EditText有一个属性hint,能提示我们输入什么信息，当用户在EditText输入文字时，hint属性提示的文字就消失了。说到这，就要介绍今天的主角TextInputLayout了，使用TextInpu...
android support design library eclipse,Eclipse下使用Android Design Support Library中的控件
weixin_29111593的博客
05-28 123
我只测试了 Design效果的Login和Scrolling效果控件。最下面奉上2个demo。1、File\import导入sdk\extras\android\support\V7\appcompat后，右键项目Properties\Android\Is Library勾选。(报错的话把项目改到6.0sdk即可)2、同上，导入design包，勾选Is Library后，Add添加上面的v7包。(...
Android Design Support Library常用控件介绍（上）
true100的专栏
01-27 1564
Android Design Support Library给我们提供了一些既方便操作又非常实用还非常酷炫的控件。让我们来简单地体验下吧！先介绍下FloatingActionButton，Snackbar及TextInputLayout。 首先介绍下FloatingActionButton（浮动的圆形按钮）和Snackbar（:可交互的提示框）。 <?xml version="1.0" encodi
Android Design Support Library使用详解
热门推荐
eclipse_xu
06-04 10万+
Android Design Support Library使用详解Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。
android design support library最新版,总结一下现在关于Design Support Library的几个博客...
weixin_39735012的博客
05-26 61
关于Design Support Library，看似简单，其实不好掌握，一是因为它们都不是单独的控件，往往和主题以及周围的布局相关，偶合度有点高，二是因为这个兼容库有好些坑。因此我们只能在自己实践的同时，把各处文章的知识点结合起来，才能对Design Support Library有完整的认识。我知道目前有好几个博客都在对Design Support Library的几个控件分章节的讲解。先记录...
Android Design Support Library v28 控件使用demo
05-21
在Design Support Library v28中，这些控件都有所更新，以兼容最新的Android API级别，并优化了性能和用户体验。通过熟练掌握这些控件的用法，开发者可以轻松地构建出符合Material Design规范的现代Android应用。在...
2016最新eclipse版Android Design Support Library兼容库
03-18
Android Design Support Library是Google推出的一套用于帮助开发者在Android应用中实现Material Design设计风格的库。这个库在2016年的更新版本中，特别强调了对Eclipse开发环境的支持，使得开发者能够在Eclipse中...
Android Design Support Library
10-20
Android Design Support Library是Google推出的一套用于帮助开发者更容易地遵循Material Design设计规范的库。这个库包含了一系列组件和工具，让Android应用可以拥有与Google官方应用一致的视觉效果和交互体验，同时...
Design-Library-Sample:基于在 Google IO 2015 上推出的 android Design Support Library
06-01
Android Design Support Library是Google在2015年的Google I/O大会上发布的一个重要工具包，它为开发者提供了丰富的UI组件和设计模式，旨在帮助开发者轻松实现Material Design风格的应用。这个库的引入使得Android...
android design support
07-28
在Android开发领域，Design Support Library（设计支持库）是一个至关重要的工具，它为开发者提供了大量预构建的UI组件，使得应用程序能够遵循Material Design指南，从而提供一致且吸引人的用户体验。"android ...
Android Studio2.1之后虚拟机中文输入
changchou
09-16 2055
在Android studio2.1推出之后，程序自带了一个x86架构的虚拟机。和Genymotion一样这个框架的虚拟机比以前快了许多，但是该框架的虚拟机没有中文输入，也不能装入普通的中文输入法。 解决方法一：创建arm架构的虚拟机就可以装一般的输入法，但是这个架构虚拟机启动超级慢。 解决方法二：有大神编写了支持x86的输入法，网址如下：http://dl.pconline.com.cn/d
Android 屏幕常亮、低电量监听
changchou
11-21 1395
Android保持屏幕常亮只需在manifest文件注册权限并使用PowerManager进行管理： import android.os.PowerManager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class MainActivity extends App
Android 一键加速
changchou
11-22 1067
Android实现一键加速需要获取本机的ActivityManager.RunningAppProcessInfo，通过遍历这些RunningAppProcessInfo的importance并与API提供的特定等级比较，选出等级高的部分获取包名，即可关闭掉进程。代码如下： 首先要获取权限 package com.jikexueyuan.onekeyspeedup; import and
Android 简易指南针
changchou
11-22 915
通过Android的Sensor和动画效果，我们可以制作一个简单的指南针，不过测试和安装的手机必须要支持方向传感器。 布局xml如下： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
使用Android Design Support Library实现京东详情页Tab切换
我们将探讨Android Design Support Library中的TabLayout组件，以及如何结合其他支持库组件如Toolbar和ViewPager来构建这样一个功能丰富的界面。" 在Android开发中，为了实现美观且符合Material Design规范的界面，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值