第一行代码学习笔记——Material Design实战（1）

最新推荐文章于 2024-06-21 16:58:17 发布

14skyang

最新推荐文章于 2024-06-21 16:58:17 发布

阅读量612

点赞数

本文链接：https://blog.csdn.net/weixin_43115440/article/details/82878913

版权

Toolbar
在MD设计中，用ToolBar去取代ActionBar，首先要去style.xml中设置隐藏ActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

隐藏完毕，在activity_main.xml修改：

<FrameLayout 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.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"
    />
    </FrameLayout>

这边高度设置为actionBar的高度
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"可以使得Toolbar单独使用深色主题
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"单独将弹出的菜单项指定为淡色主题
修改MainActivity

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);
        setSupportActionBar(toolbar);//传入Toolbar实例，技能用Toolbar，又可以让它外观和功能与ActionBar一样

修改标题栏显示的文字：
在AndroidManifest.xml中的 android:label即可

<activity
            android:name=".MainActivity"
            android:label="Fruits"
            >

创建菜单按钮
准备好菜单图标图片作为图标icon放到drawable目录下，在res下新建menu文件夹，在menu文件夹下新建Menu resource file，创建一个toolbar.xml文件，并编写如下代码

<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:icon="@drawable/backup"
    android:title="上传"
    app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:icon="@drawable/delete"
        android:title="删除"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/setting"
        android:icon="@drawable/setting"
        android:title="设置"
        app:showAsAction="never"/>
</menu>

