Android Design Support Library 中控件的使用简单介绍（一）

zoukankan html css js c++ java

Android Design Support Library 中控件的使用简单介绍（一）
Android Design Support Library 中控件的使用简单介绍（一）

介绍

在这个 Lib 中主要包含了 8 个新的 material design 组件！最低支持 Android 2.1 。这些组件在我看来就是对 Github中最近比较火的 android 组件进行了封装！！

下载

要使用这个库，当然得先下载啦！（没有翻墙的同学肯定已经哭晕在厕所了！！）这里我给童鞋们，提供一个简单的方法：
就是使用红杏提供的公益代理！具体使用方法如下图：

之后就是使用 Android SDK Manager 更新下载了！！

使用

第一步--引用

引用这个库：在build.gradle文件中加上这段代码：compile 'com.android.support:design:22.2.0

第二步--具体控件的使用

TextInputLayout

以前当我们使用 EditText 这个组件的 hint 属性的时候，当用户输入第一个字母之后，这个 hint 中的文本就会消失！有点影响用户体验！但是现在不一样了！现在只要把 EditText 包含在 TextInputLayout 中，这个 hint 中的文本就会变成 floating lable 浮动在 EditText 上方！同时，也支持在 EditText 下方显示错误信息好了，我么先来看一下 TextInputLayout 这个控件的公共方法吧！

想必大家也能看明白 (我在有的函数解释下)
- getEditText() 得到控件中包含的 EditText 控件
- setError(CharSequence error) 设置错误信息并显示在 EditText 下方应用场景：比如用户输错了密码或者用户名等
- setHint(CharSequence hint) 设置提示信息
- setErrorEnabled(boolean enabled) 设置 setError(CharSequence error) 这个函数是否可用记住哦：这个函数一定要在 setError(CharSequence error) 这个函数之后执行哦！具体原因大家可以去看源码哦！
现在我们先在布局文件中布局：
```
 <android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/textinput">
    <EditText
        android:layout_marginTop="4dp"
        android:layout_width="match_parent"
        android:layout_height="48dp"/>
</android.support.design.widget.TextInputLayout>   
```
很简单就是一个嵌套！我们接下来 onCreate(Bundle savedInstanceState) 方法中的代码：
```
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    textinput = (TextInputLayout) findViewById(R.id.textinput);
    et_content = textinput.getEditText();
    textinput.setHint("请输入用户名");
    textinput.setError("密码输入错啦！");
    textinput.setErrorEnabled(true);//当设置成false的时候 错误信息不显示 反之显示
}
```
代码很简单不细说！大家直接看效果图：

FloatingActionButton

由于这个控件相对简单！我就直接在上面的那个布局中增加这个按钮，并把它显示在右边！
```
 <android.support.design.widget.FloatingActionButton
    android:id="@+id/button"
    android:layout_width="48dp"
    android:layout_gravity="right"
    android:layout_height="48dp"
    android:orientation="vertical" />
```
接着我们在看代码区域：
```
button.setRippleColor(Color.GRAY);//设置按下去的波纹颜色
button.setBackgroundDrawable(getResources().getDrawable(android.R.drawable.ic_menu_add));//背景色
```
不解释了简单！

Snackbar

和 Toast 类似。但是它有简单的可选择的单个的Action。同时还有个特性就是用户可以在它消失时间未到的时候，移掉它！
现在来介绍下 Snackbar 的一些函数
- dismiss() 用来消失 Snackbar 的
- getDuration() 得到显示时长的
- make(View view, int resId, int duration) 创建 Snackbar 的
- make(View view, CharSequence text, int duration) 和上面一样
- setAction(int resId, View.OnClickListener listener) 对 Snackbar 设置单击时间，这里的单击时间不是作用于整个 Snackbar 的，还是作用于你所设置的这个字段的，也就是这个 resId
- setAction(CharSequence text, View.OnClickListener listener) 和上面一样
- setActionTextColor(ColorStateList colors) 设置动作字的颜色，就是对上面的setAction 中文字颜色的设置
- setActionTextColor(int color) 和上面一样
- setDuration(int duration) 设置 Snackbar 显示时常
- setText(int resId) 更新 Snackbar 中的文本
- setText(CharSequence message) 和上面一样
- show() 显示 Snackbar
函数已经介绍完了！现在，我会FloatingActionButton增加一个单击事件用来显示 Snackbar 。直接看代码：
```
 button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Snackbar
                    .make(content, "你好啊", Snackbar.LENGTH_LONG)
                    .setAction("delete", new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "delete", Toast.LENGTH_SHORT).show();
                        }
                    })
                    .show();
        }
    });
```
直接看效果吧！

Tabs

