Material Design Library 使用汇总

作者vip1024c交流
156 阅读4分钟

如有遗漏，欢迎大家留言告知。我会持续补充，谢谢~。

要使用Material Design Library ，首先得将依赖库加入到项目中，在app的build.gradle中（dependencies{ }），添加如下：

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

1 Color Palette

===============

我们可以定义状态栏、ActionBar（或ToolBar）、导航栏等等颜色。可以通过如下方式：

修改res/values/styles.xml文件如下：

<!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item>

当然了，可自定义的不仅仅就上面示例中的3个，你还可以自定义如下图所示的区域的颜色：

Color Palette

例如，你可以修改窗口背景色：

@color/colorAccent

2 Toolbar、AppBarLayout、CollapsingToolbarLayout

==============================================

参考我的另一篇文章【玩转AppBarLayout，更酷炫的顶部栏 】

3 CoordinatorLayout

===================

参考我的另一篇文章【CoordinatorLayout的使用如此简单 】

4 DrawerLayout、NavigationView

=============================

在很多应用中都使用到了Drawer导航，在Design Support Library中，提供了DrawerLayout，看看如何使用的吧！

首先，需要将android.support.v4.widget.DrawerLayout作为布局的根标签，然后android.support.design.widget.NavigationView作为其中的子标签。如下所示：

<android.support.v4.widget.DrawerLayout xmlns:android="schemas.android.com/apk/res/and…"

xmlns:app="schemas.android.com/apk/res-aut…"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="hello world!" />

<android.support.design.widget.NavigationView

android:id="@+id/navigation_view"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

app:headerLayout="@layout/drawer_header"

app:menu="@menu/drawer" />

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

NavigationView包含两个引用，一个是导航里面的头部，另一个是菜单项，res/layout/drawer_header如下：

<LinearLayout xmlns:android="schemas.android.com/apk/res/and…"

android:layout_width="match_parent"

android:layout_height="150dp"

android:background="?attr/colorPrimaryDark"

android:gravity="bottom"

android:orientation="vertical"

android:padding="16dp"

android:theme="@style/ThemeOverlay.AppCompat.Dark">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="头部"

android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

res/menu/drawer.xml如下：

<item

android:id="@+id/home"

android:checked="true"

android:icon="@drawable/home"

android:title="主页" />

<item

android:id="@+id/theme"

android:icon="@drawable/theme"

android:title="主题" />

<item

android:id="@+id/settings"

android:icon="@drawable/setting"

android:title="设置" />

<item

android:icon="@drawable/favorite"

android:title="收藏" />

<item

android:icon="@drawable/ablum"

android:title="相册" />

<item

android:icon="@drawable/friends"

android:title="好友" />

然后，可以在我们的Activity里面响应菜单点击：

public class MainActivity extends Activity

implements NavigationView.OnNavigationItemSelectedListener {

private DrawerLayout mDrawerLayout;

private NavigationView mNavigationView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mNavigationView = (NavigationView) findViewById(R.id.navigation_view);

mNavigationView.setNavigationItemSelectedListener(this);

}

@Override

public boolean onNavigationItemSelected(MenuItem menuItem) {

// int id = menuItem.getItemId();

String title = (String) menuItem.getTitle();

Toast.makeText(this, "您点击了 " + title, Toast.LENGTH_SHORT).show();

return super.onContextItemSelected(menuItem);

}

}

效果如下：

Drawer

5 Floating Action Button (FAB)

==============================

直接将android.support.design.widget.FloatingActionButton放入布局中即可，例如，要放到右下：

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:layout_marginRight="@dimen/activity_horizontal_margin"

android:layout_marginBottom="@dimen/activity_vertical_margin"

android:src="@drawable/ic_done" />

如果需要监听点击，直接通过setOnclickListener即可：

fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Toast.makeText(MainActivity.this, "您点击了FAB", Toast.LENGTH_SHORT).show();

}

});

FAB

6 Snackbar

==========

一般情况下，如果你想给用户一个简短的响应反馈，我们会选择使用Toast，现在我们有了另一个选择啦：Snackbar。

看看如何使用

public void onClick(View v) {

View.OnClickListener onClickListener = new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this,

"您点击了Snackbar中的确定", Toast.LENGTH_SHORT).show();

}

};

