Android Support Design Library使用详解

来源:互联网 发布:windows 32位 64位 编辑:程序博客网 时间:2024/06/07 06:55

1.背景
随着Material Design越来越流行,也得到了广大程序员以及Android用户的芳心。Google为我们带来了Android Support Design Library,给我们提供了更加规范的MD风格的控件。作为一个Android Developer,我们当然要去深入学习一下啦!(抱歉,我觉悟的有点晚了。。。)

2.使用介绍
(1)添加依赖

compile 'com.android.support:design:23.3.0'

(2)TextInputLayout
以前我们使用EditText这个控件的时候,当我们开始输入文本的时候,默认提示就会消失,有点影响用户体验,但是现在我们使用TextInputLayout,提示会默认浮动到EditText的上方,并且当我们校验文本的时候,可以在文本框下面进行显示Error。

布局文件

<android.support.design.widget.TextInputLayout    android:id="@+id/til_username"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Username"        android:singleLine="true"        android:inputType="textEmailAddress"/></android.support.design.widget.TextInputLayout><android.support.design.widget.TextInputLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:id="@+id/til_password">    <EditText        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:hint="Password"        android:singleLine="true"        android:inputType="textPassword"/></android.support.design.widget.TextInputLayout>

Java代码

final TextInputLayout textInputLayoutUsername = (TextInputLayout) findViewById(R.id.til_username);final TextInputLayout textInputLayoutPassword = (TextInputLayout) findViewById(R.id.til_password);Button buttonLogin = (Button) findViewById(R.id.btn_login);if (buttonLogin != null){    buttonLogin.setOnClickListener(new View.OnClickListener() {        @Override        public void onClick(View v) {            String username = textInputLayoutUsername.getEditText().getText().toString();            String password = textInputLayoutPassword.getEditText().getText().toString();            if (!checkUsername(username)){                textInputLayoutUsername.setError("用户名不规范");                return;            } else {                textInputLayoutUsername.setError(null);                textInputLayoutUsername.setErrorEnabled(false);            }            if (!checkPassword(password)){                textInputLayoutPassword.setError("密码不规范");                return;            } else {                textInputLayoutPassword.setError(null);                textInputLayoutPassword.setErrorEnabled(false);            }            Toast.makeText(DetailActivity.this, "登录成功", Toast.LENGTH_SHORT).show();        }    });}

(3)Snackbar
Snackbar是一个类似于Toast的轻量级控件,会显示在界面的下方,并且可以为其添加action事件,而且还有侧滑移除的特效。
使用方式如下:

Snackbar.make(v, "Hello, my first SnackBar", Snackbar.LENGTH_SHORT)        .setAction("cancel", new View.OnClickListener() {            @Override            public void onClick(View v) {            }        }).show();

(4)FloatingActionButton
非常简单的一个控件,悬浮按钮的作用。继承自Imageview,所以我们可以设置其src属性,布局:

<android.support.design.widget.FloatingActionButton    android:id="@+id/fab_create"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_margin="16dp"    android:layout_gravity="bottom|end"    android:src="@drawable/ic_create"/>

(5)TabLayout
我们在使用ViewPager经常使用一些第三方的TabIndicator来达到一些漂亮的效果,Google现在为我们提供了MD风格的TabLayout,并且使用起来非常的简单。
布局:

<android.support.design.widget.TabLayout    android:id="@+id/tabs"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:tabIndicatorColor="@android:color/white"    app:tabTextColor="@android:color/white"    app:tabSelectedTextColor="@android:color/darker_gray"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPager    android:id="@+id/view_pager"    android:layout_width="match_parent"    android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.ViewPager>
app:tabIndicatorColor="@android:color/white"//Tab下划线颜色app:tabTextColor="@android:color/white"//Tab默认文字颜色app:tabSelectedTextColor="@android:color/darker_gray"//Tab选中文字颜色

通过如下的代码把ViewPager和TabLayout进行关联

FragmentViewPagerAdapter fragmentViewPagerAdapter = new FragmentViewPagerAdapter(getSupportFragmentManager(), mFragmentList);mViewPager.setAdapter(fragmentViewPagerAdapter);mTabLayout.setupWithViewPager(mViewPager);

记得在ViewPagerAdapter中复写getPageTitle的方法为TabLayout设置标题。
(6)NavigationView
定制抽屉的界面,非常的方便,通过布局和menu就可以轻松搞定,还可以实现选中的效果。
布局:

<android.support.design.widget.NavigationView    android:id="@+id/navigation_view"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:layout_gravity="start"    app:headerLayout="@layout/navigation_header"    app:menu="@menu/menu_drawer"></android.support.design.widget.NavigationView>

接下来就要看看header的布局文件和menu的配置文件:

navigation_header.xml

<?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="200dp"    android:background="?attr/colorPrimary">    <ImageView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_gravity="center"        android:layout_marginTop="30dp"        android:src="@drawable/ic_user"/>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textColor="@android:color/white"        android:text="马剑"        android:layout_gravity="center"        android:layout_marginTop="20dp"        android:textSize="20sp"/></LinearLayout>

menu_drawer.xml

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/item_homepage"            android:title="首页"            android:icon="@drawable/ic_homepage"/>        <item            android:id="@+id/item_blog"            android:title="博客"            android:icon="@drawable/ic_blog"/>        <item            android:id="@+id/item_mark"            android:title="收藏"            android:icon="@drawable/ic_mark"/>        <item            android:id="@+id/item_setting"            android:title="设置"            android:icon="@drawable/ic_setting"/>    </group>    <item android:title="平台">        <menu>            <item                android:id="@+id/item_ios"                android:title="iOS"                android:icon="@drawable/ic_ios"/>            <item                android:id="@+id/item_android"                android:title="Android"                android:icon="@drawable/ic_android"/>            <item                android:id="@+id/item_wechat"                android:title="WeChat"                android:icon="@drawable/ic_wechat"/>        </menu>    </item></menu>

最后Java代码

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);if (navigationView != null){    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {        @Override        public boolean onNavigationItemSelected(MenuItem item) {            item.setChecked(true);            mDrawerLayout.closeDrawers();            return true;        }    });}

(7)关于CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout
请浏览详细教程:http://blog.csdn.net/xyz_lmn/article/details/48055919

1 0
原创粉丝点击