Android Material Design库用法举例

本文介绍了Android Material Design库的使用,包括TextInputLayout、FloatingActionButton、Snackbar和CoordinatorLayout的应用。通过示例展示了如何实现hint悬浮、悬浮按钮、ToolBar隐藏/展示效果以及FooterView的动画交互。同时还提到了Behavior的使用,以实现更丰富的界面交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Material Design

Android 5.0 Lollipop版本加入了Material Design库,通过这个库,开发人员可以轻松实现体现了Material Design风格的界面开发。本文将通过示例讲解该库里面常用的一些控件的使用方法,包括:
TextInputLayout,FloatingActionButton,Snackbar,CoordinatorLayout等。

Github Demo 地址

TextInputLayout

通过将传统的Edittext用TextInputLayout包裹起来,可以使得在用户输入的时候hint信息悬浮在输入框上方,随时提醒用户当前输入的内容是什么,效果如下图:

TextInputLayout

使用很简单:

<android.support.design.widget.TextInputLayout    
    android:layout_width="wrap_content"    
    android:layout_height="wrap_content">    

    <EditText        
        android:layout_width="200dp"        
        android:layout_height="wrap_content"        
        android:hint="Input your name here"/>

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

其hint颜色,下划线默认颜色,高亮颜色,悬浮hint颜色等都可以设置,具体设置在res/values/styles.xml中,在当前app使用的Theme里设置:

<resources>    
    <!-- Base application theme. -->    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        
        <!-- Customize your theme here. -->        
        <item name="colorPrimary">@color/colorPrimary</item>        
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        
        <item name="colorAccent">@color/blue</item>        
        <item name="android:textColorHint">@color/gray</item>        
        <item name="colorControlNormal">@color/black</item>        
        <item name="colorControlActivated">@color/yellow</item>        
        <item name="colorControlHighlight">@color/green</item>    
    </style>
</resources>    

其中textColorHint代表hint的颜色,colorControlNormal代表下划线没有获取焦点的颜色,colorControlActivated/colorControlHighlight代表了获取焦点或者点击的时候下划线的颜色。其他各种名称和代表的color如下图所示:
theme颜色说明

FloatingActionButton

FloatingActionButton是界面上的一个悬浮按钮,用来指示界面上的某个操作,界面下所示。

FloatingActionButton

可以通过anchor指定以哪个控件为基准,并用anchorGravity属性指定和基准控件的对齐方式,来将它放在界面上的某个位置。

<android.support.design.widget.FloatingActionButton    
    android:id="@+id/fab"    
    android:layout_width="wrap_content"    
    android:layout_height="wrap_content"    
    android:layout_margin="@dimen/fab_margin"    
    app:layout_anchor="@id/collapsing_toolbar_layout"    
    app:layout_anchorGravity="bottom|end"    
    app:srcCompat="@android:drawable/ic_dialog_email" />

添加响应事件:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
}

snackbar

Snackbar是类似于toast的提醒类型的消息,展示在界面底部,可以滑动删除。除了展示文字提示外,还可以添加一个action进行一些操作。

