android material design之Toolbar(一)

时间:2021-12-02 05:28:29

我的项目源码托管地址:点击打开我的项目源码地址


这里面会讲一些通用的,但是未涉及到个例,因为后续一系列的md的base都是基于此实现的

不知道大家的习惯是什么,除去一些统一的init放在application中,比如fragment,activity我都习惯写个base,不想当代码搬运工所以懒人有懒办法

我的这一系列项目都是依据basicactivity这个模板建的,在这大体说一下模板内容,以及一些坑,先看一下xml吧,模板默认建两个xml,可以简单理解为父子,其中coordinatorlayout这货作用挺大的,而且有些效果必须要让他做父

就拿base来举例子activity_base.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.fanyafeng.materialdesign.BaseActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <TextView
                android:id="@+id/toolbar_center_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center" />
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_base" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
然后看content_base.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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_base"
    tools:context="com.fanyafeng.materialdesign.BaseActivity">

    <TextView
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
你可能感觉xml基本就这点玩意,可是还没有完,真的还没有完,还有挺重要的menu

<menu 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"
    tools:context="com.fanyafeng.materialdesign.BaseActivity" >
    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />
</menu>
这里简单说一下如果项目中没有拿toolbar作为项目所有的头bar那你可以不用关注这个,但是如果用的话还是很重要的,后文有专门讲解这个

再来看最重要的baseactivity

package com.fanyafeng.materialdesign;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

import com.fanyafeng.materialdesign.R;

import java.util.Objects;

public class BaseActivity extends AppCompatActivity implements View.OnClickListener {
    protected Toolbar toolbar;
    protected FloatingActionButton fab;
    protected TextView toolbar_center_title;
    protected boolean isShowToolbar = true;
    protected boolean isSetNavigationIcon = true;
    protected boolean isSetLogo = false;
    protected boolean isShowEmail = true;
    protected String title;
    protected String centertitle;
    protected String subtitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }


    @Override
    public void onClick(View v) {

    }

    @Override
    protected void onResume() {
        super.onResume();
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar_center_title = (TextView) findViewById(R.id.toolbar_center_title);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        if (toolbar != null) {
            if (isShowToolbar) {
                setSupportActionBar(toolbar);
            } else {
                toolbar.setVisibility(View.GONE);
            }

            if (title != null && !title.equals("")) {
                toolbar.setTitle(title);
            }

            if (subtitle != null && !subtitle.equals("")) {
                toolbar.setSubtitle(subtitle);
            }
            if (isSetNavigationIcon) {
//                由于要兼容低版本,所以采用这个划杠的方法
                toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.back));
                toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        finish();
                    }
                });
            }
            if (isSetLogo) {
                toolbar.setLogo(getResources().getDrawable(R.drawable.menu));
            }

            if (toolbar_center_title != null) {
                if (centertitle != null && !centertitle.equals("")) {
                    toolbar_center_title.setText(centertitle);
                } else {
                    toolbar_center_title.setText("");
                }

            }

        }

        if (fab != null) {
            fab.setVisibility(isShowEmail ? View.VISIBLE : View.GONE);
        }

    }

}
在这里为了代码的简洁我注释掉了两个重写方法,如果用menu的话还是很重要的,后文会明确讲到,来看一下定义以及作用

toolbar这个不用说了就是所有的子类的toolbar,而且注意是修饰符是protected

fab是floatactionbutton

toolbar_center_title这个是标题,不是toolbar自带的,而且可以自定义位置的,原来我也用actionbar并且写过类似的,博客历史中有,但是没有应用到实际项目中,因为局限性太大,可是toolbar相对灵活许多,并且在项目用运用的很好

剩下的几个字段顾名思义吧,说一下title和subtitle,这是toolbar自带的定义标题,一个是大标题一个是二级标题,再有就是navigation返回键,logo

最后来一张图

android material design之Toolbar(一)