安卓MaterialDesign新特性,新控件FloatingActionButton,TabLayout,NavigationView等的使用

一:介绍

Android5.0之后推出了MaterialDesign(材料设计,物质设计),包括FloatingActionButton(浮动动作按钮),TextInputLayout(文本输入布局,在这个控件下嵌套的EditText的Hint属性不会随着用户输入消失,而且还有监听输入的字符数给出相应提示的功能),TabLayout(表格布局,类似HorizontalScrollView与viewpager联动,但是少了很多计算),NavigationView(导航视图,就是侧滑菜单)等等,具体效果可以看下面的效果图,下面就来介绍这几种新控件使用方法

二:截图

1.先来看看FloatingActionButton和TextInputLayout效果图



2.TabLayout结合viewpager联动效果图



3.NavigationView结合DrawerLayout效果图(就是个侧滑菜单效果)



三:实现(IDE:AndroidStudio)

1.首先引入,方式如图



2.点击OK之后,先介绍FloatingActionButton和TextInputLayout使用方式

(1) 布局文件,里面的字段注释得很详细,别忘了把命名空间app引入

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context="com.zidiv.materialdesign.MainActivity">

<!-- app:backgroundTint="#f0f" 背景颜色 -->
<!-- app:elevation="10dp" 周边阴影宽度 -->
<!-- app:fabSize="normal" 设置大小 -->
<!-- app:rippleColor="#000" 点击时的颜色 -->

<android.support.design.widget.FloatingActionButton
android:id="@+id/fabtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="@mipmap/ic_launcher"
app:backgroundTint="#f0f"
app:elevation="10dp"
app:fabSize="normal"
app:rippleColor="#000" />

<android.support.design.widget.TextInputLayout
android:id="@+id/textinput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入用户名">

<EditText
android:id="@+id/et"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>

</LinearLayout>

(2) activity代码,同样为了方便,注释都在代码中,里面有个SnackBar,用法和Toast极其相似,功能和Toast也类似,但是效果不同,可以在上面的第一张效果图中看到SnackBar的效果,是从底部弹出的提示

package com.zidiv.materialdesign;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;

/**
* MaterialDesgin Demo
*/
public class MainActivity extends AppCompatActivity {

private FloatingActionButton fabtn;
private TextInputLayout textinput;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}

private void initView() {
//FloatingActionButton部分,浮动动作按钮
fabtn = ((FloatingActionButton) findViewById(R.id.fabtn));
fabtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final Snackbar snackbar = Snackbar.make(v, "这是一条提醒", Snackbar.LENGTH_SHORT);
snackbar.setAction("我知道了", new View.OnClickListener() {
@Override
public void onClick(View v) {
snackbar.dismiss();
}
});
snackbar.show();
}
});

//TextInputLayout部分,文本输入编辑框
textinput = ((TextInputLayout) findViewById(R.id.textinput));
//获得TextInputLayout包裹的EditText
EditText editText = textinput.getEditText();
//添加一个文本改变监听器
editText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {

}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
//如果输入的长度超过10
if (s.length() > 10) {
textinput.setError("用户名长度不能超过10");
textinput.setErrorEnabled(true);
} else {
textinput.setErrorEnabled(false);
}
}

@Override
public void afterTextChanged(Editable s) {

}
});
}
}

3.然后看看TabLayout的使用方法

(1)布局文件,字段都注释在布局文件中了,同样别忘了引入命名空间

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context="com.zidiv.materialdesign.TabLayoutActivity">
<!-- app:tabIndicatorColor="#0f0" 下标指示器的颜色 -->
<!-- app:tabIndicatorHeight="1dp" 下标指示器的高度 -->
<!-- app:tabMode="scrollable" 设置表格模式:滚动 -->
<!-- app:tabSelectedTextColor="#f00" 选中的颜色 -->
<!-- app:tabTextColor="#000" 表格文本的颜色 -->
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00f"
app:tabIndicatorColor="#0f0"
app:tabIndicatorHeight="1dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#f00"
app:tabTextColor="#000">

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

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.v4.view.ViewPager>

</LinearLayout>

(2) activity代码,代码很少就可以实现

package com.zidiv.materialdesign;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

