Android Design Support Library控件使用总结(二)

来源：互联网发布：网络支付平台有哪些编辑：程序博客网时间：2024/05/18 03:54

之前的控件总结第一部分讲过了CoordinatorLayout、CollapsingToolBarLayout、AppBarLayout。这一节来总结一下ToolBar、DrawerLayout、NavigationLayout的使用方法以及使用上遇到的一些问题及解决办法。

<?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.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content">            <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.AppBarLayout></android.support.design.widget.CoordinatorLayout>

看一下以上的xml代码，toolBar在xml中的配置很简单，高度使用的是？attr/actionBarSize系统values文件的一个属性，点进去发现是56dp（这个应该是Google推荐的高度吧）。下面我们看一下在Activity中的代码：

        mToolBar = findView(R.id.mToolBar);        mToolBar.setTitle("博客地址");        mToolBar.setTitleTextColor(Color.WHITE);        setSupportActionBar(mToolBar);        ActionBar actionBar = getSupportActionBar();        actionBar.setDisplayHomeAsUpEnabled(true);        //actionBar.setHomeAsUpIndicator(R.drawable.mycat);        mToolBar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                finish();            }        });

如上代码所示，在使用ToolBar的时候一定要调用setSupportActionBar( )这个方法，这样ToolBar才能取代原本已经过时的ActionBar,如果要给ToolBar设置标题的话，一定要在setSupportActionBar( )这个方法之前设置，否则不会产生效果。如果想在这个方法之后设置的话，就需要在getSupportActionBar(）方法之后利用得到的对象来进行设置。
这里写图片描述
大家可以看到，可以给它设置logo，设置标题，设置二级标题，设Menu等这里对这些方法不再赘述，需要具体说明的是这几个方法：

setDisplayHomeAsUpEnabled(true) 给左上角图标的左边加上一个返回的图标。
setDisplayShowHomeEnabled(true) 使左上角图标是否显示，如果设成false，则没有程序图标，仅仅就是个标题，否则，显示应用程序图标
setDisplayShowCustomEnabled(true) 使自定义的普通View能在title栏显示即actionBar.setCustomView能起作用
setHomeAsUpIndicator（Drawable indicator）修改返回图标的样式

代码的运行效果如下：
这里写图片描述
可以看到左上角有一个白色的箭头，其实默认是黑色的，我将他的颜色改成了白色。要改变箭头的颜色只需要在styles.xml中定义一个属性即可

<style name=""  parent="ThemeOverlay.AppCompat.Dark.ActionBar">      ....      <item name="colorControlNormal">@color/myColor</item>  </style>

setNavigationOnClickListener（）可以为这个箭头添加点击事件。

DrawerLayout

DrawerLayout是一个侧滑的抽屉菜单，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/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <!-- your content-->    <include layout="@layout/maint_content" />    <!-- the navigationMenu-->    <android.support.design.widget.NavigationView        android:id="@+id/navigationView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        app:menu="@layout/layout_menu"        /></android.support.v4.widget.DrawerLayout>

xml中的配置很简单，上面的是屏幕内的布局，二下面是侧滑菜单的布局。这里用到的是NavigationView(下面进行讲解)。一般我们可以使用DrawerLayout来做App的导航栏这样比较符合AndroidDesign，在Activity中的使用代码如下：

        toolbar = findView(R.id.toolbar);        drawer_layout = findView(R.id.drawer_layout);        setSupportActionBar(toolbar);        ActionBar actionBar = getSupportActionBar();        //注意该方法一定要在 mDrawerToggle.syncState()方法之前调用否则显示的箭头不会与drawerlayout同步        actionBar.setDisplayHomeAsUpEnabled(true);        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(                this, drawer_layout, toolbar,                R.string.navigation_drawer_open, R.string.navigation_drawer_close        );        drawer_layout.setDrawerListener(mDrawerToggle);        mDrawerToggle.syncState();//Toggle与drawerLayout状态一致

可以看到我使用了一个ActionBarDrawerToggle，使用它会使得原本左上角的返回按钮变成一个打开菜单的指示按钮，使用它的时候别忘了调用drawer_layout.setDrawerListener(mDrawerToggle)这个方法，这样才会与DrawerLayout关联，然后调用mDrawerToggle.syncState()会使得taggle的动画效果状态与drawerLayout的一致，效果图如下：
这里写图片描述
在创建ActionBarDrawerToggle这个对象的时候遇到了一点问题，就是构造方法最后两个参数提示不出来，我在StackOverFlow上找到了解决办法

在Strings.xml文件创建这两个条目即可。接下来讲一下NavigationLayout。

NavigationLayout

NavigationLayout大大简化了抽屉菜单的使用，其中NavigationView 中的 android:layout_gravity=”start” 属性来控制抽屉菜单从哪边滑出，一般“start ”从左边滑出，“end”从右边滑出。在这里重点说下两个属性：

app:headerLayout: 给NavigationView添加头部布局
app：menu：给NavigationView添加menu菜单布局

app:headerLayout布局如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:fresco="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="200dp"    android:background="@color/colorPrimary"    android:gravity="center"    android:orientation="vertical">    <com.facebook.drawee.view.SimpleDraweeView        android:id="@+id/my_pic"        android:layout_width="100dp"        android:layout_height="100dp"        android:scaleType="centerCrop"        fresco:roundAsCircle="true"        fresco:roundingBorderColor="@android:color/white"        fresco:roundingBorderWidth="2dp" />    <TextView        android:id="@+id/tv_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:text="斑斑啦啦啦啦啦"        android:textColor="@android:color/white"        android:textSize="18sp" /></LinearLayout>

pp：menu 布局如下：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <group        android:checkableBehavior="single"        android:title="Home items">        <item            android:id="@+id/nav_blog"            android:title="博客地址" />        <item            android:id="@+id/nav_ver"            android:title="版本信息" />        <item            android:id="@+id/nav_about"            android:title="关于我" />    </group>    <item android:title="Sub items">        <menu >            <item                android:id="@+id/sub_exit"                android:title="退出应用" />            <item                android:id="@+id/sub_switch"                android:title="切换主题" />        </menu>    </item></menu>

在Activity中给NavigationLayout设置选择监听：

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem item) {                switch (item.getItemId()) {                    //退出应用                    case R.id.sub_exit:                        finish();                        break;                    //切换主题                    case R.id.sub_switch:                        break;                    //博客地址                    case R.id.nav_blog:                        startActivity(new Intent(MainActivity.this, BlogActvity.class));                        break;                    //版本信息                    case R.id.nav_ver:                        break;                    //关于                    case R.id.nav_about:                        break;                }                item.setChecked(true);                drawer_layout.closeDrawers();                return true;            }        });

效果图如下，是不是觉得比使用ListView加适配器方便多了？
这里写图片描述
在使用它的时候也遇到了一个问题，对头布局里控件的一些操作在xml里不太好控制，例如在头布局里有点击事件或者其他的业务需求。这个时候我们可以不在xml中配置app:headerLayout，可以在JAVA代码中实现：

 navigationView = findView(R.id.navigationView);        View headerView = navigationView.inflateHeaderView(R.layout.header_layout);//nivigationViewJ加载headerView        my_pic = (SimpleDraweeView) headerView.findViewById(R.id.my_pic);        my_pic.setImageURI(Uri.parse("res:///" + R.drawable.header));//simpledraweeView加载本地图片

好了基本所有我用到的控件都介绍和总结完了，喵的终于写完了-。-

1 0