1.toolBar使用。
是v7包下的toolbar,不是直接的toolbar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
这里的高度使用的是actionBar的默认高度
layout_collapseMode="pin"这个是折叠模式,其中“pin”代表折叠过程中,位置始终固定不变。“parallax”汉意“视差”,这里表示在折叠的过程中,产生一定的错位偏移。
需要修改Apptheme主题为
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
不然会报错:
报错一.jpg在Activity里面找到实例,并设置支持actionbar
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.device_update);
}
actionBar左边自带一个返回的图标,它的id是:android.R.id.home,名字是“HomeAsUp”。
actionBar.setDisplayHomeAsUpEnabled(true);表示返回的图标可见
actionBar.setHomeAsUpIndicator(R.drawable.device_update);表示把返回的图标换成我们需要的图标。
如果想对它进行监听事件需要在onOptionsItemSelectedc实现逻辑:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
2.滑动菜单DrawerLayout
DrawerLayout是一个布局,和以前的侧滑菜单很像。他要求在布局中放入两个直接子控件,一个是主屏幕中显示的内容,一个是滑动菜单显示的内容。
由于滑动菜单需要指定从什么方向滑出来,所以第二个子控件需要指定layout_gravity属性。
其中属性值 start 代表根据系统语言进行判断从左到 右还是从右到左,left表示从左到右。right代表从右到左。
如果想在逻辑中打开or关闭滑动菜单可以调用:
drawerLayout.openDrawer(GravityCompat.START);
drawerLayout.closeDrawers();
3.NavigationView
NavigationView是用来简化美化我们的滑动菜单的。它是design support 库的,需要添加依赖:
compile 'com.android.support:design:25.1.0'
NavigationView的布局,作为DrawerLayout的直接子控件,前一个直接子控件是主屏幕布局:
<android.support.design.widget.NavigationView
android:layout_gravity="start"//滑出的方向
app:menu="@menu/nav_my_menu"
app:headerLayout="@layout/head_layout"
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.design.widget.NavigationView>
使用navigationView要准备好两个东西,一个是menu,一个是headLayout。注意的是headLayout要指定高度,我这里是180dp.
做出效果如下:
提一下,图片的花叫“鲁冰花”,一首歌的名字,杨沛宜唱的挺好听的,给人感觉很纯净。
还可以给NavigationView注册监听事件:
navigationView.setCheckedItem(R.id.nav_call);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.nav_call:
Toast.makeText(MainActivity.this,"you click call",Toast.LENGTH_SHORT).show();
break;
}
return true;
});
4.悬浮按钮FloatingActionButton
floatingActionButton会使用colorAccent来作为按钮的颜色。在values-colors.xml可以找到。
布局使用:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/floating"
app:elevation="8dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|end"
/>
其中:src是给设置一张图片。
elevation(高度)是给floatingActionButton指定一个高度值,高度值越大,投影越大,效果越淡。反之亦然。
ayout_anchor是给floatingActionButton指定一个锚点,也即定一个位置,
app:layout_anchorGravity="bottom|end"是指在指定区域内的具体位置。
当然也不一定要设置锚点,直接使用layout_gravity也行。
他的监听事件和button没啥区别。
5.协调布局CoordinatorLayout
CoordinatorLayout,是一个加强版的FrameLayout.他可以监听其所有子控件的各种事件,帮我们做出最为合理的响应。
6.卡片式布局CardView
cardView也是一个FrameLayout.只是额外提供了圆角和阴影。需要使用依赖:
compile 'com.android.support:cardview-v7:25.1.0'
使用方式:
<android.support.v7.widget.CardView
android:id="@+id/card_view_fruit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="35dp"
android:layout_marginBottom="15dp"
app:cardCornerRadius="4dp"
app:cardElevation="4dp">
<TextView
android:id="@+id/fruit_content_text"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
如此这般,textView就具有了圆角和阴影效果了。
app:cardCornerRadius="4dp"设置圆角
app:cardElevation="4dp",设置高度,其实高度和阴影是相伴相随的
7.AppBarLayout
这个是为了解决RecyclerView向上滑动时,遮挡住Toolbar,当然前期是他们都在了一个CoordinatorLayout里面。因为CoordinatorLayout是一个FrameLayout.而AppBarLayout是一个垂直方向的LinearLayout,在它内部做了很多滚动事件的封装。
如何体现这些滚动事件的封装?
是通过app:layout_scrollFlags属性实现的。这个属性是加在他内部的Toolbar里面的。
其中scroll表示当RecyclerView向上滚动的时候,toolbar会跟着一起向上滚动,并实现隐藏,enterAlways表示当RecyclerView向下滚动的时候,Toolbar会跟着一起向下滚动,并重新显示。snap表示toolbar还没完全隐藏的时候,根据滚动的距离,自动选择隐藏还是显示。exitUntilCollapsed表示完成折叠之后,保留在界面上,不再移出屏幕。
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed|scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:fitsSystemWindows="true"
android:src="@drawable/all_fruit"
android:id="@+id/fruit_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
//layout_collapseMod指定折叠过程中的折叠模式,其中pin表示折叠过程中位置不变
//parallax表示折叠过程中,会出现一定的错位偏移
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
其中CollapsingToolbarLayout,是可折叠式标题栏,接下来会讲。
android:fitsSystemWindows="true"是为了设置状态栏的颜色和当前图片颜色一致。后面会讲。
8.可折叠式标题栏CollapsingToolbarLayout
CollapsingToolbarLayout是不能单独存在的,在设计的时候,就被限定为AppbarLayout的直接子布局。而且是作用于toolBar基础之上的布局,如上代码即是。
app:contentScrim="?attr/colorPrimary"用来指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色。
在此要把 app:layout_scrollFlags="scroll|enterAlways|snap"这个属性移到CollapsingToolbarLayout里面。
另外需要注意layout_collapseMode的折叠模式。
9.背景和状态栏融合模式
背景和系统状态栏融合需要借助:android:fitsSystemWindows这个属性来实现。
将控件的android:fitsSystemWindows属性设置为true,就表示该控件会出现在系统状态栏里。但要将该控件的父级控件的android:fitsSystemWindows属性都设置为true.
但即使已经这样设置了还是没有效果的,需要把状态栏设置为透明
设置方法是:android:statusBarColor颜色指定为@android:color/transparent
可是android:statusBarColor这个属性要在Api21以上才有。所以要新建values-v21目录,并新建styles.xml文件。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyActivityTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>
由于Api21之前的系统无法识别MyActivityTheme,所以需要在values/styles.xml文件进行修改。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="FruitActivityTheme" parent="AppTheme"></style>
</resources>
添加了一个FruitActivityTheme主题,只是这个主题什么都没有指定。
最后单独给Activity指定该主题就好。
10.多谢郭霖的第二行代码,以上总结都是从他的书上来的。亲自实践,效果不错。
网友评论