Android-Material Design布局之第一曲

来源：互联网发布：网络攻防交流平台编辑：程序博客网时间：2024/05/17 23:55

记录下所使用了的东西

使用的Android Studio
DrawerLayout 抽屉布局
NavigationView 配合抽屉使用的菜单分头部分和菜单部分
ActionBarDrawerToggle 用于监听抽屉
Toolbar 最上边的标题栏
AppBarLayout 包裹住标题栏，否则会下方内容会盖在Toolbar的上边
CollapsingToolbarLayout 设置标题的过渡样式用到
CoordinatorLayout 其design子控件的动画效果都要放在这里面才能
NestedScrollView 和Toolbar配合使用，实现上滑动是隐藏Toolbar
过去看教学视频

最终要实现的效果图

最终效果图

Android Design Support Library的导入

方法一：项目app目录下build.gradle文件中添加：compile ‘com.android.support:design:23.1.1’，如下图：
导入library1
方法二：项目右击 —> F12 —> app —> Dependencies —> +—> Library —> 选包 —> ok,如下图：
导入library2

创建导航抽屉，菜单使用NavigationView

头部分

最外层是一个垂直线性布局
添加了一个ImageView、两个TextView
代码简单就不详解了

菜单部分

写在menu文件夹中，格式和弹出菜单格式一样
代码如下：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_camera"            android:icon="@drawable/ic_menu_camera"            android:title="拍照" />        <item            android:id="@+id/nav_gallery"            android:icon="@drawable/ic_menu_gallery"            android:title="图片库" />        <item            android:id="@+id/nav_slideshow"            android:icon="@drawable/ic_menu_slideshow"            android:title="视频库" />        <item            android:id="@+id/nav_manage"            android:icon="@drawable/ic_menu_manage"            android:title="设置" />    </group>    <item android:title="其他">        <menu>            <item                android:id="@+id/nav_share"                android:icon="@drawable/ic_menu_share"                android:title="分享" />            <item                android:id="@+id/nav_send"                android:icon="@drawable/ic_menu_send"                android:title="发送" />        </menu>    </item></menu>

抽屉布局使用NavigationView代码

<?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:layout_width="match_parent"    android:layout_height="match_parent"

不让内容拉伸到状态栏

    android:fitsSystemWindows="false" >

Toolbar在下方分解

    <include        layout="@layout/bar"         android:layout_width="match_parent"        android:layout_height="match_parent" />    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"

不让内容拉伸到状态栏

        android:fitsSystemWindows="false"

添加头部布局

        app:headerLayout="@layout/nav_header_main"

添加菜单

        app:menu="@menu/activity_main_drawer"/> </android.support.v4.widget.DrawerLayout>

