MaterialDesign的使用

来源：互联网发布：mac作用是什么编辑：程序博客网时间：2024/04/28 22:11

一、MaterialDesign的简介

Material Design是google在2014年I/O大会上推出的一套全新的界面设计语言。

我们使用它只需添加以下依赖即可

compile 'com.android.support:design:25.3.1'

二.Toolbar

如果要使用Toolbar，一般我们需要隐藏ActionBar。

一般的做法，

关于这三个属性代表的是什么，一张图你就清楚了。

xml中

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>

android:theme是为了指定toolbar使用深色的主题，但如果toolbar中有弹出菜单时，弹出菜单也会变的深色，所以我们使用淡色的主题；

app:popupTheme是android5.0新增的，它可以兼容5.0以下的系统。

Activity代码

setSupportActionBar(toolbar);

actionBar = getSupportActionBar();

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

toolbar的一些方法

setNavigationIcon：设置左上角的图标，id为 android.R.id.home

setLogo：设置logo，位于图标右边

setTitle：设置标题，位于图标右边

setSubtitle：设置子标题，位于标题下方

关于左上角图标的点击事件

1.toolbar.setNavigationOnClickListener直接设置监听即可

2.在onOptionsItemSelected方法，根据id找到

三.DrawerLayout+NavigationView实现侧滑效果

xml如下

<android.support.v4.widget.DrawerLayout

android:id="@+id/drawerlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.zyf.drawerlayoutdemo.MainActivity">
<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="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:theme="@style/ThemeOverlay.AppCompat.Light"
></android.support.v7.widget.Toolbar>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_head"
app:menu="@menu/drawer_menu">
</android.support.design.widget.NavigationView>

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

head和menu的xml

在NavigationView中还需要添加headerLayout和menu，并且需要设置layout_gravity，只有设置了该属性，才能实现侧滑效果start表示从左侧滑出end则是右侧

Activity中

drawerlayout.openDrawer(GravityCompat.START, true);打开drawerlayout

其实没有太多东西，当你的头布局和你的menu需要交互时，你可以添加一下代码

//获取头布局
View headView = navigationview.getHeaderView(0);

获取到了view自然而然就能获得里面组件了

navigationview.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.info:
Toast.makeText(getApplicationContext(), "点击:" + item.getTitle(), Toast.LENGTH_SHORT).show();
drawerlayout.closeDrawers();//点击后关闭drawerlayout
break;

}}；可以监听到menu里的每一项

四.CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout

activity_main.xml

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="250dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
>

<ImageView
android:id="@+id/image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>

</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:id="@+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_margin="16dp"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|end"
android:src="@mipmap/ic_launcher"/>
</android.support.design.widget.CoordinatorLayout>

折叠式标题栏的实现需要借助于CollapsingToolbarLayout，它是可作用在Toolbar基础之上的布局，但CollapsingToolbarLayout是不能独立存在的，它只能作为AppBarLayout的直接子布局来使用。CoordinatorLayout是一个垂直的LinearLayout，在这里必须要使用CoordinatorLayout才能实现可折叠的状态栏，接着在AppBarLayout中嵌入CollapsingToolbarLayout，我们会设置它的其中一个属性 app:layout_scrollFlags="scroll|exitUntilCollapsed"

scroll表示CollapsingToolbarLayout会像随下面内容的滚动一起滚动，
而exitUntilCollapsed表示滚动完之后保留在界面上

接下来，我们在CollapsingToolbarLayout中添加ImageView和Toolbar分别指定layout_collapseMode属性为parallx和pin，分别表示折叠过程中产生一定的错位和位置固定不变。

再来就是添加NestedScrollView，和ScrollView类似，在这里我们需要指定一个app:layout_behavior="@string/appbar_scrolling_view_behavior"指定了它的文字是在appbar下方。

Activity中的代码

public class MainActivity extends AppCompatActivity {
@Bind(R.id.image_view)
ImageView imageView;
@Bind(R.id.toolbar)
Toolbar toolbar;
@Bind(R.id.content)
TextView content;
@Bind(R.id.collapsing_toolbar)
CollapsingToolbarLayout collapsingToolbar;
@Bind(R.id.appbar)
AppBarLayout appbar;
ActionBar actionBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
setSupportActionBar(toolbar);
actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
collapsingToolbar.setTitle("name！");
Picasso.with(this).load(R.mipmap.apple).into(imageView);
String fruitContent = generateFruitContent("apple-");
content.setText(fruitContent);
}
private String generateFruitContent(String fruitName) {
StringBuilder fruitContent = new StringBuilder();
for (int i = 0; i < 1000; i++) {
fruitContent.append(fruitName);
}
return fruitContent.toString();
}
}

结果：

对了这里在说一下沉浸式状态栏，我们需要设置android:fitsSystemWindows="true",这是为了让我们的背景图片和系统状态栏融合使用，但是如果单单在ImageView中设置是无效的，我们还要在它的所有父控件上设置。虽然这样设置了，但沉浸式状态栏不是透明的！！这可怎么办，当然也能解决，就是我们在主题中将状态栏设为透明，但是沉浸式状态栏是5.0以后出来的，所有如果手机系统小于5.0则是没有效果的，所以在这里我们需要新建一个style-21的一个资源文件夹，在下面创建一个style，它在继承AppTheme的基础上让状态栏透明，代码如下

<resources>
<style name="AppThemeBase" parent="AppTheme">

<item name="android:statusBarColor">@android:color/transparent</item>
</style>
</resources>

但是对于5.0之前的系统是无法识别到这个主题的，那么怎么办，所以我们需要在默认的style下也相应添加一个AppThemeBase主题，并且也继承自AppTheme,代码如下

这样沉浸式状态栏也完成了

五.最后一点，就是DrawerLayout+NavigationView+CollapsingToolbarLayout三个的结合使用。

实现起来很简单，我们只需在三的基础上，在外面套一层DrawerLayout和NavigationView即可

代码如下：

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
...
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_head"
app:menu="@menu/drawer_menu">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

然后我们只需在activity中初始化设置即可，这里的头布局和menu在二中也已经讲了。

阅读全文

1 0