/**
* 表格布局和viewpager联动,效果类似horizontalscrollview和viewpager联动
*/
public class TabLayoutActivity extends AppCompatActivity {

private TabLayout tablayout;
private ViewPager viewpager;

private List<Fragment> fragmentList = new ArrayList<>();//fragment集合
private List<String> stringList = new ArrayList<>();//字符串集合,用在TabLayout标题上

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
initView();
}

private void initView() {
//TabLayout部分,表格布局
tablayout = ((TabLayout) findViewById(R.id.tablayout));
viewpager = ((ViewPager) findViewById(R.id.viewpager));
//模拟几个fragment和标题
for (int i = 0; i < 10; i++) {
String title = "标题" + i;
stringList.add(title);
MyFragment fragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putInt("index", i);
fragment.setArguments(bundle);
fragmentList.add(fragment);
}
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList, stringList);
//给viewpager设置适配器
viewpager.setAdapter(adapter);
//设置viewpager和tablayout联动,很关键
tablayout.setupWithViewPager(viewpager);
tablayout.setTabsFromPagerAdapter(adapter);
}
}

(3) activity中MyFragment代码

package com.zidiv.materialdesign;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
* Created by Administrator on 2016/3/3.
*/
public class MyFragment extends Fragment {

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
int index = getArguments().getInt("index");
textView.setText("fragment" + index);
return textView;
}
}

(4) MyFragmentPageAdapter代码

package com.zidiv.materialdesign;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
* Created by Administrator on 2016/3/3.
*/
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

private List<Fragment> fragmentList;
private List<String> stringList;

public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> stringList) {
super(fm);
this.fragmentList = fragmentList;
this.stringList = stringList;
}

@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}

@Override
public int getCount() {
return fragmentList.size();
}

@Override
public CharSequence getPageTitle(int position) {
return stringList.get(position);
}
}

4.最后看看NavigationView的使用

(1) 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context="com.zidiv.materialdesign.NavigationViewActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#f0f"
android:orientation="vertical">

<Button
android:id="@+id/btn_toggle"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:text="开关" />
</LinearLayout>

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

<include layout="@layout/activity_main" />
<!-- layout_gravity="left" 从侧滑菜单左边滑出 -->
<!-- app:headerLayout="@layout/headlayout" 加入头布局 -->
<!-- app:menu="@menu/main" 加入菜单 -->
<android.support.design.widget.NavigationView
android:id="@+id/navigationview"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_gravity="left">
<!--app:headerLayout="@layout/headlayout"-->
<!--app:menu="@menu/main">-->

<TextView
android:id="@+id/txt"
android:layout_width="match_parent"
android:layout_height="30dp"
android:gravity="center"
android:text="哈哈" />

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

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

</LinearLayout>

(2) activity代码

package com.zidiv.materialdesign;

import android.support.design.widget.NavigationView;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.View;

/**
* 侧滑菜单的使用
*/
public class NavigationViewActivity extends AppCompatActivity {

private DrawerLayout drawerlayout;
private NavigationView navigationview;
private boolean flag = false;//侧滑菜单是否打开的标识

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_navigation_view);
initView();
}

private void initView() {
//侧滑的根布局
drawerlayout = ((DrawerLayout) findViewById(R.id.drawerlayout));
//侧滑菜单布局
navigationview = ((NavigationView) findViewById(R.id.navigationview));
//找到侧滑菜单中的控件,可以直接找到
findViewById(R.id.txt).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.e("侧滑菜单", "点击了");
Snackbar.make(v, "点击了", Snackbar.LENGTH_LONG).show();
}
});
//给侧滑菜单添加监听
drawerlayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {
//当侧滑菜单关闭
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
flag = false;
}

//当侧滑菜单打开
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
flag = true;
}
});
//侧滑开关按钮
findViewById(R.id.btn_toggle).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (flag) {//如果是打开的,就关闭侧滑菜单
drawerlayout.closeDrawers();
} else {
//布局中设置从左边打开,这里也要设置为左边打开
drawerlayout.openDrawer(Gravity.LEFT);
}
}
});
}
}

四:最后的话

到这里MetarialDesign中的新控件使用就讲完了,最后附上demo地址点击下载demo,三个activity对应上面三个效果图,你可以在清单文件中配置启动项,启动你要启动的activity就可以了,另外demo是Androidstudio工程,大家导入的时候如果有错误请修改自己的build.gradle文件即可,谢谢大家!