码迷,mamicode.com
首页 > 其他好文 > 详细

Material Design: NavigationView FlaotingActionBar SnackBar采用

时间:2015-10-04 15:59:43      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:

转载 请明确说明 MingsangAndroid

本文介绍了Design Support Library的引入 拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar..).今天则重点介绍当中三个控件:NavigationView和 FloatingActionBar以及 SnackBar的基本使用方法。

本文代码地址:DesignSupportDemo

为了便于各位练习,这是代码中会用到的全部图片素材 图片素材.zip

作为三者的综合练习,我们终于要实现的效果:

技术分享

1。NavigationView

在未引入Design Support Library曾经,想想我们要实现上面的导航效果。须要怎么做?

我们须要在DrawerLayout里面通过ListView来设置导航条目。然后通过设置ListView的ItemOnclickListener设置相应的点击事件;事实上NavigationView的源代码也是通过这样的方式实现的,唯一复杂的地方就是ListView里的Item非常多时候视图并不一样。

但我们今天的主角是NavigationView,所以就不展开讲这样的实现方法了,对通过ListView实现有兴趣的能够參考以下两篇文章:

Android 自己实现 NavigationView [Design Support Library(1)]

Android Sliding Menu using Navigation Drawer

官方引入的NavigationView有什么优点

它主要是将这部分的布局简化了,通过NavigationView中的app:headerLayoutapp:menu属性将側换导航中的头部和菜单布局分离出来(如图):

技术分享

所以它的原理非常easy,我们首先须要一个主布局,然后须要为headerLayout以及menu布局,然后在代码中通过NavigationView的setNavigationItemSelectedListener()设置点击各个menu相应的响应事件。

理解了上面所说,我们来完毕上述效果:

1.引入Design Support Library

怎样下载更新Design Support Library上篇文章中讲过。不再赘述:拥抱Android Design Support Library新变化(导航视图、悬浮ActionBar..)

build.gradle中加入:

    compile com.android.support:design:22.2.0

2.完毕布局res/layout/activity_main.xml

<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_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <!-- 主界面-->
    <RelativeLayout
        android:id="@+id/parent_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/image"
            android:src="@mipmap/bg_default"
            android:layout_centerInParent="true"
            android:padding="5dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </RelativeLayout>

    <!-- 側滑导航-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_gravity="start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer_menu"/>

    </android.support.v4.widget.DrawerLayout>

headerLayout布局res/layout/drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@mipmap/bg_header"
    android:paddingLeft="20dp"
    android:paddingBottom="15dp"
    android:layout_width="match_parent"
    android:layout_height="180dp">
    <ImageView
        android:id="@+id/photo"
        android:src="@mipmap/photo"
        android:layout_above="@+id/desc"
        android:layout_marginBottom="20dp"
        android:layout_width="80dp"
        android:layout_height="80dp" />
    <TextView
        android:id="@+id/desc"
        android:layout_alignParentBottom="true"
        android:text="欢迎关注个人博客 明桑Android"
        android:textStyle="bold"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:layout_marginBottom="2dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    </RelativeLayout>

menu的布局:

res/menu/drawer_menu.xml

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item android:id="@+id/navigation_item1"
            android:checkable="true"
            android:title="热门图片"
            android:icon="@mipmap/icon_hot"/>
        <item android:id="@+id/navigation_item2"
            android:checkable="true"
            android:title="联系人"
            android:icon="@mipmap/icon_people"/>
        <item android:id="@+id/navigation_item3"
            android:checkable="true"
            android:title="图库"
            android:icon="@mipmap/icon_photos"/>
    </group>
    <item android:id="@+id/navigation_sub"
        android:title="新增功能">
        <menu>
            <item android:id="@+id/navigation_sub_item1"
                android:checkable="true"
                android:title="地图导航"
                android:icon="@mipmap/icon_local"/>
            <item android:id="@+id/navigation_sub_item2"
                android:checkable="true"
                android:title="近期热门"
                android:icon="@mipmap/icon_event"/>
            <item android:id="@+id/navigation_sub_item3"
                android:checkable="true"
                android:title="社交圈子"
                android:icon="@mipmap/icon_communities"/>
        </menu>
    </item>
    </menu>

