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 Design Support Library(一):FloatingActionButton、TextInputLayout、TextInputEditText简单用法

Android Design Support Library(一):FloatingActionButton、TextInputLayout、TextInputEditText简单用法...

Android Design Support Library之CoordinatorLayout,AppBarLayout

在上一篇文章(点我)中我们提到了CoordinatorLayout。CoordinatorLayout是这次新添加的一个增强型的FrameLayout。在CoordinatorLayout中,我们可以...

使用android.support.design.widget.CoordinatorLayout出现空白快问题

实现沉浸式状态栏和隐藏效果后在CoordinatorLayout 22以前没什么问题,只是体验没有23的好,在升级到23后底部出现了一块空白,只要一滑动就出现,后来根据相关资料总算解决了   先看看...

Android Design AppBarLayout、NavigationView、FloatingActionButton、CollapsingToolbarLayout等控件的使用

霍霍,把剩下的几个控件给大家整出来了,我是菜鸟,这些内容有很多大神早已经整出来,为什么还要写这个博客呢,主要还是为了锻炼自己技术。在自己写博客的时候发现不小的问题,最大的问题就是界面丑陋。所以大家多结...

Android Design包下的TextInputLayout可以快速实现输入框效果

TextInputLayout快速实现输入框的界面效果优点: 使用起来简单 快捷 MD设计风格 界面效果漂亮 缺点: 最低的API等级为:17 现在大部分的APi兼容到最低版本14...

Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout

如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi...
  • xzylx1
  • xzylx1
  • 2015年12月25日 10:14
  • 287

Android Design风格实现可折叠页面CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout

最近有个页面需要做到折叠效果,然后去看了下Design包,百度找资料,反反复复,今天总算做到差不多效果,记录下。 首页是添加包,因为还是用的javaEE开发工具,更新了下ADT以及sdk后,下载And...
  • Canra
  • Canra
  • 2016年10月12日 16:45
  • 555

Android Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar

好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件: CoordinatorLayout  该控件也是Design包下的一个控件,然而这个控件可以被称为Design包中最复杂...
  • zchlww
  • zchlww
  • 2016年02月29日 10:40
  • 469

Android Support Design库之TextInputLayout

TextInputLayout可以说是用来升级EditText的,它是一个容器,内部也只能放一个子view也就是EditTxet,下面来看下效果当EditText获得焦点的时候,hint提示会已动画效...
  • a_zhon
  • a_zhon
  • 2016年09月11日 20:52
  • 327

Android进阶系列--Design Support Library使用详解(Snackbar,TextInputLayout,TabLayout,NavigationView...)

Material Design 设计风格非常受欢迎,那么支持其效果的Design Support Library(Android 2.1  API  level 7及其以上)库又有哪些控件呢。主要包括...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android.support.design.widget包下的CoordinatorLayout、AppBarLayout、TextInputLayout、FloatingActionButton、
举报原因:
原因补充:

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