一 侧滑菜单 DrawerLayout+NavigationView
1.布局文件:drawerlayout里面包含了一个是你的主布局(自己的布局),另一个NavigationView则是侧滑布局
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" > <include layout="@layout/content_main" /> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>注解:headerLayout:侧滑布局的头布局,menu 为菜单布局1.1menu菜单布局
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_book" android:icon="@mipmap/ic_favorite" android:title="@string/navigation_book" /> <item android:id="@+id/navigation_item_example" android:icon="@mipmap/ic_favorite" android:title="@string/navigation_example" /> <item android:id="@+id/navigation_item_about" android:icon="@mipmap/ic_favorite" android:title="@string/navigation_about" /> </group></menu>2.使用2.1侧边栏的menu点击监听
navigationView.setNavigationItemSelectedListener(this);@SupPRessWarnings("StatementWithEmptyBody")@Overridepublic boolean onNavigationItemSelected(MenuItem item) { // Handle navigation view item clicks here. int id = item.getItemId(); if (id == R.id.navigation_item_book) { ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews(); ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent); fab.setVisibility(View.VISIBLE); // Handle the camera action AlertUtils.showToast(this,"书籍"); lastKey = currentKey; currentKey = "三生三世十里桃花"; loadData(); } else if (id == R.id.navigation_item_example) { ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews(); ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent2); fab.setVisibility(View.GONE); AlertUtils.showToast(this,"例子"); } else if (id == R.id.navigation_item_about) { ((FrameLayout) findViewById(R.id.fragment_content)).removeAllViews(); ((FrameLayout) findViewById(R.id.fragment_content)).addView(vContent3); fab.setVisibility(View.GONE); AlertUtils.showToast(this,"关于"); } drawer.closeDrawer(GravityCompat.START); return true;}二 视差特效 coordinatorLayout+AppBarLayout+collapsingToolbarLayout+ImageView+ToolBar1.coordinatorLayout:最外层布局相当于控制滑动联动
2.collapsingToolbarLayout:包裹ImageView和ToolBar完成滑动由图片切换成标题栏的视差特效
<?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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="256dp" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <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/ivImage" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:transitionName="@string/iv_share_transication" android:scaleType="centerCrop" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" app:tabMode="fixed" android:background="@android:color/white" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" /> </LinearLayout></android.support.design.widget.CoordinatorLayout>解释:1.expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。
2.layout_scrollFlags
scroll - 想滚动就必须设置这个。
enterAlways - 当向下移动时,立即显示View(比如Toolbar)。
exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar一直在上面。
enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
3.layout_collapseMode (折叠模式) - 有两个值:
pin - 设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。
总结:当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时,ImageView会有视差效果的向上滚动移除屏幕,当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色,Toolbar也一直会固定在最顶端。
三 BottomNavigationBar 底部导航
<?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:layout_width="match_parent" android:layout_height="match_parent" > <include android:id="@+id/appbar" layout="@layout/app_bar_main" /> <LinearLayout android:id="@+id/ll_content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:text="Hello World!" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> <com.ashokvarma.bottomnavigation.BottomNavigationBar android:id="@+id/bottom_navigation_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" /></android.support.design.widget.CoordinatorLayout>最外层包裹的是CoordinatorLayout 目的是当内部空间填充的是滑动控件时候,如listview,滑动的时候可以动态显示和隐藏底部导航
//底部导航可以自动隐藏 bottomnavigationbar.setAutoHideEnabled(true);//自动隐藏 //底部导航模式 //BottomNavigationBar.MODE_SHIFTING; //BottomNavigationBar.MODE_FIXED; //BottomNavigationBar.MODE_DEFAULT; bottomnavigationbar.setMode(BottomNavigationBar.MODE_FIXED); //底部导航风格 // BottomNavigationBar.BACKGROUND_STYLE_DEFAULT; // BottomNavigationBar.BACKGROUND_STYLE_RIPPLE // BottomNavigationBar.BACKGROUND_STYLE_STATIC bottomnavigationbar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC); bottomnavigationbar.setBarBackgroundColor(R.color.white);//背景颜色 bottomnavigationbar.setInActiveColor(R.color.nav_gray);//未选中时的颜色 bottomnavigationbar.setActiveColor(R.color.colorPrimaryDark);//选中时的颜色 //我们还可以设置角标 badgeItem1 = new BadgeItem().setBackgroundColor(Color.RED).setText("3").setHideOnSelect(true);//角标 badgeItem2 = new BadgeItem().setBackgroundColor(Color.RED).setText("4").setHideOnSelect(true);//角标 badgeItem3 = new BadgeItem().setBackgroundColor(Color.RED).setText("5").setHideOnSelect(true);//角标 badgeItem4 = new BadgeItem().setBackgroundColor(Color.RED).setText("9").setHideOnSelect(true);//角标 item1 = new BottomNavigationItem(R.mipmap.ic_launcher, "Home"); item2 = new BottomNavigationItem(R.mipmap.ic_launcher, "Books"); item3 = new BottomNavigationItem(R.mipmap.ic_launcher, "Music"); item4 = new BottomNavigationItem(R.mipmap.ic_launcher, "Games"); //添加选项卡 bottomnavigationbar .addItem(item1.setBadgeItem(badgeItem1)) .addItem(item2.setBadgeItem(badgeItem2)) .addItem(item3.setBadgeItem(badgeItem3)) .addItem(item4.setBadgeItem(badgeItem4)) .setFirstSelectedPosition(lastSelectedPosition) .initialise(); bottomnavigationbar.setTabSelectedListener(this); setDefaultFragment(); } private void setDefaultFragment() { FragmentManager fm = getFragmentManager(); FragmentTransaction transaction = fm.beginTransaction(); mBottomFragment = BottomFragment.newInstance("位置"); transaction.replace(R.id.ll_content, mBottomFragment); transaction.commit(); } boolean isSelected[] = {true, false, false, false}; @Override public void onTabSelected(int position) { Log.d("位置:", "onTabSelected() called with: " + "position = [" + position + "]"); FragmentManager fm = this.getFragmentManager(); //开启事务 FragmentTransaction transaction = fm.beginTransaction(); switch (position) { case 0: isSelected[0] = true; if (mBottomFragment == null) { mBottomFragment = BottomFragment.newInstance("位置"); } transaction.replace(R.id.ll_content, mBottomFragment); break; case 1: isSelected[1] = true; if (mBottomFragment2 == null) { mBottomFragment2 = BottomFragment2.newInstance("发现"); } transaction.replace(R.id.ll_content, mBottomFragment2); break; case 2: isSelected[2] = true; if (mBottomFragment3 == null) { mBottomFragment3 = BottomFragment3.newInstance("爱好"); } transaction.replace(R.id.ll_content, mBottomFragment3); break; case 3: isSelected[3] = true; if (mBottomFragment4 == null) { mBottomFragment4 = BottomFragment4.newInstance("图书"); } transaction.replace(R.id.ll_content, mBottomFragment4); break; default: break; } // 事务提交 transaction.commit(); } @Override public void onTabUnselected(int position) { if (isSelected[0] == true) { badgeItem1.hide(); } if (isSelected[1] == true) { badgeItem2.hide(); } if (isSelected[2] == true) { badgeItem3.hide(); } if (isSelected[3] == true) { badgeItem4.hide(); } } @Override public void onTabReselected(int position) { }}注意:当需要listview滑动可以让底部导航联动显示和隐藏,listview需要设置一个属性android:nestedScrollingEnabled="true"此外除了上面主要的一些控件效果之外,还有一些控件如 TextInputLayout,CardView,RecyclerView,MaterialDialog.基本控件的使用我总结写了一个小demo,有需要的话可以去我的github下载:https://github.com/wjn919/MyMaterialDemo。如果有什么不对的地方欢迎随时指正和交流!
新闻热点
疑难解答