Material design基础1——菜单滑动界面

 

转载请注明出处：https://blog.csdn.net/weixin_40790006/article/details/80040129

注意：布局之间的依赖关系：collapsingtoolbarlayout依赖于appbarlayout依赖于coordinatorlayout

标题栏更改：style文件

 

android:theme="@style/AppTheme"

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

添加远程依赖：compile 'com.android.support:design:24.2.1' 和 compile 'de.hdodenhof:circleimageview:2.1.0' ；

 

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
        compile 'com.android.support:design:24.2.1'
        compile 'de.hdodenhof:circleimageview:2.1.0'

    })

XML文件：

引用的xml文件：NavigationView 所需要的

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="15dp"
    android:background="@drawable/psb">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circle_tx"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/tx"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/tv_autograph"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="35dp"
        android:layout_toRightOf="@+id/circle_tx"
        android:layout_alignTop="@+id/circle_tx"
        android:text="轻语"/>
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:layout_alignParentBottom="true"
        android:text="哇哈哈哈  Material Design "
        />
</RelativeLayout>

main:

 

<?xml version="1.0" encoding="utf-8"?>
<!--这个布局只有两个子项，第二个子项，layout_gravity 必须写,指定滑动的方向-->
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer"
    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"
    tools:context="com.example.f405.materialdesigntest.MainActivity">
   <!--加强版FrameLayout,可以监听其所有子控件的各种时间紧，做出最合理的响应-->
   <android.support.design.widget.CoordinatorLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
      <android.support.v7.widget.Toolbar
          android:id="@+id/toolBar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>

      <!--悬浮按钮-->
      <android.support.design.widget.FloatingActionButton
          android:id="@+id/floatButton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="bottom|end"
         android:layout_margin="20dp"
          android:src="@drawable/sure"/>
   </android.support.design.widget.CoordinatorLayout>
   <!--app,设定菜单布局；headerLayout，设定上面的布局-->
<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:menu="@menu/drawer_menu"
    app:headerLayout="@layout/header"
    ></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

menu文件：

toolBar关联的主菜单：

 

<?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">
    <!--showAsAction,指定显示的方式，
    always,永远显示在ToolBar中，
    never，永远显示在菜单中，
    ifRoom，空间足够显示在ToolBar,不够显示在菜单中
    -->
<item
    android:id="@+id/qi"
    android:icon="@drawable/qi"
    android:title="气球"
    app:showAsAction="always"
    />
    <item
        android:id="@+id/car"
        android:icon="@drawable/car"
        android:title="car"
        app:showAsAction="never"
        />
    <item
        android:id="@+id/hai"
        android:icon="@drawable/hai"
        android:title="hai"
        app:showAsAction="ifRoom"
        />

</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/vip"
    android:title="了解会员特权"
    android:icon="@drawable/vip"
    />
    <item
        android:id="@+id/wallet"
        android:title="钱包"
        android:icon="@drawable/wallet"
        />
    <item
        android:id="@+id/personality"
        android:title="个性装扮"
        android:icon="@drawable/personality"
        />
    <item
        android:id="@+id/collection"
        android:title="我的收藏"
        android:icon="@drawable/collection"
        />

    <item
        android:id="@+id/album"
        android:title="我的相册"
        android:icon="@drawable/album"
        />
    <item
        android:id="@+id/file"
        android:title="我的文件"
        android:icon="@drawable/file"
        />
    <item
        android:id="@+id/freeflow"
        android:title="面流量特权"
        android:icon="@drawable/freeflow"
        />
    </group>s
</menu>

Java文件：

 

package com.example.f405.materialdesigntest;

import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 初始化布局
        initView();
    }

    private void initView() {
        // init Toolbar,标题栏
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        // DrawerLayout,滑动布局
        drawer = (DrawerLayout) findViewById(R.id.drawer);
        ActionBar bar = getSupportActionBar();
        if (bar != null){
            bar.setDisplayHomeAsUpEnabled(true);
            bar.setHomeAsUpIndicator(R.drawable.set);
        }
        // NavigationView,滑动里的菜单配置
        NavigationView nav_view = (NavigationView) findViewById(R.id.nav_view);
        nav_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){

                    case R.id.vip:
                        Toast.makeText(MainActivity.this, "vip", Toast.LENGTH_SHORT).show();
                        break;

                    case R.id.wallet:
                        Toast.makeText(MainActivity.this, "wallet", Toast.LENGTH_SHORT).show();
                        break;

                    case R.id.personality:
                        Toast.makeText(MainActivity.this, "personality", Toast.LENGTH_SHORT).show();
                        break;

                    case R.id.collection:
                        Toast.makeText(MainActivity.this, "collection", Toast.LENGTH_SHORT).show();
                        break;

                    case R.id.album:
                        Toast.makeText(MainActivity.this, "album", Toast.LENGTH_SHORT).show();
                        break;

                    case R.id.file:
                        Toast.makeText(MainActivity.this, "file", Toast.LENGTH_SHORT).show();
                        break;

                    case R.id.freeflow:
                        Toast.makeText(MainActivity.this, "freeflow", Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });
        // 悬浮按钮
        FloatingActionButton floatButton = (FloatingActionButton) findViewById(R.id.floatButton);
        floatButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Snackbar,可交互的Toast
                Snackbar.make(v,"悬浮",Snackbar.LENGTH_INDEFINITE)
                        .setAction("nonono!", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, "ok,unDo", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });
    }


    // toolBar 与菜单栏结合
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){

            case R.id.qi:
                Toast.makeText(this, "qi", Toast.LENGTH_SHORT).show();
                break;

            case R.id.hai:
                Toast.makeText(this, "hai", Toast.LENGTH_SHORT).show();
                break;

            case R.id.car:
                Toast.makeText(this, "car", Toast.LENGTH_SHORT).show();
                break;

            case android.R.id.home:
                drawer.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }
}

实现效果：