选项卡，一般和 TabLayout 一起使用哦。现在我们来看一下 TabLayout 的一些函数。
- addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
- addTab(TabLayout.Tab tab, boolean setSelected) 同上
- addTab(TabLayout.Tab tab) 同上
- getTabAt(int index) 得到选项卡
- getTabCount() 得到选项卡的总个数
- getTabGravity() 得到 tab 的 Gravity
- getTabMode() 得到 tab 的模式
- getTabTextColors() 得到 tab 中文本的颜色
- newTab() 新建个 tab
- removeAllTabs() 移除所有的 tab
- removeTab(TabLayout.Tab tab) 移除指定的 tab
- removeTabAt(int position) 移除指定位置的 tab
- setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器
- setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
- setTabGravity(int gravity) 设置 Gravity
- setTabMode(int mode) 设置 Mode
- setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
- setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色默认选中
- setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
- setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动
函数介绍完了，现在来看代码吧！
布局代码：
```
  <android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:background="#1FBCD2"
    android:layout_height="48dp" />
```
再来看一下 onCreate(Bundle savedInstanceState) 中的方法吧
```
 @Override
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab);
    tabLayout= (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色
    tabLayout.addTab(tabLayout.newTab().setText("第一个"), true);//添加 Tab,默认选中
    tabLayout.addTab(tabLayout.newTab().setText("第二个"),false);//添加 Tab,默认不选中
    tabLayout.addTab(tabLayout.newTab().setText("第三个"),false);//添加 Tab,默认不选中
}
```
来看一下效果吧

现在我们来把 TabLayout 和 ViewPager 连起来用
先看布局文件我们在上面的基础上加了个ViewPager
```
<android.support.design.widget.TabLayout
    android:id="@+id/tablayout"
    android:layout_width="match_parent"
    android:background="#1FBCD2"
    android:layout_height="48dp" />

<android.support.v4.view.ViewPager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
```
再来看一下 onCreate(Bundle savedInstanceState) 中的方法吧
```
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab);
    tvs = new ArrayList<TextView>();
    for (int i = 0; i < items.length; i++) {
        TextView tv = new TextView(this);
        tv.setText(items[i]);
        LinearLayout.LayoutParams lp =
                new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        tv.setTextColor(Color.BLACK);
        tv.setBackgroundColor(Color.WHITE);
        tv.setGravity(Gravity.CENTER);
        tv.setLayoutParams(lp);
        tv.setTextSize(22);
        tvs.add(tv);
    }
    tabLayout = (TabLayout) findViewById(R.id.tablayout);
    tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色
    vp = (ViewPager) findViewById(R.id.vp);
    adapter = new Adapter();
    vp.setAdapter(adapter);
    
    //用来设置tab的，同时也要覆写  PagerAdapter 的 CharSequence getPageTitle(int position) 方法，要不然 Tab 没有 title
    tabLayout.setupWithViewPager(vp);
    //关联 TabLayout viewpager
    tabLayout.setTabsFromPagerAdapter(adapter);
}
```
看效果图：

Navigation View

大家都记得 DrawerLayout 这个控件吧！它是 android 用来体态 SlideMenu 的一个组件！在这个控件中我们通常需要一个 menu（也是个布局文件）和一个主体布局文件。现在这个 Navigation View 就是用来写 menu的！
这个控件我就不一一写函数了！我们还是直接使用吧！直接看布局文件
```
<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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="哈哈"
            android:gravity="center"
            android:textSize="30sp"
            android:textColor="@android:color/background_dark"/>
    </FrameLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/header"
        app:menu="@menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>
```
我们直接看 NavigationView ，会发现我使用了两个新的属性 app:headerLayout 和 app:menu 这是因为这个组件把menu分为两部分，一个是头部还有一个是 menu。现在我们只需要写个新的头部和一个 menu就行啦！！这个组件我就不上图了！主要是我认为没啥意思这个组件！

剩下的组件

现在还剩下 CoordinatorLayout , CollapsingToolbarLayout 和 AppBarLayout 这三个组件！由于我对这个三个组件还没有仔细研究，在这篇博文中就不说了！下篇博文再讲！！
- CoordinatorLayout 是一个超级 FrameLayout
- CollapsingToolbarLayout 类似这张图
- AppBarLayout 全新，用来实现各种 Material Design 概念效果的一个 Layout，主要负责对滑动的响应
以上三个组件的来自代码家的这篇博文 Google I/O 2015 为 Android 开发者带来了哪些福利？的解释！

结束语

不知道大家有没有好的 unity3d 学习方面的资料求介绍啊！！！！！！
查看全文

相关阅读:
闲置安卓设备搭建Linux服务器实现外网访问
 Flume笔记
 动态规划算法助记
 Hexo 添加Live2D看板娘
 Oracle 助记
 搭建Discuz论坛
 逆向工程（助记）
PL/SQL Developer连接本地Oracle 11g 64位数据库
 NSOperation的基础
 GCD基础

原文地址：https://www.cnblogs.com/likeandroid/p/4541863.html

Android Design Support Library 中控件的使用简单介绍（一）

Android Design Support Library 中控件的使用简单介绍（一）

介绍

下载

使用

第一步--引用

第二步--具体控件的使用

TextInputLayout

FloatingActionButton

Snackbar

Tabs

Navigation View

剩下的组件

结束语