Toolbar 和 DrawerLayout 滑动菜单【转载】

如果声音不记得
171 阅读3分钟

Toolbar

还记得我们每次打开的程序的标题栏吗？那不是 tool bar 做的,那是 acti onbar 做的, Tool bar 可以说是

Acti onbar 的升级版了。 Tool bar 不仅有 Acti onbar 的所有功能,而且还更加灵活.

在themes 中将DarkActi onBar 改为 NoActi onBar ，再次运行就可以发现顶端的栏目不见了

 <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#8BD54A"
        app:logo="@mipmap/ss"
        app:menu="@menu/toolbar_item"
        app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
        app:subtitle="yes"
        app:subtitleTextColor="@color/black"
        app:title="today is sun"
        app:titleMarginStart="50dp"
        app:titleTextColor="@color/black">



    </androidx.appcompat.widget.Toolbar>

常用属性

属性                                       说明

app:navigationIcon             导航图标，一般情况下放回退按钮，点击退回上一个界面。

android:background               工具栏颜色

app:title                                      标题

app:titleTextColor                     标题文字颜色

app:titleMarginStart                标题与左侧间距

app:subtitle                                     子标题

app:subtitleTextColor                    子标题颜色

app:logo                                    工具栏logo

添加工具栏点击事件

给Toolbar加上id，我们就可以在java代码里获取并监听用户对工具栏图标的点击：

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
      
     

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              
                Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
            }
        });

4 溢出菜单

首先我们在res的menu目录中创建一个menu资源文件 toolbar_menu.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/toolbar_user"
    android:icon="@drawable/ic_baseline_account_circle_24"
    android:title="用户"
    app:showAsAction="never">
</item>
    <item android:id="@+id/toolbar_setting"
        android:icon="@drawable/ic_baseline_settings_24"
        android:title="设置"
        app:showAsAction="never">
    </item>

    <item android:id="@+id/toolbar_add"
        android:icon="@drawable/ic_baseline_add_24"
        android:title="其他"
        app:showAsAction="never">
    </item>


</menu>

在 toolbar中添加   app:menu="@menu/toolbar\_item"

2 DrawerLayout 滑动菜单

布局----在这个布局中允许放入两个直接子控件

屏幕中显示的内容

滑动菜单中显示的内容

<android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- 内容区 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="内容区"
                android:textSize="20sp"/>

            <Button
                android:id="@+id/btn_open_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="打开左边"/>

            <Button
                android:id="@+id/btn_open_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="打开右边"/>

        </LinearLayout>

        <!-- 左边菜单 -->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="260dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/drawer_header"
            app:menu="@menu/menu_drawer_left"/>

        <!-- 右边菜单 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="@color/black"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="20dp"
                android:text="右边菜单"
                android:textColor="@color/white"
                android:textSize="20sp"
                android:textStyle="bold"/>

            <Button
                android:id="@+id/btn_close_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="关闭"/>

        </LinearLayout>

    </android.support.v4.widget.DrawerLayout>
  • 外层是DrawerLayout，第一个子view是内容区，侧滑内容紧跟其后。
  • 侧滑内容可以有好几个
  • android:layout_gravity="end" 标识从左边还是右边滑出

点击Toolbar的图标弹出滑出菜单

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private DrawerLayout mDrawer;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        mDrawer = findViewById(R.id.mDrawer);
       

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mDrawer.openDrawer(GravityCompat.START);
                //Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
            }
        });

NavigationView

滑动窗口里面用TextView太丑了，尝试尝试NavigationView 1 .

引入开源项目 CircleImageView,可以轻松实现图片圆形化

dependencies {   ···   implementation ' de .hdodenhof : ci rcleimageview : 3 . 0 . 1 ' }

创建menu，作为滑动菜单 drawerlayout_men.xml

<?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/call"
            android:icon="@drawable/ic_baseline_add_24"
           android:title="打电话" >

        </item>
        <item
            android:icon="@drawable/ic_baseline_settings_24"
            android:id="@+id/navFriend"
            android:title="朋友" >

        </item>

        <item
            android:icon="@drawable/ic_baseline_account_circle_24"
            android:id="@+id/navLocation"
            android:title="位置" >

        </item>

</group>
</menu>

3. 在layout创建headerLayout nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="198dp"
    android:background="@color/teal_200"
    android:padding="10dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconImage"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/a" />

    <TextView

        android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
        android:layout_height="wrap_content"
        android:layout_below="@+id/iconImage"
        android:text="平安是福"
       android:id="@+id/aa"
        android:layout_marginTop="15dp"
    android:textSize="20dp"
       >


    </TextView>
</RelativeLayout>

. 修改基本框架

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

FloatingActionButton 悬浮按钮和可交互提示

基本框架

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

Snackbar

Toast提示是不是有点拉，可以用Snackbar提示。 但是Toast并非是不如Snackbar，他们有不同的应用场景。

Toast只能告诉用户现在发生了什么事情，用户只能被动接收这件事情。

Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一些额外的逻辑 操作

 public void onClick(View view) {
                Snackbar.make(view, "是否要删除数据", Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "恢复数据", Toast.LENGTH_SHORT).show();
                    }

                }).show();

CoordinatorLayout

但是此时我们会发现Snackbar弹出的时候会把悬浮按钮遮住，但是这个问题我们可以用

CoordinatorLayout解决

CoordinatorLayout可以是一种加强版的FrameLayout(帧布局) CoordinatorLayout会监听所有子控件的各种事件，并且自动帮助我们做出最为合理的响应

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:orientation="vertical"
    android:id="@+id/mDrawer"
    tools:context=".MainActivity">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    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="60dp"
        android:background="#8BD54A"
        app:logo="@mipmap/ss"
        app:menu="@menu/toolbar_item"
        app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
        app:subtitle="yes"
        app:subtitleTextColor="@color/black"
        app:title="today is sun"
        app:titleMarginStart="50dp"
        app:titleTextColor="@color/black">



    </androidx.appcompat.widget.Toolbar>

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

其实就是把原本的FrameLayout布局改成了androidx.coordinatorlayout.widget.CoordinatorLayout就 行了 效果就是当点击悬浮按钮Snackbar出现的时候，悬浮按钮会上移来适应Snackbar是自己不会被

Snackbar遮住

但是Snackbar并不是CoordinatorLayout的子控件，而是DrawerLayout的子控件,为什么也能成功 呢?

是因为Snackbar.make()传入了一个view,这是用来指定Snackbar是哪个View触发的，所以传入的是悬浮 按钮控件本身，悬浮按钮控件是CoordinatorLayout的子控件，所以能成功

本文转自 blog.csdn.net/heqiang260/…，如有侵权，请联系删除。

avatar
文章
阅读
粉丝