3.设置Theme:编辑res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="DemoTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#38A4DE</item>
        <item name="colorPrimaryDark">#1B88CA</item>
        <item name="colorAccent">#1B88CA</item>
    </style>
</resources>

至于colorPrimary,colorPrimaryDark。以及colorAccent属性各代表什么含义,我偏不说,大家最好还是给每一个设置不同的颜色值,然后看看有什么变化。你就明确它们所代表的意义了,O(∩_∩)O~

之后在Manifest.xml中将当前主题设置为DemoTheme

<application ...
    android:theme="@style/DemoTheme" >

4.为NavigationView加入事件监听:如今我们已经完毕上面的布局效果了,然后须要在MainActivity中为NavigationView加入响应事件:

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private DrawerLayout drawerLayout;
    private ImageView imageView;
    private NavigationView navigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
        imageView= (ImageView) findViewById(R.id.image);
        navigationView= (NavigationView) findViewById(R.id.navigation);


        //navigationView选中Item处理,为了代码整齐些,就放在一个函数里了
        handNavigationView();

    }

    private void handNavigationView() {
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            //用于辨别此前是否已有选中条目
            MenuItem preMenuItem;
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {

                //首先将选中条目变为选中状态 即checked为true,后关闭Drawer,曾经选中的Item须要变为未选中状态
                if(preMenuItem!=null)
                    preMenuItem.setChecked(false);
                menuItem.setChecked(true);
                drawerLayout.closeDrawers();
                preMenuItem=menuItem;

                //不同item相应不同图片
                switch (menuItem.getItemId()){
                    case R.id.navigation_item1:
                        imageView.setImageResource(R.mipmap.bg_one);
                        break;
                    case R.id.navigation_item2:
                        imageView.setImageResource(R.mipmap.bg_two);
                        break;
                    case R.id.navigation_item3:
                        imageView.setImageResource(R.mipmap.bg_three);
                        break;
                    case R.id.navigation_sub_item1:
                        imageView.setImageResource(R.mipmap.bg_four);
                        break;
                    case R.id.navigation_sub_item2:
                        imageView.setImageResource(R.mipmap.bg_five);
                        break;
                    case R.id.navigation_sub_item3:
                        imageView.setImageResource(R.mipmap.bg_default);
                        break;
                }
                return true;
            }
        });
    }
}

完毕效果

技术分享

2,FloatingActionBar(FAB)

FlaotingActionBar继承自ImageView。除了继承自ImageView的属性。它自身还有些跟动画、阴影相关的属性;重点熟悉下以下几个属性:

  fabSize="normal|mini" //FloatingActionBar的两种大小

技术分享

   rippleColor="" //按下状态的波纹颜色

比方设置成白色:

技术分享

elevation="6dp"
pressedTranslationZ="12dp"
backgroundTint="#ffffff"

evelation用来显示阴影,pressedTranslationZ用来控制按下状态阴影的变化;backgroundTint用来填充背景颜色;

borderWidth="0dp"

这个属性非常关键,由于假设你不设置这个属性等于0dp,默认情况下borderWidth会将阴影遮挡住,你就看不到阴影了,看起来FloatingActionBar就不Floating了,而像贴上去的。

like this

技术分享

关于Floating Action Menuandroid-floating-action-button这是一个非常流行的第三方库,实现的是弹出效果,有兴趣的能够研究下!

技术分享

我们这次简单模仿下,只是仅仅是通过点击下方FAB显示其他两个FAB。没有考虑弹出动画等效果。

FAB的事件监听非常easy,通过OnClickListener()就可以。

以下是详细实现步骤。

