design包8种控件_view-design包

注意：app命名空间的属性出不来，在color的xml文件上添加

    <color name="main_color">#ffffff</color>
1

一、Snackbar：比较像Toast,setAction有点击事件

    Snackbar.make(coordinator,"Snackbar",Snackbar.LENGTH_SHORT)
                .setAction("撤销", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        text.setText("撤销");
                    }
                }).show();
1
2
3
4
5
6
7

二、CoordinatorLayout，获取view的LayoutParams属性，从而设置behavoir属性，，behavoir具有设置监听功能

2.1 SwipeDismissBehavior行为是通过alpha,translationX进行属性动画的删除，和回退

    CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) text.getLayoutParams();
        SwipeDismissBehavior behavior=new SwipeDismissBehavior();
        behavior.setListener(this);
        layoutParams.setBehavior(behavior);

    public void onDismiss(View view) {
        text.setVisibility(View.GONE);
        Snackbar.make(coordinator,"你删除了一个textview",Snackbar.LENGTH_LONG)
                .setAction("撤销", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        text.setVisibility(View.VISIBLE);
                        ViewCompat.setAlpha(text,1);
                        ViewCompat.setTranslationX(text,0);
                    }
                }).show();
    }

    @Override
    public void onDragStateChanged(int state) {

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

补充、ToolBar，白色字体样式Base.ThemeOverlay.AppCompat.Dark.ActionBar”，要设置一个背景取消actonBar,去style中修改，不建议使用清单文件

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
        android:id="@+id/main_toolbar">

    setSupportActionBar(toolbar);    
1
2
3
4
5
6
7
8

补充不是5.0、DrawerLayout，一般与NavigationView结合使用，否则没啥意义

3.1 不结合NavigationView使用，只能看到最下面一个veiw 的样子，而且宽高设置没有用，全部match_parent,和0dp都是撑满全屏

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/drawer_layout2">
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#00f"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#f00"/>

    </android.support.v4.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.2 结合NavigationView使用，想从左边划入，必须设置android:layout_gravity=”start”属性，

    <android.support.design.widget.NavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            //好像联想不出来
            android:layout_gravity="start"
            //头布局，另写xml
            app:headerLayout="@layout/content_header"
            //布局菜单类型，另写xml
            app:menu="@menu/menu_navigation"
            //图片颜色
            app:itemIconTint="@color/color_menu_item"
            //文字颜色
            app:itemTextColor="@color/color_menu_item"
            //字体大小
            app:itemTextAppearance="?android:textAppearanceLarge"
            android:background="#fff">

       </android.support.design.widget.NavigationView>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.3 给toolbar添加打开NavigationView的按钮

        drawer = (DrawerLayout) findViewById(R.id.drawer_layout2);
        ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,    drawer, toolbar, 0, 0);
        drawer.setDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();
1
2
3
4

3.4 不用toolbar，还是使用actionBar打开Navigation,比toolbar多出两条语句

    drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout);
        toggle=new ActionBarDrawerToggle(this,drawer_layout,0,0);
        drawer_layout.setDrawerListener(toggle);
        toggle.syncState();

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return toggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item);
    }
1
2
3
4
5
6
7
8
9
10
11

三、FloatingActionButton，

除了一般大小的悬浮操作按钮，它还支持mini size（fabSize=”mini”）。FloatingActionButton继承自ImageView，你可以使用android:src或者ImageView的任意方法，比如setImageDrawable()来设置FloatingActionButton里面的图标

    <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_add"
            //布局以什么为基准
            app:layout_anchor="@id/collapsing_toolbar3"
            //根据基准设置布局方式
            app:layout_anchorGravity="bottom|right|end"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="5dp"
            android:id="@+id/bar_button"/>
1
2
3
4
5
6
7
8
9
10
11

四、 NavigationView，xml见3，设置监听如下，这个监听是结合菜单的监听事件

    navigationView.setNavigationItemSelectedListener(this);
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.item_1:
                break;
            case R.id.item_2:
                break;
            case R.id.item_3:
                break;
            case R.id.item_4:
                break;
            case R.id.item_5:
                //退出整个应用程序
                ActivityCompat.finishAffinity(this);
                break;
        }
        //关闭NavigationView
        drawer.closeDrawer(GravityCompat.START);
        return false;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