最后在Activity中添加事件监听

 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem item) {                int id = item.getItemId();                if (id == R.id.nav_camera) {                    // Handle the camera action                } else if (id == R.id.nav_gallery) {                } else if (id == R.id.nav_slideshow) {                } else if (id == R.id.nav_manage) {                } else if (id == R.id.nav_share) {                } else if (id == R.id.nav_send) {                }                //获得抽屉控件                DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);                //关闭抽屉                drawer.closeDrawer(GravityCompat.START);                return true;            }        });

最后去掉了标题栏

在styles.xml的应用样式中添加了

        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>        <item name="android:windowActionBar">false</item>        <item name="android:windowNoTitle">true</item>

现在的效果如果所示

抽屉+NavigationView效果图

添加一个Toolbar的布局bar.xml

使用了
- android.support.v7.widget.Toolbar 标题栏
- android.support.design.widget.AppBarLayout 向上滑动时隐藏标题栏，
- android.support.v4.widget.NestedScrollView 使底部超出范围后可以滑动
- android.support.design.widget.CoordinatorLayout 最外层布局，design下的控件动画效果都依赖于这个控件
布局如下

<?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">

③用AppBarLayout嵌套住Toolbar才能使NestedScrollView包裹住的内容处于Toolbar的下方

    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

①首先添加一个Toolbar
- app:layout_collapseMode=”pin”：确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部
- app:popupTheme：设置主题样式（在styles.xml中添加<style name=”AppTheme.PopupOverlay” parent=”ThemeOverlay.AppCompat.Light” />）
- app:layout_scrollFlags：设置标题栏的滑动的状态（scroll：可滑动；enterAlwaysCollapsed：下边内容拉到最顶时，才能下拉到标题栏;exitUntilCollapsed:和 android:minHeight=”10dp”连用，表示有10dp是不能隐藏的，不写minHeight时默认标题不隐藏）

        <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/AppTheme.PopupOverlay"            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"/>    </android.support.design.widget.AppBarLayout>

②若需要隐藏Toolbar就和NestedScrollView连用

    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <include layout="@layout/content_main" />    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

将Toolbar和抽屉布局在Activity中联系起来

详细代码

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        setSupportActionBar(toolbar);//设置标题栏        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem item) {                int id = item.getItemId();                if (id == R.id.nav_camera) {                    // Handle the camera action                } else if (id == R.id.nav_gallery) {                } else if (id == R.id.nav_slideshow) {                } else if (id == R.id.nav_manage) {                } else if (id == R.id.nav_share) {                } else if (id == R.id.nav_send) {                }                DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);                drawer.closeDrawer(GravityCompat.START);                return true;            }        });        //常和抽屉布局一起使用        //可以监听DrawerLayout的状态，添加后通过点击左上角图标也可显示或关闭抽屉        //参数二：抽屉布局；参数三：标题栏；参数四和参数五：抽屉打开和关闭的描述        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);        //为抽屉设置toggle监听        drawer.setDrawerListener(toggle);        //设置了这个才能显示左上角图标，该图标可以根据抽屉状态的变化过程而变化        toggle.syncState();    }        /**     *     * 单独获取Back键的按下事件     * 当抽屉是打开的时候就关闭     */    @Override    public void onBackPressed() {        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        if (drawer.isDrawerOpen(GravityCompat.START)) {            drawer.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }    //创建一个菜单搜索按钮，main.xml样式在下面    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.main, menu);        return super.onCreateOptionsMenu(menu);    }    //设置菜单按钮监听    @Override    public boolean onOptionsItemSelected(MenuItem item) {        int id = item.getItemId();        if (id == R.id.action_search) {            return true;        }        return super.onOptionsItemSelected(item);    }}

搜索按钮，main.xml的内容为

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_search"        android:actionViewClass="android.widget.SearchView"        android:title="搜索"        android:icon="@drawable/ic_search_24dp"        app:showAsAction="ifRoom" /></menu>

联合标题栏的显示效果

最后就是添加上图片到标题的过渡

就在Toolbar的外层套了一个CollapsingToolbarLayout
然后在其中添加一个ImageView
代码如下：

<?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"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.zn.mediaplayer.MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="300dp"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

在Toobar外层套了一个CollapsingToolbarLayout
将Toobar的layout_scrollFlags属性添加到CollapsingToolbarLayout的属性里
app:contentScrim=”#CAE7D9”：当图片隐藏，显示标题栏时候的背景颜色
app:expandedTitleMarginStart=”120dp”：设置显示的字体距离左侧120dp

        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:contentScrim="#CAE7D9"            app:expandedTitleMarginStart="120dp"            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

添加的过渡图片
android:scaleType=”fitXY”：按上下比例缩放
app:layout_collapseMode=”parallax”：当向上推动时图片的压缩模式(pin:图片直直的就上去了,如状态栏向上隐藏的动作；parallax:图片和上推状态会有相对的向下偏移，具体不好描述，自己体验(￣┰￣*)；)
app:layout_collapseParallaxMultiplier=”0.5”：这个就是设置上一个属性的偏移度

            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="fitXY"                android:src="@mipmap/mm"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.5" />            <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/AppTheme.PopupOverlay" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <include layout="@layout/content_main" />    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

最后在Activity中设置标题和字体颜色

       CollapsingToolbarLayout collapsing = (CollapsingToolbarLayout) findViewById(R.id.collapsing);       //设置标题显示的字        collapsing.setTitle("XUJIAJI");        //设置在还未划上标题栏的时候显示的字体颜色        collapsing.setExpandedTitleColor(0xff94E46D);

我要吐槽

放大镜矢量图形可以在as中直接创建，真方便(～￣▽￣)～
去掉标题栏的时候有加android的和没加的，如果不写不加android的在android5.0上没效果(。・・)ノ
ActionBarDrawerToggle用的是v7包下的，v4包下的不仅已经过时了，还没那么高大上<(￣v￣)/
将图片的app:layout_collapseParallaxMultiplier调到1以上，效果很明显，不信你试试。。。。
主题样式需要继承Theme.AppCompat.的样式，如：
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar"></style>

想说的话

博客坚持写，今后学习了新的东西就在这里记录一下，以便今后回顾，也希望小小笔记能帮助你们
若内容有什么地方不对、不清楚，还望吐槽，希望大家能一起成长
来一个：十年以后回首现在，是不是觉得一切跟浮云一样，是否是挥挥衣袖般的洒脱？

0 0