1. 添加依赖
compile 'com.android.support:design:25.1.1'
2. Snackbar介绍
SnackBar通过在屏幕底部展示简洁的信息,为一个操作提供了一个轻量级的反馈,
并且在Snackbar中还可以包含一个操作,在同一时间内,仅且只能显示一个 Snackbar,
它的显示依赖于UI,不像Toast那样可以脱离应用显示。它的用法和Toast很相似,
唯一不同的就是它的第一个参数不是传入Context而是传入它所依附的父视图,但是他比Toast更强大
fab.setOnClickListener(this)
Snackbar.make(view, "I'am a Snackbar", Snackbar.LENGTH_LONG)
.setAction("Action", null)
.setActionTextColor(Color.RED).show()
3. TextInputLayout
使用过EditText的同学肯定知道,有一个叫hint的属性,它可以提示用户此处应该输入什么内容,然而当用户输入
真实内容之后,hint的提示内容就消失了,用户的体验效果是十分不好的,TextInputLayout的出现解决了这个问题
当用户在输入的时候hint的内容就会跑到输入内容的上边去,其中TextInputLayout中字体的颜色是style文件中的colorAccent。
使用
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#85c9f4"
android:textColor="#333333"
android:textSize="16sp"
android:text="文字输入"
android:gravity="center"/>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp">
<EditText
android:id="@+id/edit_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用户名"
android:textSize="14sp"
android:textColorHint="#666666"
/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp">
<EditText
android:id="@+id/edit_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密码"
android:inputType="textPassword"
android:textSize="14sp"
android:textColorHint="#666666"/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
FloatingActionButton是一个浮动的按钮,它是一个带有阴影的圆形按钮,可以通过fabSize来改变其大小,主要负责界面的基本操作,这个按钮总体来说还是比较简单的。
1. 默认FloatingActionButton 的背景色是应用主题的 colorAccent的颜色,
可以通过app:backgroundTint 属性或者setBackgroundTintList (ColorStateList tint)方法去改变背景颜色
注意用app:backgroundTint="@color/green" 不要使用android:backgroundTint 否则报错
2. 可以用过app:fabSize 属性设置按钮大小 auto / normal / mini
3. android:src 属性改变 drawable
4. app:rippleColor设置点击 button 时候的颜色(水波纹效果)
5. app:borderWidth设置 button 的边框宽度
6. app:elevation设置普通状态阴影的深度(默认是 6dp)
7. app:pressedTranslationZ设置点击状态的阴影深度(默认是 12dp)
5. TabLayout使用
和ViewPager搭配使用 和第三方库ViewPagerIndicator是很类似的
<android.support.design.widget.TabLayout
android:id="@+id/id_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#000000"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="@+id/id_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
代码中使用
MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager());
myAdapter.addFragment(new TabFragment(),"Tab one");
myAdapter.addFragment(new TabFragment(),"Tab two");
myAdapter.addFragment(new TabFragment(),"Tab three");
id_viewPager.setAdapter(myAdapter);
id_tabLayout.setupWithViewPager(id_viewPager,false);
ViewPager的适配器复写下面的方法
@Override
public CharSequence getPageTitle(int position) {
return titles!=null && titles.size()>0 ? titles.get(position) : null;
}
TabLayout常用属性介绍
1. tabMode 模式 fixed / scrollable
fixed填充屏幕宽度 无论几个 然后文字会水平居中
scrollable支持左右滑动 如果有很多个标签指示器 但是如果指示器就两三个的话 会靠左对齐 不会填充整个屏幕
2. tabIndicatorColor
设置指示器下划线的颜色
3. tabIndicatorHeight
设置指示器线的高度
4. app:tabGravity
设置指示器是否居中对齐 貌似只对tabMode为fixed时候有用
5. tabTextColor 与 tabSelectedTextColor
tabTextColor设置指示器标题颜色
tabSelectedTextColor设置指示器标题选中的颜色
6. DrawerLayout与NavigationView 构建侧滑菜单
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/id_drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.NavigationView
android:id="@+id/id_navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/nav_menu"
/>
</android.support.v4.widget.DrawerLayout>
NavigationView属性
1. app:headerLayout - 控制头部的布局
2. app:menu - 导航菜单的资源文件
nav_header布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="#85c9f4"
android:padding="16dp"
android:orientation="vertical"
android:gravity="bottom">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="小成"
android:textColor="#ffffff"
android:textSize="16sp"/>
</LinearLayout>
nav_menu布局
<?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:icon="@drawable/iconfont_home"
android:title="首页" />
<item
android:id="@+id/nav_blog"
android:icon="@drawable/iconfont_blog"
android:title="我的博客" />
<item
android:id="@+id/id_textInput"
android:icon="@drawable/iconfont_cate"
android:title="文字输入" />
<item
android:id="@+id/nav_about"
android:icon="@drawable/iconfont_about"
android:title="关于" />
</group>
</menu>
代码中编写
设置菜单选择按钮监听事件
id_navview.setNavigationItemSelectedListener(this)
//侧滑菜单按钮选择事件
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int itemId = item.getItemId()
switch (itemId){
case R.id.nav_home:
Log.e("ItemSelected","首页")
break
case R.id.nav_blog:
Log.e("ItemSelected","我的博客")
break
case R.id.nav_about:
Log.e("ItemSelected","关于")
break
case R.id.id_textInput:
Intent intent = new Intent(MainActivity.this,TextInputActivity.class)
startActivity(intent)
break
}
id_drawerlayout.closeDrawers()
return true
}
7.CoordinatorLayout、AppBarLayout、TabLayout使用实现标签指示器悬浮
AppBarLayout:继承于LinearLayout,使用AppBarLayout可以让包含在其中的子控件能响应被标记了ScrollingViewBehavior的的滚动事件(
要与CoordinatorLayout 一起使用),利用它我们可以很容易的去实现视差滚动效果。
CoordinatorLayout :它是一个增强版的FrameLayout,他可以协调其子View的交互,控制手势机滚动技巧。这个控件
十分的强大,用处也十分的广泛,与AppBarLayout,TabLayout和ViewPager实现标签指示器TabLayout悬浮效果。
如果你想要 TabLayout 同样从屏幕上消失,只需要给 TabLayout 定义相同的属性就可以了
app:layout_scrollFlags="scroll|enterAlways"
xml布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/id_root_cl"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/id_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#85c9F4"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
android:id="@+id/id_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#000000"
app:tabIndicatorHeight="2dp"
app:tabTextColor="#ff0000"
app:tabSelectedTextColor="#0000ff"
app:tabMode="fixed"
app:tabGravity="center" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/id_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/id_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_done"
app:backgroundTint="@color/green"
app:fabSize="auto"
app:rippleColor="#ff0000"
app:borderWidth="10px"
app:elevation="6dp"/>
</android.support.design.widget.CoordinatorLayout>
几个知识点
app:layout_scrollFlags
1. scroll: 所有想滚动出屏幕的view都需要设置这个flag,没有设置这个flag的view将被固定在屏幕顶部。
2. enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,当向上滑的时候Toolbar就隐藏,下滑的时候显示。
3. enterAlwaysCollapsed: 顾名思义,这个flag定义的是何时进入(已经消失之后何时再次显示)。假设你定义了一个最小高度(minHeight)
同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
4. exitUntilCollapsed: 同样顾名思义,这个flag时定义何时退出,当你定义了一个minHeight,这个view将在滚动到达这个最小高度的时候消失。
滑动控件必须加这个属性 才能保证滑动正常 用来使滑动控件与AppBarLayout互动
app:layout_behavior="@string/appbar_scrolling_view_behavior"
代码中
设置actionBar
setSupportActionBar(toolbar)
ActionBar actionBar = getSupportActionBar()
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu)
actionBar.setDisplayHomeAsUpEnabled(true)
设置ViewPager和TabLayout同上第5点
CollapsingToolbarLayout :让Toolbar可伸缩,在伸缩的时候决定ToolBar是移除屏幕和固定在最上面,
由于Toolbar 只能固定到屏幕顶端并且不能做出好的动画效果,所以才有了这个Layout的出现。
Toolbar中有一个app:layout_collapseMode="pin" 这个确保Toolbar在AppBarLayout折叠的时候仍然被固定在屏幕的顶部
1. 用 CollapsingToolbarLayout 包裹 Toolbar,但仍然在 AppBarLayout 中
2. 从 Toolbar 中删除 layout_scrollFlags
3. 为 CollapsingToolbarLayout 声明 layout_scrollFlags,并且将 layout_scrollFlags 设置成 scroll|exitUntilCollapsed
4. 改变 AppBarLayout 扩张状态时的布局高度大小 在这个例子中,我用 256dp
5. 需要固定的View设置app:layout_collapseMode="parallax"实现视差效果
6. app:layout_collapseParallaxMultiplier="0.7"来设置视差因子
7. CollapsingToolbarLayout设置app:contentScrim="?attr/colorPrimary"属性更加完美
xml布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="#85c9f4"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp">
<LinearLayout
style="@style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Friends"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_discuss"
android:layout_margin="16dp"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
代码中使用
setSupportActionBar(toolbar)
ActionBar actionBar = getSupportActionBar()
actionBar.setHomeButtonEnabled(true)
actionBar.setDisplayHomeAsUpEnabled(true)
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
finish()
}
})
9. 联系方式
qq:1509815887@qq.com
email : zlc921022@163.com
phone : 18684732678