Snackbar sb = Snackbar.make(v,

"在这里是Snackbar显示内容",

Snackbar.LENGTH_LONG);

//添加点击"按钮"-->"确定"及其对应的点击事件

sb.setAction("确定", onClickListener);

//设置"确定"的颜色

sb.setActionTextColor(Color.RED);

//设置显示消息的文字颜色

View view = sb.getView();

((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(Color.GREEN);

//设置背景颜色

view.setBackgroundColor(Color.GRAY);

//设置透明度

view.setAlpha(0.5f);

//设置位置,Snackbar本质是一个LinearLayout

ViewGroup.LayoutParams lp = view.getLayoutParams();

LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(lp.width, lp.height);

llp.gravity = Gravity.TOP;

view.setLayoutParams(llp);

//显示

sb.show();

}

看看效果：

SnackBar

7 TabLayout

===========

先看布局文件：

<LinearLayout xmlns:android="schemas.android.com/apk/res/and…"

xmlns:app="schemas.android.com/apk/res-aut…"

xmlns:tools="schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.hc.materialdesign.MainActivity">

<android.support.design.widget.TabLayout

android:id="@+id/tablayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

android:theme="@style/ThemeOverlay.AppCompat.Dark"

app:tabGravity="center"

app:tabMode="fixed" />

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

注意到，TabLayout中有两个陌生的属性

  • app:tabMode：可以取如下两个值，
*   `fixed`：表示Tab不能滚动

*   `scrollable`：表示Tab可以滚动，此时不管tabGravity取何值，都是按照从左到右排过去，即相当于`app:tabGravity="left"`(当然了，实际中没有left这个值，只是我们可以这么去理解)
  • app:tabGravity：可以取如下两个值，
*   `fill`：当tabMode取fixed时（即tab不能滚动时），tab的所有子标签填充tab的宽度

*   `center`：当tabMode去fixed时，tab中所有子标签居中显示。

为了有更加直观的理解，看几张图片：

当app:tabMode="scrollable"：

scrollable

当app:tabMode="fixed"且 app:tabGravity="center"：

center

当app:tabMode=fixed且 app:tabGravity="fill"：

fill

好了，接下来看看Activity里面具体代码：

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//初始化ViewPager及其适配器

MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());

ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

//将ViewPager与适配器关联

viewPager.setAdapter(adapter);

//TabLayout

TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout);

//将ViewPager与TabLayout关联

tabLayout.setupWithViewPager(viewPager);

//设置指示器的颜色

tabLayout.setSelectedTabIndicatorColor(Color.GREEN);

}

static class MyPagerAdapter extends FragmentStatePagerAdapter {

public MyPagerAdapter(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int position) {

return MyFragment.newInstance(position);

}

@Override

public int getCount() {

return 3;

}

@Override

public CharSequence getPageTitle(int position) {

return "Tab " + position;

}

}

}

其中MyFragment很简单，只是用于产生一个简单的Fragment：

public class MyFragment extends Fragment {

private static final String TAB_POSITION = "tab_position";

public MyFragment() {

}

public static MyFragment newInstance(int tabPosition) {

MyFragment fragment = new MyFragment();

Bundle args = new Bundle();

args.putInt(TAB_POSITION, tabPosition);

fragment.setArguments(args);

return fragment;

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

Bundle args = getArguments();

int tabPosition = args.getInt(TAB_POSITION);

TextView tv = new TextView(getActivity());

tv.setGravity(Gravity.CENTER);

tv.setText("Text in Tab #" + tabPosition);

return tv;

}

}

运行效果前面已经贴出来了，这里就不再复制显示了。

8 TextInputLayout

=================

TextInputLayout主要是用在登录注册方面。

先看看效果：

Floating Labels for EditText

老规矩，从布局文件开始：

<LinearLayout xmlns:android="schemas.android.com/apk/res/and…"

xmlns:app="schemas.android.com/apk/res-aut…"

xmlns:tools="schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:padding="@dimen/activity_vertical_margin"

tools:context="com.hc.materialdesign.MainActivity">

<android.support.design.widget.TextInputLayout

android:id="@+id/userName"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="用户名"

android:inputType="textEmailAddress"

/>

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

<android.support.design.widget.TextInputLayout

android:id="@+id/email"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="邮箱"

avatar
文章
阅读
粉丝