Snackbar.make(view, "这里是展示的文字", Snackbar.LENGTH_SHORT)        
    .setAction("Action", new View.OnClickListener() {            
        @Override            
        public void onClick(View view) {        
            // do something       
         }
    ).show();

SnackBar样式

CoordinatorLayout

CoordinatorLayout继承自ViewGroup,是一个加强版的FrameLayout。它有两个主要作用:

1. 提供了一种实现MaterialDesign样式的简单布局
2. 在该布局内的元素可以实现UI交互

利用CoordinatorLayout可以实现类似知乎的ToolBar随页面滑动而隐藏或展示,以及ToolBar折叠的效果。

ToolBar隐藏效果

ToolBar隐藏效果

使用下面的xml实现上面Toolbar随RecyclerView滑动而隐藏或展示的效果。

<android.support.design.widget.CoordinatorLayout 
    ...    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:fitsSystemWindows="true">    

    <android.support.design.widget.AppBarLayout        
        android:layout_width="match_parent"        
        android:layout_height="wrap_content"        
        android:theme="@style/AppTheme.AppBarOverlay">        

        <android.support.v7.widget.Toolbar            
            android:id="@+id/toolbar"            
            android:layout_width="match_parent"            
            android:layout_height="?attr/actionBarSize"            
            app:layout_collapseMode="parallax"            
            app:layout_scrollFlags="scroll|enterAlways"/>    
    </android.support.design.widget.AppBarLayout>    

    <android.support.v7.widget.RecyclerView        
        android:id="@+id/recycler_view"        
        android:layout_width="match_parent"        
        android:layout_height="match_parent"        
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    ...
</android.support.design.widget.CoordinatorLayout>

这里有三个要点:

  1. 将Toolbar包裹在AppBarLayout里,CoordinatorLayout作为最外层layout。
  2. 指定Toolbar的layout_scrollFlags属性为"scroll | enterAlways"
  3. 同时给RecyclerView指定behavior属性为系统内置的“appbar_scrolling_view_behavior”
    这样就能实现CoordinatorLayout里面组件互相配合的效果。

Toolbar折叠效果

Toolbar折叠效果

使用下面的xml实现Toolbar折叠效果:

<android.support.design.widget.CoordinatorLayout   
    ...
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:fitsSystemWindows="true" >

    <android.support.design.widget.AppBarLayout    
        android:layout_width="match_parent"    
        android:layout_height="192dp"    
        android:theme="@style/AppTheme.AppBarOverlay">    

        <android.support.design.widget.CollapsingToolbarLayout        
            android:id="@+id/collapsing_toolbar_layout"        
            android:layout_width="match_parent"        
            android:layout_height="match_parent"        
            app:layout_scrollFlags="scroll|exitUntilCollapsed"        
            android:background="@drawable/girl">        

            <android.support.v7.widget.Toolbar            
                android:id="@+id/toolbar"            
                android:layout_width="match_parent"           
                android:layout_height="?attr/actionBarSize"            
                app:layout_collapseMode="parallax" />    
            </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView    
        android:id="@+id/recycler_view"    
        android:layout_width="match_parent"    
        android:layout_height="match_parent"    
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    ...
</android.support.design.widget.CoordinatorLayout>

相比于Toolbar隐藏效果,折叠效果的实现有以下几个要点:

1. 需要在Toolbar外面先包裹一层CollapsingToolbarLayout,然后在被AppBarLayout包裹
2. 给CollapsingToolbarLayout设置layout_scrollFlags属性为"scroll | exitUntilCollapsed"
3. 指定Toolbar的layout_collapseMode属性为"parallax"

FooterView的隐藏和展示效果

下面是FooterView隐藏和展示效果,向上滑动RecyclerView时评论布局隐藏,下滑时展示。
FooterView隐藏和展示

评论部分的布局如下:

<LinearLayout    
    android:id="@+id/footer_layout"    
    android:layout_width="match_parent"    
    android:layout_height="60dp"    
    app:layout_anchor="@id/recycler_view"    
    app:layout_anchorGravity="bottom"    
    android:background="@color/yellow"    
    app:layout_behavior=".FooterBehavior"    
    android:visibility="gone"    
    tools:visibility="visible">    

    <EditText        
        android:layout_width="0dp"        
        android:layout_height="wrap_content"        
        android:layout_weight="1"        
        android:hint="添加评论"        
        android:layout_margin="10dp"/>    

    <Button        
        android:layout_width="wrap_content"        
        android:layout_height="wrap_content"        
        android:text="发布评论"/>
</LinearLayout>

为了让FooterView响应RecyclerView滑动事件,我们指定layout的layout_behavior属性值为FooterBehavior。它是我们自定义的一个Behavior,Behavior是一种CoordinatorLayout内部元素进行交互的方式,我们可以根据需要实现自己的Behavior,实现特定的交互效果。

public class FooterBehavior extends CoordinatorLayout.Behavior<View> {    
    private boolean visible = false;    
    public FooterBehavior(Context context, AttributeSet attrs) {        
        super(context, attrs);    
    }    

    @Override    
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {        
        return dependency instanceof RecyclerView;    
    }    

    @Override    
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {        
        return true;    
    }    

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

    @Override    
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {        
        if (dyConsumed > 0 || dyUnconsumed > 0) {            
            moveOupAnimation(child);        
        }
    }    

    @Override    
    public boolean onNestedFling(CoordinatorLayout coordinatorLayout, View child, View target, float velocityX, float velocityY, boolean consumed) {        
        if (velocityY < -0.5) {            
            moveInAnimation(child);        
        } else {            
            moveOupAnimation(child);        
        }        

    return super.onNestedFling(coordinatorLayout, child, target, velocityX, velocityY, consumed);    
    }
    ...
}    

这里有几个要点:

1. 要重写Behavior(context, attrs)这个构造函数,否则通过反射调用Behavior时会出错
2. 重写layoutDependsOn函数,指定当前view所依赖的view,这里可以是依赖某种类型的view,如代码中所示依赖RecyclerView;也可以是依赖某一个特定的View,根据view的id进行判断
3. 根据自己的实际需求,在所依赖的RecyclerView的onStartNestedScroll事件和onNestedFling中,加入对view本身的处理

这里实现FooterView的动画效果代码如下,关于动画的实现技术可以参考我的这篇文章

private void moveInAnimation(View v) {    
    if (!visible) {        
        v.setVisibility(View.VISIBLE);        
        ObjectAnimator moveTopAnim = ObjectAnimator.ofFloat(v, "translationY", v.getHeight(), 0);        
        moveTopAnim.setDuration(300);        
        moveTopAnim.start();        
        visible = true;    
    }
}

private void moveOupAnimation(View v) {    
    if (visible) {        
        ObjectAnimator moveTopAnim = ObjectAnimator.ofFloat(v, "translationY", 0, v.getHeight());        
        moveTopAnim.setDuration(300);        
        moveTopAnim.start();        
        visible = false;    
    }
}

Github Demo 地址

参考:
https://android-developers.googleblog.com/2015/05/android-design-support-library.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值