android Material Desigin控件学习：综述

发表于   |   分类于   |  

android Material Desigin控件学习：综述

com.android.support:design是android的material design设计风格的兼容库

都是兼容库，区别是这个库多了个Design。 Android Support Library 22.1只是支持了一些基本控件的材料设计化，但是这个库更多的是对一些特效的实现,其实跟github的很多=库有关系，只不是官方把这些库给标准化了
参看教程地址 泡神的博客

如何使用

1
2
3
compile 'com.android.support:appcompat-v7:23.1.1'

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

新的Material Design风格主要体现在一些新控件的使用

1 DrawerLayout

注意事项 DrawerLayout只能有两个子视图，顺序第一个当前视图，顺序第二个是弹出视图，弹出视图的laytout_gravity=”left”,否则都是错误的

2 Navigation View 抽屉导航

其实就是在drawLayout滑出来的控件上新增内容，比旧版本更省时间了

3 ToolBar

可以取代actionbar控件

4 输入框控件的悬浮标签

5 悬浮操作按钮floating action button

6 协作滚动控件CoordinatorLayout

appBarLayout,collapsing toolbar ,toolbar都要放到这个协同层里，就实现了协同滚动

7 Snackbar


为一个操作提供轻量级的，快速的反馈是使用snackbar的最好时机。snackbar显示在屏幕的底部，包含了文字信息与一个可选的操作按钮。在指定时间结束之后自动消失。另外，用户还可以在超时之前将它滑动删除。

8 选项卡TabLayout

9 可伸缩折叠的Toolbar （Collapsing Toolbar）

背景大图能根据手势滚动而收缩，可用于对toolbar的补充

1
app:contentScrim="?attr/colorPrimary",CollapsingToolbarLayout

这个属性是设置折叠后Toolbar的颜色.

1
app:layout_scrollFlags="scroll|exitUntilCollapsed",

这是两个Flag控制滚动时候CollapsingToolbarLayout的表现.

  • Scroll, 表示向下滚动列表时候,CollapsingToolbarLayout会滚出屏幕并且消失(原文解释:this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen)

  • exitUntilCollapsed, 表示这个layout会一直滚动离开屏幕范围,直到它收折成它的最小高度.(原文解释:this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting)
    app:layout_collapseMode=”parallax”,这是控制滚出屏幕范围的效果的
    1) parallax,表示滚动过程中,会一直保持可见区域在正中间.
    2) pin,表示不会被滚出屏幕范围.

具体学习demo

预览图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!--以后actionbar的布局是AppBarLayout，因为appBar越来越复杂了-->
<android.support.design.widget.AppBarLayout
android:id="@+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- toolbar内容-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
/>

<!-- tablayout内容-->
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ef5350"
app:tabSelectedTextColor="#1976d2"
app:tabTextColor="#90caf9"
/>

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

<!--增强型listview -->
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>

    <android.support.design.widget.FloatingActionButton
android:id="@+id/fab_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="0.1dp"
app:fabSize="normal"
/>
</android.support.design.widget.CoordinatorLayout>

java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
 * toolbar的初始化,tool新增
 */
public void initToolBar(){
//使用toolBar取代actionBar，以及toolBar的使用
toolbar = (Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
drawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
drawerToggle =  new ActionBarDrawerToggle(LessonThreeActivity.this,drawerLayout,R.string.drawer_open_content,R.string.drawer_close_content);
//设置标题选项卡
TabLayout tabLayout= (TabLayout)findViewById(R.id.tabLayout);
for (int i=0;i<8;i++)
tabLayout.addTab(tabLayout.newTab().setText("选项卡："+i));

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//设置RecyclerView
RecyclerView mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    LinearLayoutManager mLayoutManager = new LinearLayoutManager(this);
mLayoutManager.setOrientation(LinearLayout.VERTICAL);
mRecyclerView.setLayoutManager(mLayoutManager);
    RecyclerView.Adapter mAdapter = new MyRecyclerViewAdapter(this);
mRecyclerView.setAdapter(mAdapter);
}

private class MyViewHolder extends  RecyclerView.ViewHolder{
public TextView textView;
public MyViewHolder(View itemView)
        {
super(itemView);
textView = (TextView)itemView.findViewById(android.R.id.text1);
        }
}

public class MyRecyclerViewAdapter extends  RecyclerView.Adapter<MyViewHolder>{
private LayoutInflater layoutInflater;
public MyRecyclerViewAdapter(Activity activity)
    {
super();
layoutInflater = activity.getLayoutInflater();
    }

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = layoutInflater.inflate(android.R.layout.simple_list_item_1, null);
        MyViewHolder holder = new MyViewHolder(v);
return holder;

    }

@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
        holder.textView.setText("数据position:" + position);
    }

@Override
public int getItemCount() {
return 40;
    }
}