Material Design八个强大功能的控件

最新推荐文章于 2021-02-08 14:39:46 发布
最新推荐文章于 2021-02-08 14:39:46 发布
阅读量386 收藏 2
点赞数
分类专栏： Android

概述：

这是google今年推出的兼容库。

步骤：

、环境

studio: 
1.安装studio，并更新到最新版本的库（22.2版本以上） 
这里写图片描述 
2.在gradle中，添加库

compile 'com.android.support:design:22.2.0'
 
 
  • 1

或者在depence中直接添加support库 
eclipse: 
1.import库 
位置：sdk>extras>android>support>design 
记得copy 到工程的选项打钩。 
clean，打钩design 
2.如果报错，将此项目的sdk版本修改到5.1 
将其作为library使用。只要在新建的项目中使用这个库即可。

控件一：Floating Action Button-浮动的圆形按钮

布局中设置

1.添加<android.support.design.widget.FloatingActionButton/> 
，注：可以像图片那样设置src，放一张图片在表面 
2.需要在布局中添加app的声明： 
最外层布局中：

xmlns:app="http://schemas.android.com/apk/res-auto"
 
 
  • 1

这样之后就可以直接用app来设置基本属性。 
2.Floating Action Button的基本属性：

  • app：backgroundTint=”” //设置背景色
  • app:fabSize=”“值有normal【包裹与内部图片还有一段距离】和mini【包裹直接紧贴裹在图片】
  • app:elevation=”5dp”//周围的阴影
  • app:rippleColor=”“//设置点击时的颜色

也可以在代码中来设置上面的属性。不再详细介绍

控件二：TextInputLayout-让edittext提示更加人性化

1.布局：

<android.support.design.widget.TextInputLayout>
 
 
  • 1

2.TextInputLayout中必须要放个EditText 
3.代码中可以设置hint 
setHint（）； 
4.可以获得其中的edittext【getEditText()】，并可以对它添加事件editText.addTextChangedListener()

范例：

package com.example.mydesigntest;

import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.EditText;

public class TextInputLayoutTest extends AppCompatActivity {
    private TextInputLayout textInputLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_input_layout_test);
        textInputLayout = (TextInputLayout) findViewById(R.id.textInput);
        textInputLayout.setHint("请输入用户名");//设置hint
        EditText editText = textInputLayout.getEditText();//获得其中的edittext控件
        editText.addTextChangedListener(new TextWatcher() {//对edittext添加监听
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                if(charSequence.length()>10){
                    textInputLayout.setError("用户名超过了10个字符");//利用textInputLayout的显示错误信息
                    textInputLayout.setErrorEnabled(true);
                }else {
                    textInputLayout.setErrorEnabled(false);//位数减少时则错误信息消失
                }

            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

    }


}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mydesigntest.TextInputLayoutTest">

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

</LinearLayout>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

效果演示：

控件三：Snackbar-可交互的提示框

功能：点击某按钮，使其出现snackbar，一段时间会自动消失，或者添加action，点击后使其消失。 
范例：这里使用上面的floatingactionbar点击，使其出现snackbar

public class FloatingAction extends AppCompatActivity {
    private FloatingActionButton floatingActionButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_floating_action);
        floatingActionButton = (FloatingActionButton) findViewById(R.id.floating_button);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {//对floating添加点击事件
            @Override
            public void onClick(View view) {//弹出Snackbar
                final Snackbar snackbar = Snackbar.make(floatingActionButton,"你点击了按钮",Snackbar.LENGTH_LONG);
                snackbar.show();
                snackbar.setAction("知道了", new View.OnClickListener() {//对snackbar添加点击事件
                    @Override
                    public void onClick(View view) {
                        snackbar.dismiss();//点击后消失
                    }
                });

            }
        });
    }

}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

控件四：TabLayout-便捷实现标签

1.布局中

<android.support.design.widget.TabLayout>
 
 
  • 1

2.布局中可以设置个属性 
仍需要

xmlns:app="http://schemas.android.com/apk/res-auto"
 
 
  • 1

设置： 
app:tabTextColor = “”//未选中的字体颜色 
app:tabSelectedTextColor = “”//选中时的字体颜色 
app:tabIndicatorColor = “”//滑块颜色 
app:tabIndicatorHeight=”“//高度 
background=”“//背景色 
tabMode=”scrollable” //可以滑动

范例：需要fragment，adapter，tab共同实现 
布局：

 <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@android:color/black"
                app:tabMode="scrollable"

        app:tabSelectedTextColor="@android:color/holo_red_light"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabIndicatorHeight="5dp"
        android:background="@android:color/holo_green_light"

        >
         <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

代码： 
主活动：

package com.example.mydesigntest;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;
import java.util.List;

