android.support.design.widget包下的CoordinatorLayout、AppBarLayout、TextInputLayout、FloatingActionButton、

原创 2015年07月10日 15:09:01

          在前不久的谷歌2015 I/O大会上,发布了Android新版本M,在这次的I/O大会上谷歌对Android并没有很大的改变,主要是修改完善之前Android L版本。不过在谷歌推出Material Design设计风格之后,还是做了很多风格上的兼容,比如v7包的 RecyclerView,CardView,Palette等,这次的I/O大会上也继续完善了MD设计支持库,这次谷歌推出了Android Design Support Library 库,全面支持MD设计风格的UI效果。Design Support Library库吸收了8 个新的 material design 组件!最低支持 Android2.1,其实很多组件都是Github上比较火的,只是谷歌把它官方化了,便于开发者使用。今天我们来学习FloatingActionButton,TextInputLayout,Snackbar,TabLayout 四种控件。

使用android.support.design下的类要在build.gradle中配置如下代码

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:recyclerview-v7:22.2.0'
    compile 'com.android.support:cardview-v7:22.2.0'
    compile 'com.android.support:palette-v7:22.2.0'
    compile 'de.hdodenhof:circleimageview:1.3.0'
}
代码如下:

package com.example.administrator.test;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;


public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private LinearLayout layout;
    private FloatingActionButton button;
    private Button button_tableLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout = (LinearLayout) findViewById(R.id.layout);
        button = (FloatingActionButton) findViewById(R.id.button);
        button_tableLayout = (Button) findViewById(R.id.button_tableLayout);

        button.setOnClickListener(this);
        button_tableLayout.setOnClickListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onClick(View v) {

        switch (v.getId()){
            case R.id.button: //FloatingActionButton and Snackbar

                //Snackbar提供了一个介于ToastAlertDialog之间轻量级控件,它可以很方便的提供消息的提示和动作反馈
                Snackbar.make(layout, "Hello,I am Snackbar................................." +
                        "....................................................................." +
                        ".................osfjalkjlkjflkjxzlkjlk", Snackbar.LENGTH_LONG).setAction(

                        "取消", new View.OnClickListener() {

                            @Override
                            public void onClick(View v) {

                            }
                        }
                ).show();
                break;

            case R.id.button_tableLayout: //TabLayout

                Intent intent = new Intent(this,TabLayoutActivity.class);
                startActivity(intent);
                break;
        }

    }
}
Xml布局如下:

<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:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              android:paddingBottom="@dimen/activity_vertical_margin"
              android:paddingLeft="@dimen/activity_horizontal_margin"
              android:paddingRight="@dimen/activity_horizontal_margin"
              android:paddingTop="@dimen/activity_vertical_margin"
              tools:context=".MainActivity"
    android:id="@+id/layout">

    <!-- -->
    <android.support.design.widget.TextInputLayout
        style="@style/textInputlayout"
        app:hintTextAppearance="@style/edit_hint">

        <EditText
            style="@style/edit"
            android:hint="用户名"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        style="@style/textInputlayout"
        android:layout_marginTop="10dp"
        app:hintTextAppearance="@style/edit_hint">

        <EditText
            style="@style/edit"
            android:hint="手机号码"/>
    </android.support.design.widget.TextInputLayout>

    <!-- -->
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus"
        app:fabSize="mini"
        app:backgroundTint="#0000FF"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus"
        app:fabSize="normal"
        app:backgroundTint="#FF0000"/>

    <Button
        android:id="@+id/button_tableLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TableLayout"/>

</LinearLayout>
Style如下:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <!-- 标题栏颜色 -->
    <item name="colorPrimary">#FFFFFF</item>
    <!--状态栏背景色-->
    <item name="colorPrimaryDark">#3A5FCD</item>
    <!-- EditText光标和原始边框颜色 -->
    <item name="colorAccent">#FF0000</item>
    <!-- 整个应用中编辑框字体提示的颜色 -->
    <item name="android:textColorHint">#AEAEAE</item>
    <!--Activity背景色-->
    <item name="android:windowBackground">@android:color/white</item>
</style>