app:showAsAction有3个值可选：
1.always 永远显示在Toolbar中，如果屏幕空间不够则不显示
2.ifRoom 屏幕空间足够时显示在Toolbar中，不够空间则显示在菜单中
3.never 表示永远显示在菜单中
注：Toolbar的按钮只会显示图标，菜单中的按钮只会显示文字
增加MainActivity代码

 @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.backup:
                Toast.makeText(this, "你点击了上传", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "你点击了删除", Toast.LENGTH_SHORT).show();
                break;
            case  R.id.setting:
                Toast.makeText(this, "你点击了设置", Toast.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

滑动菜单

借助drawerLayout实现滑动菜单，drawerLayout是一个布局，在布局中允许放如主屏幕显示内容以及滑动菜单显示的内容
修改activity_main.xml的代码：

<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:id="@+id/drawer_layout"
      <FrameLayout
        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"
    />
    </FrameLayout>
    <!--layout_gravity="start"表示让DrawerLayout知道滑动菜单是在屏幕的左边left还是右边right，start表示根据系统语言方向判断    -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:textSize="30sp"
        android:background="#FFF"
        >
</android.support.v4.widget.DrawerLayout>

这样只能从屏幕的左边拉出来这个菜单，不过用户不一定知道有这么个菜单在左边隐藏，所以需要加个导航按钮来作为提示，点击了导航按钮也会滑出菜单
提前准备导航按钮的图片放到drawable文件夹下

更改MainActivity代码：

public class MainActivity extends AppCompatActivity {
//drawerLayout是一个布局，在布局中允许放入两个直接子控件，第一个控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容
    private DrawerLayout mDrawerLayout;
     @Override
    protected void onCreate(Bundle savedInstanceState) {
     ........
        mDrawerLayout =(DrawerLayout)findViewById(R.id.drawer_layout);
        ActionBar actionBar=getSupportActionBar();//得到ActionBar的实例，但是具体实现是由ToolBar来完成的
        if (actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);//显示导航按钮
            actionBar.setHomeAsUpIndicator(R.drawable.menu);//设置导航按钮的图标，即为toolbar最左边的按钮就叫做HomeAsUp，默认 的图标是一个返回的箭头，意味着返回上一个活动，在这里我们把它的默认样式和作用都做了修改
        }

  @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home://HomeAsUp按钮的id永远 都是android.R.id.home
                mDrawerLayout.openDrawer(GravityCompat.START);//调用DrawerLayout的openDrawer()的方法显示该滑动菜单，传入的参数表示保证这里的行为和XML中定义的一致
                break;
                ............

滑动菜单里只有一个TextView，太单调，还需要给自己定制布局进行美化：

NavigationView 将滑动菜单的页面的实现变得非常简单
第一步：需要在build.gradle中增加依赖
其中design的版本要和appcompat的版本一致

implementation 'com.android.support:design:27.1.1'
   implementation'de.hdodenhof:circleimageview:2.1.0'

de.hdodenhof:circleimageview相当于imageView那样使用，它可以轻松实现把图片圆形化。
第二步：准备menu和headerLayout
menu：用来在NavigationView中显示具体菜单项，headerLayout用来在NavigationView中显示头部布局
先把menu的图片准备好放在drawable目录下，在menu文件夹新建Menu resource file——nav_menu.xml 代码如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!--menu中嵌套一个一个group标签，group表示一个组，把group的checkableBehavior属性定为single表示组内所有菜单项只能单选    -->
<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_call"
        android:icon="@drawable/nav_call"
        android:title="打电话"
        />
    <item
        android:id="@+id/nav_friends"
        android:icon="@drawable/nav_friends"
        android:title="朋友"/>
    <item
        android:id="@+id/nav_location"
        android:icon="@drawable/nav_location"
        android:title="位置"/>
    <item
        android:id="@+id/nav_mail"
        android:icon="@drawable/nav_mail"
        android:title="邮件"/>
    <item
        android:id="@+id/nav_task"
        android:icon="@drawable/nav_task"
        android:title="任务"/>

</group>
</menu>

然后准备headerLayout，是一个自己定义的布局，在其中放进头像，用户名，邮箱地址。也找个头像图片放到drawerable文件夹，在layout文件夹下新建Layout resource file——nav_header.xml

<!--headerLayout是一个随意定制的布局，这里放头像，用户名，邮箱地址3个内容 -->
<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:id="@+id/icon_image"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:src="@drawable/nav_icon"
    android:layout_centerInParent="true"
    />
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="skyang1995@163.com"
        android:textColor="#fff"
        android:textSize="15sp"
        />
    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/username"
        android:text="ysk"
        android:textColor="#fff"
        android:textSize="15sp"
        />

</RelativeLayout>

搞完menu和headerLayout，就能用NavigationView了，
更改activity_main.xml

<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:id="@+id/drawer_layout"
   >
    <FrameLayout
        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"
    />
    </FrameLayout>
    <!--layout_gravity="start"表示让DrawerLayout知道滑动菜单是在屏幕的左边left还是右边right，start表示根据系统语言方向判断    -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        >

    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
把我们刚才准备的menu和headerLayout设置进去了。于是乎定义好了NavigationView

菜单项点击事件设置
更改MainActivity代码：

public class MainActivity extends AppCompatActivity {
//drawerLayout是一个布局，在布局中允许放入两个直接子控件，第一个控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//传入Toolbar实例，技能用Toolbar，又可以让它外观和功能与ActionBar一样
        mDrawerLayout =(DrawerLayout)findViewById(R.id.drawer_layout);
        ***NavigationView navView=(NavigationView)findViewById(R.id.nav_view) ;***
        ActionBar actionBar=getSupportActionBar();//得到ActionBar的实例，但是具体实现是由ToolBar来完成的
        if (actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);//显示导航按钮
            actionBar.setHomeAsUpIndicator(R.drawable.menu);//设置导航按钮的图标，即为toolbar最左边的按钮就叫做HomeAsUp，默认 的图标是一个返回的箭头，意味着返回上一个活动，在这里我们把它的默认样式和作用都做了修改
        }
        ***navView.setCheckedItem(R.id.nav_call);//将打电话菜单项默认选中
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //此处可以添加选中菜单项的逻辑
                mDrawerLayout.closeDrawers();//将滑动菜单关闭
                return true;
            }
        });***

    }
    .......................................