theme在res/style中定义
当前位置:   article > 正文

Material Design(一)_material design 1

material design 1

Material Design(一)

一.标题栏ToolBar

一个用来替代ActionBar的控件。

(1)隐藏原本的ActionBar

注册文件的application中有

android:theme="@style/AppTheme">
  • 1

theme在res/style中定义

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

有不同的可选值,带ActionBar就是在这里定义的.DarkActionBar是深色主题,

没有ActionBar可以这样 Theme.AppCompat.Light.NoActionBar和Theme.AppCompat.NoActionBar,有Light是浅色主题,陪衬颜色是深色,没有就是主体颜色是深色,陪衬颜色是浅色。这里有很多可选值,根据需求选择,什么透明窗口啥的都有。

(2)布局文件引进控件

 <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"
        ></androidx.appcompat.widget.Toolbar>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

(3)res目录下新建一个menu文件夹,然后新建menu,定义一个 菜单在顶部,丰富控件

<?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/backup"
    android:title="BackUp"
    android:icon="@drawable/ic_launcher_foreground"
    app:showAsAction="always"
    />
    <item
        android:id="@+id/delete"
        android:title="Delete"
        android:icon="@drawable/ic_launcher_foreground"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/setting"
        android:title="Setting"
        android:icon="@drawable/ic_launcher_foreground"
        app:showAsAction="withText"
        />
</menu>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

app:showAsAction指定按钮的显示位置。withText表示以文字形式显示在菜单中,屏幕不显示;always表示永远显示在Toolbar中,屏幕空间不够则不显示;ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话显示在菜单中;never表示永远显示在菜单中。

Toolbar中只显示图标,菜单中的Action按钮只显示文字

(4)把ToolBar设置一下,将菜单显示进去

然后继续在MainActivity中加入以下内容

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return super.onCreateOptionsMenu(menu);
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述

二.滑动菜单DrawerLayout

将一些菜单隐藏起来,不放在主屏幕上,通过滑动显示出来。

(1)通过DrawerLayout进行简单实现

DrawerLayout是一个布局,允许放入两个直接子控件,一个是主屏幕显示的内容,另一个是滑动菜单中显示的内容,定义一个布局

<?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"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<LinearLayout
    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"
        /></LinearLayout>
    <TextView
        android:id="@+id/drawerTextView"
        android:text="This is a menu"
        android:layout_gravity="start"
        android:background="#FFF"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.drawerlayout.widget.DrawerLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

这里主布局就是上面那个LinearLayout,滑动的部分是一个TextView,也可以是其他控件。这里layout_gravity属性很重要,一定要加,不然没有效果,可选值,left,right分别是从左向右和从右向左滑动,还有start,会根据系统语言判断,如果是从左向右语言,比如汉语英语就从左向右滑动,否则从右向左滑动。

(2)针对有的人不知道可以滑动,可以设置一个按钮来点击实现效果,在Toolbar中有自带的实现这一个功能的按钮叫HomeAsUp,它默认是一个返回箭头,返回上一个活动。

public class MainActivity extends AppCompatActivity {
    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout=(DrawerLayout)findViewById(R.id.drawerlayout);
        ActionBar actionBar=getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);
        }
    }

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

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

首先获取actionBar,这里是ToolBar实现的,ActionBar actionBar=getSupportActionBar();

然后具体设置一下

​ if(actionBar!=null){
​ actionBar.setDisplayHomeAsUpEnabled(true);
​ actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);
​ }

setDisplayHomeAsUpEnabled()让导航按钮显示出来

setHomeAsUpIndicator可以设置里面的图标然后重写onOptionsItemSelected()方法来实现这个按钮的点击事件,这个按钮的id永远都是android.R.id.home,然后调用drawerLayout.openDrawer(GravityCompat.START);把滑动菜单展示出来,传入一个Gravity参数,保证这里和XML中行为一致,传入GravityCompat.START。

在这里插入图片描述

三.NavigationView

优化滑动菜单界面。

(1)首先引进依赖

在这里可以引进最新Design Support依赖

https://developer.android.com/topic/libraries/support-library/packages#design

图片圆形化工具

https://github.com/hdodenhof/CircleimageView

implementation 'com.android.support:design:28.0.0'
implementation 'de.hdodenhof:circleimageview:3.0.0'
  • 1
  • 2

(2)准备一个menu,在NavigationView显示具体菜单项

<?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_call"
        android:title="Call"
        android:icon="@drawable/ic_launcher_foreground" />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Friends"
            android:id="@+id/nav_friends"
            />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Task"
            android:id="@+id/nav_task"
            />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Mail"
            android:id="@+id/nav_mail"
            />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Location"
            android:id="@+id/nav_location" />

    </group>

</menu>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

里面的checkableBehavior属性定义为single表示每个item只能单选。

再准备headerLayout在滑动页面中显示头部布局,自己随便定义一个就好

(3)修改DrawerLayout中的布局文件代码

<?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"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<LinearLayout
    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"
        /></LinearLayout>
   <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"
       app:headerLayout="@layout/headerlayout" />

</androidx.drawerlayout.widget.DrawerLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

(4)在MainActivity中添加以下代码

NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
        navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                drawerLayout.closeDrawers();
                return false;
            }
        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

navigationView.setCheckedItem(R.id.nav_call);设置默认选中选项call。接下来给它添加一个点击事件,这里点击任何菜单项都关闭滑动菜单。

在这里插入图片描述

四.悬浮按钮(FloatingActionButton)

Design Support一个控件,使用需要依赖,colorAccent作为按钮颜色。

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/floatingActionButton"
        android:layout_gravity="bottom|end"
        android:layout_margin="5dp"
        android:src="@drawable/ic_launcher_foreground"
        app:elevation="8dp"
        />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

elevation表示投影,数字越大,投影区域越大,颜色越浅。

然后在MainActivity中设置该按钮点击事件

FloatingActionButton floatingActionButton=(FloatingActionButton)findViewById(R.id.floatingActionButton);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"Clicked",Toast.LENGTH_SHORT).show();
            }
        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

五.SnackBar

类似于Toast的提示工具,在提示中加入一个交互按钮,点击按钮可以进行一些额外操作

 FloatingActionButton floatingActionButton=(FloatingActionButton)findViewById(R.id.floatingActionButton);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               // Toast.makeText(MainActivity.this,"Clicked",Toast.LENGTH_SHORT).show();
                Snackbar.make(view,"Data Delete",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this,"Data Restore",Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

不同的地方是Snackbar第一个参数是View,只要是当前页面任意一个View就可以,Snackbar会使用这个View自动查找最外层布局。

在这里插入图片描述

六.CoordinatorLayout

依然是Design Support里面的,是一个加强版FrameLayout,可以监听其所有子控件的各种事件,自动做出最为合理的相应。比如进行偏移,确保控件不会遮挡。

将之前项目的FrameLayout替换成CoordinatorLayout就可以了。

<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="?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/floatingActionButton"
        android:layout_gravity="bottom|end"
        android:layout_margin="5dp"
        android:src="@drawable/ic_launcher_foreground"
        app:elevation="8dp"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述
可以看到现在Snackbar弹出来的窗口与按钮不遮挡了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/97763
推荐阅读
相关标签