Android Design支持包控件介绍

最新推荐文章于 2021-06-03 05:10:54 发布

一杯清泉

最新推荐文章于 2021-06-03 05:10:54 发布

阅读量5.3k

点赞数 1

分类专栏： android 文章标签： Design CoordinatorLayout CollapsingToolbarLay CardView AppBarLayout

本文链接：https://blog.csdn.net/yoonerloop/article/details/71081255

版权

android 专栏收录该内容

83 篇文章 11 订阅

订阅专栏

Android5.0是有史以来最重要的安卓版本之一，这其中有很大部分要归功于material design的引入，这种新的设计语言让整个安卓的用户体验焕然一新。歌官方推出Material Design 设计理念已经有段时间了，为支持更方便的实现Material Design设计效果，官方给出了Android support design library 支持库，让开发者更容易的实现材料设计的效果。这篇文章将介绍常用的一下几种控件。

1、CoordinatorLayout

用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。继承自framlayout，是framlayout的扩展类，比他功能更加强大，能够支持很多绚丽的效果，一般作为父布局。

2、CollapsingToolbarLayout

用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠，伸缩的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View，主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。作为AppBarLayout的子布局进行配合使用。通常有两个子控件，一个是ImageView，一个是Toobar，Toobar主要是用来替换ActionBar的，所以在使用之前首先要隐藏掉。可以通过代码的方式隐藏，也可以通过配置文件的方式，还可以通过清单文件配置隐藏：

（1）在我们的styles.xml文件中的AppTheme标签中加入如下两行：

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

（2）在清单文件中加入

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

相关属性设置如下：

app:contentScrim="@android:color/holo_blue_dark";//titebar的背景颜色
app:title="赵丽颖";//titlebar所展示的字体
app:scrimAnimationDuration="50";//该属性控制toolbar收缩时，颜色变化的动画持续时间。即颜色变为contentScrim所指定的颜色进行的动画所需要的时间。
app:expandedTitleGravity="bottom|right";//titebar展开后字体显示的位置
app:collapsedTitleGravity="center_horizontal";//titlebar到最上边时候的显示位置
app:titleEnabled="true";//是否显示标题文本
app:expandedTitleMargin="20dp";//展开之后的文字margin
android:fitsSystemWindows="true";//预留空间，能够实现沉浸式状态栏效果
app:layout_collapseParallaxMultiplier="0.7";//设置视差的系数，介于0.0-1.0之间。越大视差越大

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar";//主题颜色
app:layout_scrollFlags="scroll|exitUntilCollapsed";//支持滑动收缩效果

子类可收缩的View:
app:layout_collapseMode="parallax";//View随着控件的滑动而收缩

Toolbar：
app:layout_collapseMode="pin";//pin收缩后固定于最顶端，parallax随着控件滑动收缩而收缩

3、AppBarLayout

AppBarLayout主要用来设置头布局，继承自linearlayout，他包含CollapsingToolbarLayout子布局和其他布局，CollapsingToolbarLayout能够实现视差伸缩滑动效果，其他子布局一般是导航栏，例如TabLayout。

4、TabLayout

TabLayout：类似于viewpagerindicator，radiobutton+viewpager，实现叶签滑动效果http://blog.csdn.net/yoonerloop/article/details/70766002点击打开链接

5、CardView

CardView是在安卓5.0提出的卡片式控件。

app:cardBackgroundColor="#6699FF";//设置选项卡的背景
app:cardCornerRadius="7dp";//设置选项卡的圆角大小
app:cardElevation="7dp";//设置选项卡的阴影背景大小
app:cardMaxElevation="10dp"//设置z轴的最大高度值
app:cardUseCompatPadding="true";//兼容android5.0以上版本两个卡片之间的距离失效问题
android:clickable="true";//点击产生水波纹效果
padding设置：
app:contentPadding 设置内容的padding
app:contentPaddingLeft 设置内容的左padding
app:contentPaddingTop 设置内容的上padding
app:contentPaddingRight 设置内容的右padding
app:contentPaddingBottom 设置内容的底padding

6、FloatingActionButton

android:layout_gravity="end|bottom";//在布局上的显示位置
app:borderWidth="0dp";//按钮内边框阴影带边框大小
app:backgroundTint="#f00";//按钮图片外围颜色
app:elevation="6dp";//按钮外边框阴影带的大小
app:pressedTranslationZ="52dp";//点击后阴影扩散的效果
app:rippleColor="#33728dff";//按钮边框阴影的颜色,默认取的是theme中的colorControlHighlight。
android:clickable="true";//点击产生水波纹效果

7、NestedScrollView

和ScrollView一样，区别是对新的控件做了一些兼容，类似于listview与recycleView。

8、NavigationView

NavitationView就是DrawerLayout侧边栏的那个菜单。这个菜单整体上分为两部分，上面一部分叫做HeaderLayout，下面的那些点击项都是menu。HeaderLayout是一个布局，根据需求设置，menu主要是每个item。