五、AppBarLayout一般与CollapsingToolbarLayout，Toolbar，联合使用，下面是具有拉升效果的toolbar

    <android.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:layout_width="match_parent">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            //想有折叠效果必须有这个属性
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar3"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                //折叠模式
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们需要定义AppBarLayout与滚动视图之间的联系。在RecyclerView或者任意支持嵌套滚动的view比如NestedScrollView上添加app:layout_behavior，此处recycleview:

    <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="LinearLayoutManager"
1
2
3
4

//和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout 这个特殊的view何时发生了滚动事件，这个behavior需要设置在触发事件（滚动）的view上
1

            app:layout_behavior="@string/appbar_scrolling_view_behavior"

            android:id="@+id/recycle">
        </android.support.v7.widget.RecyclerView>
1
2
3
4

在toolbar上加上具有滚动效果的imageview

1、注意一点：所有使用scroll flag的view都必须定义在没有使用scroll flag的view的前面，这样才能确保所有的view从顶部退出，留下固定的元素

2、AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，就可以在RecyclerView滚动事件发生的时候被触发

2、 app:layout_scrollFlags属性里面必须至少启用scroll这个flag，这样这个view才会滚动出屏幕，否则它将一直固定在顶部。可以使用的其他flag有：

1、enterAlways: 一旦向上滚动这个view就可见。

2、enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

3、exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

4、 scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        //可写可不写，看自己喜欢哪种样式
        app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
        android:id="@+id/appbar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            //折叠后的背景颜色
            app:contentScrim="@color/colorPrimary"

            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="320dp"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin"
                android:id="@+id/toolbar"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
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

六、CollapsingToolbarLayout，如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中

1、使用了CollapsingToolbarLayout的app:layout_collapseMode=”pin”来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部

2、还可以做到更好的效果，当你让CollapsingToolbarLayout和Toolbar在一起使用的时候，title会在展开的时候自动变得大些，而在折叠的时候让字体过渡到默认值。必须注意，在这种情况下你必须在CollapsingToolbarLayout上调用setTitle()，而不是在Toolbar上

    CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar3);

    collapsingToolbar.setTitle("cheeseName");
1
2
3

3、你还可以使用app:layout_collapseMode=”parallax”（以及使用app:layout_collapseParallaxMultiplier=”0.7”来设置视差因子）来实现视差滚动效果（比如CollapsingToolbarLayout里面的一个ImageView），这中情况和CollapsingToolbarLayout的app:contentScrim=”?attr/colorPrimary”属性一起配合更完美

七、TabLayout,一般结合viewPager使用

但是如果你使用ViewPager在tab之间横向切换，你可以直接从 PagerAdapter 的 getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将两者联系在一起。它可以使tab的选中事件能更新ViewPager,同时ViewPager的页面改变能更新tab的选中状态。

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        //设置滚动还是占满一行
        app:tabMode="fixed"
        app:tabTextAppearance="@style/tabTextAppearance"
        app:tabBackground="@color/colorPrimaryDark"
        app:tabTextColor="#fff"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabIndicatorColor="@color/colorAccent"
        android:id="@+id/tab"/>
1
2
3
4
5
6
7
8
9
10
11
12

八、TextInputLayout

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

    textInput = (TextInputLayout) findViewById(R.id.text_input);
        edit.addTextChangedListener(this);

    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

    }

    @Override
    public void afterTextChanged(Editable s) {
        if (s.length() < 6) {
            textInput.setError("用户名要大于6位");
            textInput.setErrorEnabled(true);
        } else {
            textInput.setErrorEnabled(false);
        }
    }
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

自定义Behavior

    public class MyBehavior extends FloatingActionButton.Behavior {

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dx, int dy, int[] consumed) {
        super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed);
        if (dy > 0) {
            child.hide();
        } else {
            child.show();
        }
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
        return true;
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18