<!-- TextInputLayout布局样式 -->
<style name="textInputlayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">55dp</item>
    <item name="android:background">@drawable/shape_edit_grey</item>
    <item name="android:textSize">16sp</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:paddingLeft">10dp</item>
    <item name="android:paddingRight">10dp</item>
    <item name="android:paddingTop">5dp</item>
</style>

<!-- EditText 布局样式 -->
<style name="edit">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <!--<item name="android:textCursorDrawable">@null</item>-->
    <item name="android:background">@null</item>
</style>
有不懂的可以和我交流 QQ:619285112

Android support.v7库中的几种控件,布局控件

android.support.v7,Toolbar,CardView,recyclerview。design库,TextInputLayout,FloatingActionButton,Snackb...
  • u012149399
  • u012149399
  • 2015年10月24日 15:50
  • 15962

Android Support Design库之AppBarLayout

AppBarLayout跟它的名字一样,把容器内的组件全部作为AppBar,就像这样将一个ToolBar和TabLayout包裹在一起1.布局实现//引入degisn库的支持 compile 'com...
  • z957250254
  • z957250254
  • 2016年09月25日 21:54
  • 2809

对于解决androidstudio编辑时发生的错误Didn't find class “android.support.design.widget.AppBarLayout”

Android studio 运行不起来,报错详情: PID: 21748                   java.lang.RuntimeException: Unable t...
  • YKQi_
  • YKQi_
  • 2017年05月18日 17:36
  • 1730

android.view.InflateException: Error inflating class android.support.design.widget.CoordinatorLayout

6down vote Please put compile 'com.android.support:design:23.0.1' inside your project b...
  • qq906786621
  • qq906786621
  • 2016年10月22日 15:23
  • 467

Material Design系列,自定义Behavior之上滑显示返回顶部按钮

有时候我们的页面内容过长的时候,滑动到页面底部用户再滑动到顶部很麻烦,Android不像iOS可以点击statusBar回到顶部,一般都是双击Toolbar/ActionBar或者在底部放一个按钮。今...
  • yanzhenjie1003
  • yanzhenjie1003
  • 2016年07月18日 13:35
  • 10643

CoordinatorLayout、AppBarLayout及控件扩展到状态栏

写在最前面: 1. 要想让某个控件扩展到状态栏,必须将该控件作为 AppBarLayout直接子控件,否则无效; 2. 如果要让该控件随着滚动而消失,必须设置layout_scrollFlag属性...
  • zhuxuliao
  • zhuxuliao
  • 2016年06月01日 23:35
  • 2142

Android 中CoordinatorLayout与AppBarLayout、NestedScrollView用法(实现上滑动悬浮,全局可滑动)

1.
  • yingtian648
  • yingtian648
  • 2017年02月21日 10:19
  • 575

Android 5.0新控件 AppBarLayout | 嵌套布局 介绍及使用详情

Android 5.0新控件 AppBarLayout | 嵌套布局 介绍及使用详情extends LinearLayout AppBarLayout is a vertical LinearLa...
  • lengxuechiwu1314
  • lengxuechiwu1314
  • 2017年05月18日 16:04
  • 506

CoordinatorLayout AppBarLayout 结合下拉刷新 上拉加载更多 的滑动冲突解决

如果appBarLayout中有折叠控件 CollapsingToolbarLayout 或者其他一些控件 在滚动的时候进行判断和刷新事件处理 在这里:刷新框架:为 SwipyRefreshLayou...
  • axuanqq
  • axuanqq
  • 2016年04月13日 16:24
  • 7725

CoordinatorLayout与ListView协同让FAB悬浮按钮从底部消失及出现

CoordinatorLayout协同布局在一般只结合RecyclerView和NestedScrollView使用,如果我使用ListView没有效果的。但是,由于业务原因使用ListView,有需...
  • qq_33689414
  • qq_33689414
  • 2016年05月10日 12:06
  • 4877
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android.support.design.widget包下的CoordinatorLayout、AppBarLayout、TextInputLayout、FloatingActionButton、
举报原因:
原因补充:

(最多只允许输入30个字)