public class TabLayoutTest extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout_test);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);


        //使用fragment
        List<String> titles = new ArrayList<>();//用于放tab名称
        List<Fragment> fragments = new ArrayList<>();//用于放各个fragment
        for(int i = 0;i<4;i++){//向上面的list中添加数据
            String title = "Tab"+(i+1);
            tabLayout.addTab(tabLayout.newTab().setText(title));//向tabLayout中添加tab,并添加到list集合中
            titles.add(title);
            Fragment fragment = new TabFragment(title);
            fragments.add(fragment);

        }
        TabAdapter  adapter = new TabAdapter(getSupportFragmentManager(),titles,fragments);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);//设置tab随viewpager滑动
        tabLayout.setTabsFromPagerAdapter(adapter);//传递适配器




    }


}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

fragment：

package com.example.mydesigntest;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by 董梦娇 on 2015/11/8.
 */
public class TabFragment extends Fragment {//将fragment中的textview设置成对应的title
    String title;
    public TabFragment(String title){
        this.title = title;

    }
    public TabFragment(){

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.layout_tab_fragment,null);
        TextView textView = (TextView) view.findViewById(R.id.text_title);
        textView.setText(title);
        return view;
    }
}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

adapter：

public class TabAdapter extends FragmentStatePagerAdapter {
    List<String> titles;
    List<Fragment> fragments;
    public TabAdapter(FragmentManager fm,List<String> titles,List<Fragment> fragments) {
        super(fm);
        this.titles = titles;
        this.fragments=fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
    //需要重写一个方法

    @Override
    public CharSequence getPageTitle(int position) {//需要返回title
        return titles.get(position);
    }
}
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

fragment布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
<TextView
    android:id="@+id/text_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"/>
</LinearLayout>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

控件五：Navigation View - 美观的侧滑视图

1.可以设置侧滑栏的头部。 
app:headerLayout=”@layout/head_view” 
2.代码中可以设置侧边栏的显示与隐藏 
drawlayout.openDrawer(); 
drawlayout.closeDrawer(); 
3.范例： 
布局

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mydesigntest.NavigationTest">
<include layout="@layout/activity_main"/>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/head_view"
        app:menu="@menu/menu_main"
        ></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

头部布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"/>

</LinearLayout>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

控件六：具有过渡动画效果的布局Layout

CoordinatorLayout - 完美协调子View工作的核心部件

AppBarLayout

CollapsingToolbarLayout

范例中： 
弹出snakbar时，flotingactionbar也向上了，不被挡住.

延伸：toolbar使用v7包中的。 
使用： 
setSupportActionBar(toolbar);//设置上toolbar

toolbar布局

<android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#77db93"
        app:popupTheme="@style/Theme.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        ></android.support.v7.widget.Toolbar>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

style中：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

问题及解决： 
CoordinatorLayout中需要使用一个scrollview进行滑动，而由于CoordinatorLayout对scrollview的支持并不好，这里采用v4包下的NestedScrollView。 
1.添加app:layout_behavior=”@string/appbar_scrolling_view_behavior” 
2.在toolbar外层再裹上design中的AppBarLayout布局。 
经过上面两个步骤后，toolbar就可以在最上层，且里面可以进行滑动。 
这是可以给toolbar添加其他的属性了，例如：

app:layout_scrollFlags="scroll|enterAlways"
 
 
  • 1

当向上推到一定程度，toolbar隐藏，上拉到一定程度，toolbar出现。

对ayout_scrollFlags中几个值的介绍： 
scroll：一般都带上，表示可以跟随NestedScrollView的滑动一块滑动。 
enterAlways：表示只要一上拉，就出现。 
enterAlwaysCollapsed:只有上拉到第一个，toolbar才又出现。 
exitUntilCollapsed:需要与android:minHeight属性一起出现，会跟随滑动，而toolbar到最小高度时就不再滑动。

再延伸：使用CollapsingToolbarLayout 
这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

总体效果演示： 
这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

所有示例源代码：


原文http://blog.csdn.net/womengmengyan/article/details/49717963

YancyChang
关注
专栏目录
Android Design Support Library 八个强大功能的控件
womengmengyan的博客
11-08 3599
概述：这是google今年推出的兼容库。步骤：、环境studio: 1.安装studio，并更新到最新版本的库（22.2版本以上） 2.在gradle中，添加库compile 'com.android.support:design:22.2.0'或者在depence中直接添加support库 eclipse: 1.import库 位置：sdk>extras>android>suppor
Material Design的一些控件
wecson的博客
03-18 630
- Toolbar: 标题栏控件，类似于 ActionBar 。 使用的话得先把主题设置为 NoActionBar 。 在主题的代码里面 colorPrimary：表示标题栏的颜色；colorPrimaryVariant：标题栏里面的字的颜色；colorOnPrimary：状态栏的颜色。也就是下面这段，当然还有其他的，我也不知道了。 之后在 MainActivity 里面使用 *setSupportActionBar( toolbar )*将Toolbar的实例传入。 在标题栏显示的文字可以在 Andro
Material Design控件总结
smileiam的专栏
03-21 1257
1. Toolbar知识点1：Toolbar和ActionBar的区别？Toolbar与ActionBar类似，但ActionBar只能仅位于活动的顶部，而且也不能实现Material Design效果，使用不灵活。一般在开发时都会在app的theme里设置不显示ActionBar,如下： <style name="AppTheme" parent="Theme.AppCompat.Light
Material Design控件使用(二)
nkdwslsd的专栏
11-14 382
本篇将介绍剩下的控件 FloatingActionButtonTabLayoutSnackbarTextInputLayout FloatingActionButton 作为MD风格最具争议的控件,本篇将先学习他的简单使用,然后再从日常app中FAB常见的两种样式入手进行介绍 FloatingActionButton是重写ImageView的，所以FloatingA
Android Design 控件的使用
09-16
博客地址：http://blog.csdn.net/u011051627/article/details/48246205 环境是基于androidstudio的。然后具体介绍可以看博客，都是android Design各个控件的使用。
WPF + prism + MaterialDesign 利用ItemControl 动态添加控件的实现
07-01
通过选中CheckBox， 实现新增多个控件的实现，例子做为新手学习是很好的，带完整注释 出自 轻吟浅唱，蓦然花开 大神。 https://www.cnblogs.com/nickyangmiracle/p/16169338.html 欢迎大家前去学习
学习使用Material Design控件（一）
08-29
学习使用Material Design控件（一） Material Design是一种由Google推出的设计语言，旨在为Android应用程序提供统一的视觉风格和交互式体验。Material Design控件是Google为Android应用程序提供的一些控件，旨在...
Material Design设计控件
12-01
在这个"MaterialDesignDemo"中，你可能会找到各种常见的Material Design控件，例如： 1. **Button**：按钮是用户界面中最基本的元素，Material Design提供了扁平化、浮起、图标按钮等多种样式，支持自定义颜色、...
MaterialDesign主要的几个控件
09-19
在一个画面上实现下列控件的加载。 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout、NestedScrollView、RecyclerView、FloatingActionButton
Material Design控件的使用
10-19
同步后，就可以在布局文件中引入Material Design控件，例如创建一个浮起的按钮： ```xml <com.google.android.material.button.MaterialButton android:layout_width="wrap_content" android:layout_height="wrap...
Material Design的控件使用
12-14
简单的Material Design设计的基本 安卓5.0新组件的使用。
android design
09-06
android design android设计模式 保包常用设计模式 template 觀察者模式 責任鏈模式 工廠模式 單利模式 適配器模式等等23种模式
MaterialDesignDemo:MaterialDesign控件的简单使用
05-11
MaterialDesignDemo:MaterialDesign控件的简单使用
12个Material Design风格控件的使用
热门推荐
小小码农
05-20 4万+
项目在GitHub上的地址：https://github.com/Hebin320/MaterialDesignUseCSDN上的下载地址http://download.csdn.net/detail/hebin320320/96582151、AppBarLayout、ToolBarAppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material
Material Design的一些常用控件
lans1996的博客
04-05 916
废话不多说直接先贴代码package com.example.lsn2_materialdesign_theme_style; import android.content.DialogInterface; import android.graphics.Color; import android.support.v4.widget.SwipeRefreshLayout; import andr...
Material Design 常用控件总结
滥觞
12-01 417
Material Design 相关的控件有很多，这里先就常用的一些控件做简要的介绍，待日后再对每一个控件进行详尽地学习。 由于控件数量繁多，不便于记忆，因此在这里就以控件的独立性为标准，简单地将其分为两类，分别是独立控件和协作控件。所谓的独立控件，就是一些功能上比较独立，不需要和其他控件协作的控件；所谓的协作控件，就是一些功能上需要和其他控件配合使用的控件。具体思维导图如下： 以下是对各个控件的简介，包括所在的包及其具体功能。 常用控件独立控件SnackbarToolbarFloatingActionBu
Material Design（二）（控件）
weixin_41729259的博客
07-03 745
Material Design （控件） 引入包： compile ‘com.android.support:appcompat-v7:25.3.1’ compile ‘com.android.support:design:25.3.1’ Material Design（一）：material Design 的 主题以及取色板的使用 https://blog.csdn.net/weixin_41...
Android Design库控件使用
timshinlee的博客
07-24 508
CoordinatorLayoutCoordinatorLayout的子控件可以声明app:layout_behavior=""指定行为AppBarLayoutAppBarLayout是一种LinearLayout，AppBarLayout的直接子控件可以声明app:layout_scrollFlags属性，来指定与可滑动控件之间的交互行为。layout_scrollFlags接受以下几种标志： s
Material Design控件使用
qq_30621333的博客
02-08 565
什么是Material Design Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计 语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 Tip: 在Android5.0最引人注意的就是MaterialDesign设计风格 Material Design：谷歌拿出媲美苹 果的设计 过去Google的产品线，每一个都相当的独立，在产品的设计上反映得尤为明显，甚至不 必看产品设计，只要看一下Google每款产品的L
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值