1.在主界面布局中res/layout/activity.xml中加入FloatingActionBar:总共三个FAB,刚開始我们让其他两个FAB不显示(通过Visibility=”gone”

<android.support.v4.widget.DrawerLayout
    ...>

    <!-- 主界面-->
    <RelativeLayout
        ...>

        <ImageView
            ... />

        <!-- FloatingActonBar-->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_add_white_24dp"
            app:fabSize="normal"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="70dp"
            android:layout_marginRight="20dp"
            app:rippleColor="#79BD4C"
            app:elevation="6dp"
            app:borderWidth="0dp"
            app:pressedTranslationZ="12dp"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_local"
            android:visibility="gone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_room_white_24dp"
            app:fabSize="normal"
            android:layout_above="@+id/fab"
            android:layout_marginBottom="20dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            app:backgroundTint="#79BD4C"
            app:rippleColor="#ffffff"
            app:elevation="6dp"
            app:borderWidth="0dp"
            app:pressedTranslationZ="12dp"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_favorite"
            android:visibility="gone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_favorite_white_24dp"
            app:fabSize="normal"
            android:layout_above="@+id/fab_local"
            android:layout_marginBottom="20dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            app:backgroundTint="#FF4081"
            app:rippleColor="#ffffff"
            app:elevation="6dp"
            app:borderWidth="0dp"
            app:pressedTranslationZ="12dp"/>

    </RelativeLayout>

    <!-- 側滑导航-->
    <android.support.design.widget.NavigationView
        .../>

</android.support.v4.widget.DrawerLayout>

2.完毕MainActivity部分:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    ...
    private FloatingActionButton fab,fabLocal,fabFavorite;
    //标识FloatingActionBar的打开状态
    private  int FAB_STATE=1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ....

        fab= (FloatingActionButton) findViewById(R.id.fab);
        fabLocal= (FloatingActionButton) findViewById(R.id.fab_local);
        fabFavorite= (FloatingActionButton) findViewById(R.id.fab_favorite);

        fab.setOnClickListener(this);
        fabLocal.setOnClickListener(this);
        fabFavorite.setOnClickListener(this);

    }


    /**
     * Called when a view has been clicked.
     *
     * @param v The view that was clicked.
     */
    @Override
    public void onClick(View v) {
        switch(v.getId()){

    //            点击fab弹出上面两个FAB,通过FAB_STATE推断当前fab的打开状态
            case R.id.fab:
                //假设没有打开。则弹出
                if(FAB_STATE==1){
                    fab.setImageResource(R.mipmap.ic_clear_white_24dp);
                    fabLocal.setVisibility(View.VISIBLE);
                    fabFavorite.setVisibility(View.VISIBLE);
                    FAB_STATE=0;
                    break;
                }
                //已经在打开状态,则关闭
                if(FAB_STATE==0){
                    fab.setImageResource(R.mipmap.ic_add_white_24dp);
                    fabLocal.setVisibility(View.GONE);
                    fabFavorite.setVisibility(View.GONE);
                    FAB_STATE=1;
                    break;
                }
                break;
            case R.id.fab_local:
                //弹出SnackBar。


                break;
            case R.id.fab_favorite:

                break;
        }
    }

}

实现效果

技术分享

3,SnackBar

SnackBar的使用非常easy,仅仅只是比Toast多了个Action监听,能够在未到消失时间之前通过用户点击而撤销。假设你对Toast的使用也不熟悉能够看看我曾经写的这篇文章:

Android消息提示:AlertDialog、Toast、Notification的使用

//Snackbarmake(View view, CharSequence text, int duration)
    第一个參数代表父布局,第二个代表显示的文本消息,第三个參数代表显示时长
    //Snackbar.setAction(CharSequence text, View.OnClickListener listener)
    第一个參数代表Action显示的文本,第二个參数代表动作监听
    //能够通过setActionTextColor()设置Action文本颜色。假设不设置,默认颜色跟当前主题有关


Snackbar.make(parentLayout,"你点击了FAB_LOCAL",Snackbar.LENGTH_LONG)
                        .setAction("换个美女", new View.OnClickListener() {
                    @Override
                     public void onClick(View v) {
                      //这里的单击事件代表点击消除Action后的响应事件,比方换掉背景图片
                                imageView.setImageResource(R.mipmap.bg_six);
                            }
                        })
                        .show();

显示效果:

技术分享

4,完毕我们的练习

综上我们已经掌握了NavigationViewFloatingActionBar Snakcbar的基本使用方法,能够完毕我们终于的效果了:

