Toolbar的使用+DrawerLayout的使用+NavigationView的使用+悬浮按钮和可交互提示使用的综合案例

**

话不多说直接看代码

**

1.styles.xml

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

2.activity_main.xml

  <!-- DrawerLayout是一个布局,在布局中允许放入两个直接子控件,
    第一个子控件是主屏幕中显示的内容,第二个子控件是滑动菜单
    中显示的内容-->

    <androidx.drawerlayout.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">

        <!--CoordinatorLayout是加强版的FrameLayout,因此替换不会有任何的副作用,
        CoordinatorLayout可以监听其所有子控件的各种事件,然后自动帮助我们做出最为合理的响应-->

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.appcompat.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"/>

            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/fab"
                android:layout_gravity="bottom|end"
                android:layout_margin="16dp"
                android:src="@drawable/done"/>

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

       <!-- <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:text="This is menu"
            android:textSize="30sp"
            android:background="#fff"/>-->
      <!--  layout_gravity这个属性是必须指定的,指定left表示滑动菜单在左边,right在右边,start表示会根据系统语言进行判断-->

        <com.google.android.material.navigation.NavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/nav_view"
            android:layout_gravity="start"
            app:menu="@menu/nav_menu"
            app:headerLayout="@layout/nav_header"/>

    </androidx.drawerlayout.widget.DrawerLayout>

3.toolbar.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

   <!-- always表示永远显示在Toolbar中,如果屏幕空间不够则不显示,
    ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够就显示在菜单栏中,
    never则表示永远显示在菜单中-->

    <item
        android:id="@+id/backup"
        android:icon="@drawable/backup"
        android:title="Backup"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@drawable/delete"
        android:title="Title"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/settings"
        android:icon="@drawable/settings"
        android:title="Settings"
        app:showAsAction="never"/>

</menu>

4.nav_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single"/>
    <!--group表示一个组,checkableBehavior="single"表示组中的菜单项只能单选-->

    <item
        android:id="@+id/nav_call"
        android:icon="@drawable/call"
        android:title="Title"/>

    <item
        android:id="@+id/nav_friends"
        android:icon="@drawable/friends"
        android:title="Friends"/>

    <item
        android:id="@+id/nav_location"
        android:icon="@drawable/location"
        android:title="Location"/>

    <item
        android:id="@+id/nav_mail"
        android:icon="@drawable/email"
        android:title="Mail"/>

    <item
        android:id="@+id/nav_task"
        android:icon="@drawable/tasks"
        android:title="Tasks"/>

</menu>

5.nav_header.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/icon_image"
        android:src="@drawable/animal"
        android:layout_centerInParent="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mail"
        android:layout_alignParentBottom="true"
        android:text="1214083854@qq.com"
        android:textColor="#fff"
        android:textSize="14sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:layout_above="@+id/mail"
        android:text="Tony Green"
        android:textColor="#fff"
        android:textSize="14sp"/>

</RelativeLayout>

6.MainActivity

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mdrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /***
         * 注意Toolbar的包不要导错,是import androidx.appcompat.widget.Toolbar;
         * 而不是import android.widget.Toolbar
         */
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        mdrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /***Snackbar用法与Toast相似,只不过可以额外增加一个按钮的点击事件
                 *
                 */
                Snackbar.make(v,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"FAB cliked",Toast.LENGTH_SHORT).show();
                    }
                })
                        .show();
            }
        });

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);  //让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.drawable.minicaidan); //设置导航按钮图标
        }

        navigationView.setCheckedItem(R.id.nav_call); //将Call菜单项设置为默认选中
        /***
         * 调用setNavigationItemSelectedListener()方法来设置一个菜单选项中事件的监听器,当用户点击了任意菜单项时
         * 就会回调到onNavigationItemSelected()方法中,我们可以在这个方法中写相应的逻辑处理,
         * 这里我只调用了DrawerLayout的closeDrawers()方法将滑动菜单关闭
         */
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                mdrawerLayout.closeDrawers();
                return true;
            }
        });
    }

    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:  //HomeAsUp按钮的id永远都是android.R.id.home
                mdrawerLayout.openDrawer(GravityCompat.START);  //让滑动菜单显示出来,Gravity参数保持和XML定义的一样传入GravityCompat.START
                break;
            case R.id.backup:
                Toast.makeText(this,"You clicked Backup",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"You clicked Delete",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"You clicked Settings",Toast.LENGTH_SHORT).show();
                break;
                default:
        }
        return true;
    }
}

提示:NavigationView需要添加的依赖:

 implementation 'com.android.support:design:29.0.3'    此依赖更具自己的版本添加
    implementation 'de.hdodenhof:circleimageview:2.1.0'  此依赖实现图片圆形化功能

结语:总的来说代码中的注释还是比较清楚的,可以轻松理解其功能

Toolbar的使用+DrawerLayout的使用+NavigationView的使用+悬浮按钮和可交互提示使用的综合案例
Toolbar的使用+DrawerLayout的使用+NavigationView的使用+悬浮按钮和可交互提示使用的综合案例
Toolbar的使用+DrawerLayout的使用+NavigationView的使用+悬浮按钮和可交互提示使用的综合案例
Toolbar的使用+DrawerLayout的使用+NavigationView的使用+悬浮按钮和可交互提示使用的综合案例

上一篇:java开发中的23中设计模式详解--大话设计模式


下一篇:网易音乐API搜索歌曲中文转码