android:layout_gravity="left"属性表示该View是左边的滑出菜单。

app:headerLayout="@layout/header_layout";//表示引用一个头布局文件。

app:menu="@menu/main";//表示引用一个menu作为下面的点击项item。

app:itemIconTint="@color/blue";//标识为图片设置颜色，默认是灰色。

navigationView.setItemIconTintList(null); //设置图片颜色为图片显示的默认颜色

app:theme="@style/MenuTextStyle";//设置item字体大小，背景颜色等等主题

menu设置：

android:icon="@mipmap/ic_launcher";//设置item的左边图标

android:title="设置";//设置item右侧文字

默认没有分割线，如果需要分割线则需要在item外层嵌套一个<group android:id="@+id/g1"></group>，并加上id.

View headerView = navigationView.getHeaderView(0);//获取头布局的第一个控件

//设置item点击事件

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
//在这里处理item的点击事件
return true;
}
});

9、BottomNavigationView

BottomNavigationView是Google推出的底部导航栏组件,在没有这些底部导航组件之前,开发者多使用的是RadioGroup，他的用法和上面的NavitationView比较类似，看看他的属性：

app:itemIconTint是设置底部导航按钮图标颜色的属性

app:itemTextColor是设置底部导航按钮文字颜色的属性

xml中的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.administrator.glidedemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:itemIconTint="@drawable/tab_text_color_selector"
        app:itemTextColor="@drawable/tab_text_color_selector"
        app:menu="@menu/navigation">
    </android.support.design.widget.BottomNavigationView>
</LinearLayout>

menu文件夹和上面的也很类似：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/tab_one"
        android:icon="@drawable/tab_text_color_selector"
        android:title="综合"/>

    <item
        android:id="@+id/tab_two"
        android:icon="@drawable/tab_text_color_selector"
        android:title="本地"/>

    <item
        android:id="@+id/tab_three"
        android:icon="@drawable/tab_text_color_selector"
        android:title="我的"/>
</menu>

在Activity中点击事件的切换的监听如下：

 mNavigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        mTextView.setText(item.getTitle().toString().toUpperCase());
                        return true;
                    }
                });
    }

注意：这控件有以下坑：

1、底部导航栏高度默认是 56dp。
2、菜单元素只能是 3~5 个。如果个数少于3个或者多于5个，则会报错。
3、菜单元素如果大于3个，会出现切换时选中菜单的放大效果，无法设置，只能通过反射取消。

4、底部导航栏背景颜色默认是当前样式的背景色（白色/黑色），你可以使用 app:itemBackground="@android:color/black" 来更改。

10、TextInputLayout

它是一种新的继承自LinearLayout的布局,让我们使用时里面只能包含一个EditText或者其子类的控件,该布局可以通过设置hint和Error显示浮动标签。如下：

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="呵呵哒"
            android:inputType="phone"/>
    </android.support.design.widget.TextInputLayout>

android:hint="呵呵哒";//浮动的标签设置，可以设置在EditText上面，也可以用设置在TextIn；putLayout上面，但是只能设置一个；

app:hintEnable="false"；//关闭浮动标签(默认是开启的)

app:hintAnimationEnabled="boolean";//设置浮动标签显示与隐藏之间的过渡动画(默认是开启的)

app:counterEnabled="true";

app:counterMaxLength="11";//两个结合可以让用户看到自己当前输入的长度，当超过指定长度会提示

app:passwordToggleEnabled="true" //设置密码可见与否的图标，默认是关闭的

app:passwordToggleDrawable="@mipmap/ic_launcher"；//设置指定密码可见与否的图标

app:passwordToggleTint="@color/colorAccent"；//给图标加颜色

app:hintTextAppearance="@style/hint"；//自定义浮动标签颜色大小等

app:errorTextAppearance="@style/error"；//自定义错误标签颜色大小等

以上均在TextInputLayout标签下面添加，而不是EditText

监听虚拟键盘，输入法下一项，光标定位到密码输入框：

用户名EditText中加入：

android:imeActionId="@+id/password"

android:imeOptions="actionNext"

密码EditText中加入：

android:imeActionId="@+id/button"

android:imeOptions="actionDone"

监听：

mPasswordEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {
if ( id == EditorInfo.IME_ACTION_DONE) {
startLogin();
return true;
}
return false;
}
});

以上就是material design包中常用的控件，以后还会陆续补充，关于这些新控件的应用见下一篇博文：点击打开链接

http://blog.csdn.net/yoonerloop/article/details/71411499

一杯清泉

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android Design支持包控件介绍

安卓5.0是是有有史以来最重要的安卓版本之一，这其中有很大部分要归功于material design的引入，这种新的设计语言让整个安卓的用户体验焕然一新。歌官方推出Material Design 设计理念已经有段时间了，为支持更方便的实现Material Design设计效果，官方给出了Android support design library 支持库，让开发者更容易的实现材料设计的效果。这篇文
复制链接

扫一扫