Android Design Support Library的使用

来源：互联网发布：张量与矩阵的乘积编辑：程序博客网时间：2024/05/16 07:24

1、SnackBar控件：

使用方式跟Toast差不多

Snackbar.make(view,"展示的信息",5000).setAction("确定", new View.OnClickListener() {            @Override            public void onClick(View v) {            }        }).show();

2、TextInputLayout控件:

注意事项：此控件内部必须要有一个EditTextView配合使用

2.1 xml:

<android.support.design.widget.TextInputLayout    android:id="@+id/textinputlayout"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <EditText        android:id="@+id/edit"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:ems="20" /></android.support.design.widget.TextInputLayout>

2.2 code:

textinputlayout.setHint("请输入:”);//指引提示edit.addTextChangedListener(new TextWatcher() {    @Override    public void beforeTextChanged(CharSequence s, int start, int count, int after) {    }    @Override    public void onTextChanged(CharSequence s, int start, int before, int count) {        if (s.length() > 7) {            textinputlayout.setError("您输入的文字过长”);//错误提示        } else {            textinputlayout.setErrorEnabled(false);        }    }    @Override    public void afterTextChanged(Editable s) {    }});

效果图：

3、FloatingActionButton控件：

一个负责显示界面基本操作的带阴影效果的圆形按钮

3.1 xml

<android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_margin="10dp"        app:backgroundTint="#ff87ffeb” //填充颜色        app:elevation=“6dp"//起始阴影高度        app:pressedTranslationZ=“8dp”//点击时的阴影高度        app:layout_anchor="@id/mlayout”//锚点        app:layout_anchorGravity="bottom|right|end”//位于锚点的位置        app:rippleColor="#33728dff”//按下时的波纹颜色        android:src="@drawable/ic_launcher”//中间的图形        />

注意事项：需要setOnClickListener或者设置android:clickable="true"才能看到点击效果

效果图：

4、TabLayout:

一般配合ViewPager使用

4.1 注意事项：

1：ViewPager设置适配器后再绑定

2：需要重写PagerAdapter的getPagerTitle()方法，否则TAB text不显示

4.2 xml

<android.support.design.widget.TabLayout    android:id="@+id/tabLayout"    android:layout_width="match_parent"    android:layout_height="60dp"    android:layout_below="@+id/textinputlayout"    app:tabIndicatorColor="@color/white"//底部横线颜色    app:tabSelectedTextColor="@color/gray”//tab选中后的颜色    app:tabTextColor="@color/white”//tab的默认颜色    />

4.3 code

//MODE_FIXED（tablayout大小固定，平均分成N等分） MODE_SCROLLABLE（tab大小固定，可左右滑动)tabLayout.setTabMode(TabLayout.MODE_FIXED);//GRAVITY_CENTER    GRAVITY_FILLtabLayout.setTabGravity(TabLayout.GRAVITY_FILL);viewpager.setAdapter(new MyViewPagerAdapter());tabLayout.setupWithViewPager(view pager);
MyViewpagerAdapter中记得重写getPageTitle(int position)
 @Override        public CharSequence getPageTitle(int position) {            return tabLists.get(position);        }

效果图：

5、NavigationView

抽屉导航栏，一般配合DrawerLayout使用

注意事项：新添加两个自定义属性app:headerLayout="@layout/head”   app:menu="@menu/menu_left"

5.1 head.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:layout_width="50dp"        android:layout_centerInParent="true"        android:background="@drawable/ic_launcher"        android:layout_height="50dp" /></RelativeLayout>

5.2 menu_left:

<?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/nav_home"            android:title="Home"/>        <item            android:id="@+id/nav_messages"            android:title="Messages"/>    </group>    <item android:title="Sub items">        <menu>            <item                android:title="Sub item 1"/>            <item                android:title="Sub item 2"/>        </menu>    </item></menu>

5.3 code:

navigationView.setNavigationItemSelectedListener(        new NavigationView.OnNavigationItemSelectedListener()        {            private MenuItem mPreMenuItem;            @Override            public boolean onNavigationItemSelected(MenuItem menuItem)            {                if (mPreMenuItem != null){                    mPreMenuItem.setChecked(false);                }                menuItem.setChecked(true);                mDrawerLayout.closeDrawers();                mPreMenuItem = menuItem;                return true;            }        });

6、终极大招 CoordinatorLayout

6.1 xml

<?xml version="1.0" encoding="utf-8"?><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/drawerlayout"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"        xmlns:app="http://schemas.android.com/apk/res-auto"        android:layout_width="match_parent"        android:id="@+id/coordinatorlayout"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:id="@+id/appbarlayout"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"            app:layout_scrollFlags="scroll">//滚动视图都必须设置scrollFlags="scroll"这个属性            <android.support.design.widget.CollapsingToolbarLayout                android:id="@+id/collapsing_toolbar"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="true"                app:contentScrim="?attr/colorPrimary"                app:expandedTitleMarginEnd="64dp"                app:expandedTitleMarginStart="48dp"                app:layout_scrollFlags="scroll|exitUntilCollapsed">                <ImageView                    android:id="@+id/head"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:fitsSystemWindows="true"                    android:scaleType="centerCrop"                    android:src="@drawable/header"                    app:layout_collapseMode="parallax" />//<span style="font-family: 'microsoft yahei'; font-size: 14px;">视差模式，在折叠的时候会有个视差折叠的效果</span>                <android.support.v7.widget.Toolbar                    android:id="@+id/toolbar"                    android:layout_width="match_parent"                    android:layout_height="?attr/actionBarSize"                    app:layout_collapseMode="pin"//<span style="font-family: 'microsoft yahei'; font-size: 14px;">固定模式，在折叠的时候最后固定在顶端</span>                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />            </android.support.design.widget.CollapsingToolbarLayout>            <android.support.design.widget.TabLayout                android:id="@+id/tablayout"                android:layout_width="match_parent"                android:layout_height="wrap_content" />        </android.support.design.widget.AppBarLayout>        <android.support.v4.view.ViewPager            android:id="@+id/viewpager"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:layout_behavior="@string/appbar_scrolling_view_behavior"            app:layout_scrollFlags="scroll" />        <android.support.design.widget.FloatingActionButton            android:id="@+id/fab"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="right|bottom"            android:layout_margin="10dp"            android:clickable="true"            android:src="@drawable/ic_launcher"            app:backgroundTint="#87ffeb"            app:elevation="6dp"            app:pressedTranslationZ="8dp"            app:rippleColor="#33728dff" />    </android.support.design.widget.CoordinatorLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigation"        android:layout_width="200dp"        app:menu="@menu/menu_left"        app:headerLayout="@layout/head"        android:layout_height="match_parent"        android:layout_gravity="left"></android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

分析：

设置的layout_scrollFlags有如下几种选项：

scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting。

需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用，而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。

效果图：

源码下载：

http://download.csdn.net/detail/imhxl/9544706

0 0