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_FILL
tabLayout.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>
分析:
- 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的使用场景,基本已经固定了。
效果图: