本文主要是介绍Android控件之Toolbar + DrawerLayout的使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
载请标明出处: http://blog.csdn.net/u011974987/article/details/50963495;
最近闲着没事儿,在关注一些遵循最新的Material Design设计规范的应用和效果,感觉很高大上;一直都没有去尝试过Material Design的一些新控件,很多还是不熟悉的,所以最近就写Demo 来熟悉下这些控件的使用,接下来使用官方支持库来快速实现这类效果,需要使用到Toolbar和DrawerLayout,如果你还不知道这两个Widget,先去google看下文档吧~,详细步骤如下:
1、首先需要添加appcompat-v7支持:
如果是在Android Studio 2.1 Preview3 上创建的项目,默认已经添加了appcompat-v7和design支持了,如果不是最新版AndroidStudio则需要在build.gradle中添加如下代码:
dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])compile 'com.android.support:appcompat-v7:23.2.0'compile 'com.android.support:design:23.2.0'}
然后同步一下Gradle去下载。
2、在主布局文件添加DrawerLayout:
activity_main.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/id_drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><!-- 第一个位置 --><!-- 你的主界面内容,必须放置在DrawerLayout中的第一个位置根据自己的需要来放置控件,例如: LinearLayout布局 或者RelativeLayout 布局:也可以是单个控件。 --><include
layout="@layout/app_bar_main"android:layout_width="match_parent"android:layout_height="match_parent" /><android.support.design.widget.NavigationView
android:id="@+id/id_navigationView"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="left"android:fitsSystemWindows="true"app:itemTextColor="@color/selector_nav_menu_textcolor" /></android.support.v4.widget.DrawerLayout>
3、添加包含ToolBar:
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- CoordinatorLayout是这次新添加的一个增强型的FrameLayout,通过它可以实现很多东西:例如:1.界面向上滚动逐渐隐藏Toolbar;2.在其中可以放置浮动的View,就像Floating Action Button。-->
<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_coordinatorlayout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><!--AppBarLayout跟它的名字一样,把容器类的组件全部作为AppBar。将AppBarLayout放在CoordinatorLayout中,就可以实现滚动效果。本例中,TabLayout在界面滚动时,随着Toolbar的逐渐隐藏,将占据Toolbar的位置,达到节省屏幕空间,界面动画效果的目的。--><android.support.design.widget.AppBarLayout
android:id="@+id/id_appbarlayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"><!--属性解析:app:theme:指定Toolbar的样式,包括ActionbarToggle和popupMenu的指示图标颜色app:popupTheme:指定popupMenu溢出后的样式app:title: 指定Toolbar中主Title的内容--><!--app:layout_scrollFlags的意思是:设置的layout_scrollFlags有如下几种选项:scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。exitUntilCollapsed: 当视图会在滚动时,它一直滚动到设置的minHeight时完全隐藏。需要注意的是,后面两种模式基本只有在CollapsingToolbarLayout才有用,而前面两种模式基本是需要一起使用的,也就是说,这些flag的使用场景,基本已经固定了。--><android.support.v7.widget.Toolbar
android:id="@+id/id_toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:layout_scrollFlags="scroll|enterAlways"app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"app:titleTextColor="@color/comm_white"app:title="@string/app_name" /><!--Tabs选项卡,和ViewPager搭配使用可以增大界面的内容展示量,实现各种个性化分类内容展示而不互相干扰!Google在Design support library中提供官方的Tab组件,它就是TabLayout。相比Github上面开源的第三方库,这个更加简单易用。有以下常用属性:app:tabGravity="fill" 表示TabLayout中的Tabs要占满屏幕的width;app:tabSelectedTextColor:Tab被选中字体的颜色;app:tabTextColor:Tab未被选中字体的颜色;app:tabIndicatorColor:Tab指示器下标的颜色;--><android.support.design.widget.TabLayout
android:id="@+id/id_tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"app:tabGravity="fill"app:tabIndicatorColor="@color/main_white"android:fillViewport="false" /></android.support.design.widget.AppBarLayout><!--我们常用的ViewPager,不多说了。你会发现多了一个 app:layout_behavior 属性,没错,如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果,那就必须在它下面的那个控件中加入这个属性,并且下面的这个控件必须是可滚动的。当设置了layout_behavior的控件滑动时,就会触发设置了layout_scrollFlags的控件发生状态的改变。--><android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_behavior="@string/appbar_scrolling_view_behavior" /><!--这是一个浮动按钮。由于FloatingActionButton是重写ImageView的,所有FloatingActionButton拥有ImageView的一切属性。属性介绍:app:backgroundTint : FAB的背景色。app:elevation :FAB的阴影效果。app:rippleColor :设置涟漪的颜色,默认是由背景色生成的暗色调,可以自己指定。app:pressedTranslationZ :FAB动画效果,在它被按下的时候阴影就会增大。--><android.support.design.widget.FloatingActionButton
android:id="@+id/id_floatingactionbutton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|end"android:layout_margin="16dp"android:src="@android:drawable/ic_menu_camera"app:rippleColor="@color/main_blue_dark" /></android.support.design.widget.CoordinatorLayout>
在布局文件的注释中,一些控件的属性已经说的很清楚了,Toolbar是继承自View,每个页面都有可能用到,所以可以像其他标准控件一样直接主布局文件添加Toolbar,为了提高Toolbar的重用效率,可以在layout中单独建议一个toolbar 的;
4、Java实现的核心代码:
package com.woyou.loveview;import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;import com.woyou.loveview.utils.SnackbarUtil;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {private DrawerLayout mDrawerLayout;private CoordinatorLayout mCoordinatorLayout;private AppBarLayout mAppBarLayout;private Toolbar mToolbar;private TabLayout mTabLayout;private ViewPager mViewPager;private FloatingActionButton mFloatingActionButton;private NavigationView mNavigationView;//TabLayout中的标题private String[] mTitles;//填充到ViewPager中Fragmentprivate List<Fragment> mFragments;//ViewPager的数据适配器@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化各种控件initViews();// 初始化数据initData();//初始化各种控件的设置、适配。initConfigViews();}private void initViews() {mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.id_coordinatorlayout);mAppBarLayout = (AppBarLayout) findViewById(R.id.id_appbarlayout);mToolbar = (Toolbar) findViewById(R.id.id_toolbar);mTabLayout = (TabLayout) findViewById(R.id.id_tablayout);mViewPager = (ViewPager) findViewById(R.id.id_viewpager);mFloatingActionButton = (FloatingActionButton) findViewById(R.id.id_floatingactionbutton);mNavigationView = (NavigationView) findViewById(R.id.id_navigationView);}private void initData() {//Tab的标题采用string-array的方法保存,在res/values/arrays.xml中写mTitles = this.getResources().getStringArray(R.array.tab_titles);//初始化填充到ViewPager中的Fragment集合mFragments = new ArrayList<>();for (int i = 0; i < mTitles.length; i++) {Bundle mBundle = new Bundle();mBundle.putInt("flag", i);MyFragment mMyFragment = new MyFragment();mMyFragment.setArguments(mBundle);mFragments.add(i, mMyFragment);}}private void initConfigViews() {//设置显示ToolbarsetSupportActionBar(mToolbar);// 设置Drawerlayout开关指示器,即Toolbar最左边的那个iconActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close);mActionBarDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);//给NavigationView填充顶部区域mNavigationView.inflateHeaderView(R.layout.header_nav);//给NavigationView填充菜单mNavigationView.inflateMenu(R.menu.menu_nav);onNavgationViewMenuItemSelected(mNavigationView);}//设置NavigationView中菜单的item的点击事件private void onNavgationViewMenuItemSelected(NavigationView mNav) {mNav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(MenuItem item) {String msgString="";switch (item.getItemId()){case R.id.nav_camera:msgString = (String) item.getTitle();break;case R.id.nav_gallery:msgString = (String) item.getTitle();break;case R.id.nav_slideshow:msgString = (String) item.getTitle();break;case R.id.nav_share:msgString = (String) item.getTitle();break;}// ment item点击后选中,并关闭Drawerlayoutitem.setChecked(true);mDrawerLayout.closeDrawers();//一个类似Toast的控件。SnackbarUtil.show(mViewPager,msgString,0);return true;}});}}
以上是核心代码,ViewPager等的一些控件没有使用到,我是准备实现其他效果的,最后还是觉得一步一步来吧~以上代码还有使用其他的辅助类的代码,具体的看Demo哦!
最后的效果如下:
Demo 下载地址:Toolbar + DrawerLayout
这篇关于Android控件之Toolbar + DrawerLayout的使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!