MainActivity.java完整代码:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private DrawerLayout drawerLayout;
    private RelativeLayout parentLayout;
    private FloatingActionButton fab,fabLocal,fabFavorite;
    private ImageView imageView;
    private NavigationView navigationView;

    //标识FloatingActionBar的打开状态
    private  int FAB_STATE=1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
        parentLayout= (RelativeLayout) findViewById(R.id.parent_layout);
        imageView= (ImageView) findViewById(R.id.image);
        fab= (FloatingActionButton) findViewById(R.id.fab);
        fabLocal= (FloatingActionButton) findViewById(R.id.fab_local);
        fabFavorite= (FloatingActionButton) findViewById(R.id.fab_favorite);
        navigationView= (NavigationView) findViewById(R.id.navigation);


        //navigationView选中Item处理,为了代码整齐些,就放在一个函数里了
        handNavigationView();

        fab.setOnClickListener(this);
        fabLocal.setOnClickListener(this);
        fabFavorite.setOnClickListener(this);

    }

    private void handNavigationView() {
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            //用于辨别此前是否已有选中条目
            MenuItem preMenuItem;
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {

                //首先将选中条目变为选中状态 即checked为true,后关闭Drawer,曾经选中的Item须要变为未选中状态
                if(preMenuItem!=null)
                    preMenuItem.setChecked(false);
                menuItem.setChecked(true);
                drawerLayout.closeDrawers();
                preMenuItem=menuItem;

                //不同item相应不同图片
                switch (menuItem.getItemId()){
                    case R.id.navigation_item1:
                        imageView.setImageResource(R.mipmap.bg_one);
                        break;
                    case R.id.navigation_item2:
                        imageView.setImageResource(R.mipmap.bg_two);
                        break;
                    case R.id.navigation_item3:
                        imageView.setImageResource(R.mipmap.bg_three);
                        break;
                    case R.id.navigation_sub_item1:
                        imageView.setImageResource(R.mipmap.bg_four);
                        break;
                    case R.id.navigation_sub_item2:
                        imageView.setImageResource(R.mipmap.bg_five);
                        break;
                    case R.id.navigation_sub_item3:
                        imageView.setImageResource(R.mipmap.bg_default);
                        break;
                }
                return true;
            }
        });
    }


    /**
     * Called when a view has been clicked.
     *
     * @param v The view that was clicked.
     */
    @Override
    public void onClick(View v) {
        switch(v.getId()){

    //            点击fab弹出上面两个FAB,通过FAB_STATE推断当前fab的打开状态
            case R.id.fab:
                //假设没有打开,则弹出
                if(FAB_STATE==1){
                    fab.setImageResource(R.mipmap.ic_clear_white_24dp);
                    fabLocal.setVisibility(View.VISIBLE);
                    fabFavorite.setVisibility(View.VISIBLE);
                    FAB_STATE=0;
                    break;
                }
                //已经在打开状态,则关闭
                if(FAB_STATE==0){
                    fab.setImageResource(R.mipmap.ic_add_white_24dp);
                    fabLocal.setVisibility(View.GONE);
                    fabFavorite.setVisibility(View.GONE);
                    FAB_STATE=1;
                    break;
                }
                break;
            case R.id.fab_local:
                //弹出SnackBar,仅仅显示文字消息的SnackBar

                //注意第一个參数,须要一个合适的父视图
                Snackbar.make(parentLayout,"你点击了FAB_LOCAL",Snackbar.LENGTH_LONG)
                        .setAction("换个美女", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                //这里的单击事件代表点击消除按钮后的响应事件。比方换掉背景图片
                                imageView.setImageResource(R.mipmap.bg_six);
                            }
                        })
                        .show();
                break;
            case R.id.fab_favorite:
                //设置字体颜色
                Snackbar.make(parentLayout,"你点击了FAB_FAVORITE",Snackbar.LENGTH_LONG)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                //
                            }
                        }).setActionTextColor(R.color.action_text_color)
                        .show();
                break;
        }
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main,menu);
        return super.onCreateOptionsMenu(menu);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return super.onOptionsItemSelected(item);
    }
}

总结:

简介了官方在Design Support Library中引入的NavigationView FloatingActionBar SnackBar控件的的使用方法,后面还将继续介绍新增的其他视图和控件。各个控件的高级属性和使用方法还需大家自己去研究。在以后的使用中尽量多引入Material Design,多參考官方文档和博客。

參考资料:

Android Design Support Library

Design Support Library (II): Floating Action Button

Defining Custom Animations


技术分享

版权声明:本文博主原创文章,博客,未经同意不得转载。

Material Design: NavigationView FlaotingActionBar SnackBar采用

标签:

原文地址:http://www.cnblogs.com/gcczhongduan/p/4854591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!