Material Design Control 初涉 1
前言
小弟开发Android从没有系统的归纳一下个人的学习记录,在加上比较懒或者工作原因,也没认真思考过,每天都是修改UI,修改业务,我相信很多前辈或者比小弟入门还晚的伙伴们也遇到过此情况,最近看别人的APP各种特性用的很欢,因此小弟在这里算是现学现卖,写的不好的请大家尽情批评,吐槽。
初涉1将介绍以下控件
android.support.design.widget.TextInputLayout
android.support.design.widget.FloatingActionButton
android.support.design.widget.Snackbar
android.support.design.widget.TextInputLayout
一个拓展的EditText控件,具有错误提示,全新hint提示控件,相比与原始的EditText更具友好,但仅仅是一个EditText的包裹器。
- 是继承LinearLayout布局,默认布局VERTICAL(垂直方向),可以改变方向
- 其内部控件中必须有且仅有一个EditText控件,并且此控件不论被放在什么位置,都会被放到第一个,可以不需要设置android:id的属性
@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
if (child instanceof EditText) {
setEditText((EditText) child);
super.addView(child, 0, updateEditTextMargin(params));
} else {
// Carry on adding the View...
super.addView(child, index, params);
}
}
- 常用方法
- setError(CharSequence) 设置错误提示语;
- setErrorEnabled(boolean) 设置错误提示是否可用,提示信息在控件的左下角与Counter是同一行,当设置false时不可见,再次设置true时可以见,但需要重新设置setError;
- setCounterEnabled(boolean) 简单的说就是是否计算输入的文本个数 【Whether the character counter functionality is enabled or not in this layout.】,这里需要注意的是他显示在右下角,如果布局中有多个控件,会显示在所有控件的下一行的右下角,这里均以VERTICAL说明;
- getEditText() 取得布局中唯一的EditText控件;
android.support.design.widget.FloatingActionButton
- 类结构
--View
--ImageView
--ImageButton
--VisibilityAwareImageButton
--FloatingActionButton
从结构上看FloatingActionButton (后面简称FAB) 基类是ImageView (这里忽略View的继承,大家都知道所有的控件都是继承与View),因此ImageView的属性都是可以使用的;
打开源码,可以看到class的头部有一个
@CoordinatorLayout.DefaultBehavior(FloatingActionButton.Behavior.class)
是的FAB可以使用在CoordinatorLayout布局内,相信大家对这个都比较熟悉,关于CoordinatorLayout后面在介绍,当然FAB也可以当作普通控件使用;
FAB默认是使用主题中colorAccent的颜色值显示,如果想改变其颜色可以使用背景着色器 setBackgroundTintList(ColorStateList) 的方式改变:
int[][] states = new int[][]{
{android.R.attr.state_enabled},
{android.R.attr.state_pressed}
};
int[] colors = new int[]{
android.R.color.darker_gray,
android.R.color.black
};
ColorStateList mColorStateList = new ColorStateList(states, colors);
FAB.setBackgroundTintList(mColorStateList);
- FAB 拓展属性
<declare-styleable name="FloatingActionButton">
<attr name="backgroundTint"/>
<attr name="backgroundTintMode"/>
<attr format="color" name="rippleColor"/>
<attr name="fabSize">
<enum name="auto" value="-1"/>
<enum name="normal" value="0"/>
<enum name="mini" value="1"/>
</attr>
<attr name="elevation"/>
<attr format="dimension" name="pressedTranslationZ"/>
<attr format="dimension" name="borderWidth"/>
<attr format="boolean" name="useCompatPadding"/>
</declare-styleable>
android.support.design.widget.Snackbar
Android中的不影响用户操作的提示语Toast,大家都不陌生吧,但是Toast不可以进行交互操作,在design中出现了新的提示操作,Snackbar。
Snackbar.make(@NonNull View view, @NonNull CharSequence text, @Duration int duration).show();
params
- View 这里的View我个人理解是一个显示Snackbar的容器布局,这个View从源码看还被要求使用android.support.design.widget.CoordinatorLayout布局,该布局位于什么位置Snackbar就显示在什么位置;
- text 显示的文本内容;
- duration 这个与Toast一致,显示的时间长短,相关设置以及结果与也同样与Toast无二;
改变Sanckbar背景色
Sanckbar弹出后的显示的颜色可能有视觉设计师要求修改,但是没有Sanckbar的背景色控制,这里通过源码可以看到一个重要的变量mView,获取的方法为Snackbar.getView(),这里我们可以看到得到的View是一个SnackbarLayout,查看其定义发现是一个Android的布局,这个布局是横向的LinearLayout,因此我们修改Sanckbar的背景可以用:
Snackbar.SnackbarLayout mView = (Snackbar.SnackbarLayout)snackbar.getView();
mView.setBackgroundColor(Color.BLUE);
改变Sanckbar提示文字颜色,Action颜色
在改变Sanckbar背景色我们说到可以取到SnackbarLayout,这里我们看一下Sanckbar这个类中对这个布局的定义 * SnackbarLayout extends LinearLayout * 看的出,它是一个LinearLayout布局,在看看布局文件R.layout.design_layout_snackbar_include
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="@+id/snackbar_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingTop="@dimen/design_snackbar_padding_vertical"
android:paddingBottom="@dimen/design_snackbar_padding_vertical"
android:paddingLeft="@dimen/design_snackbar_padding_horizontal"
android:paddingRight="@dimen/design_snackbar_padding_horizontal"
android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"
android:maxLines="@integer/design_snackbar_text_max_lines"
android:layout_gravity="center_vertical|left|start"
android:ellipsize="end"
android:textAlignment="viewStart"/>
<Button
android:id="@+id/snackbar_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/design_snackbar_extra_spacing_horizontal"
android:layout_marginStart="@dimen/design_snackbar_extra_spacing_horizontal"
android:layout_gravity="center_vertical|right|end"
android:paddingTop="@dimen/design_snackbar_padding_vertical"
android:paddingBottom="@dimen/design_snackbar_padding_vertical"
android:paddingLeft="@dimen/design_snackbar_padding_horizontal"
android:paddingRight="@dimen/design_snackbar_padding_horizontal"
android:visibility="gone"
android:textColor="?attr/colorAccent"
style="?attr/borderlessButtonStyle"/>
</merge>
基础部分基本看完了,我们应该知道有了View,获取View中的控件不是一件困难的事情,这里大家就可以根据需要修改提示文字,按钮了。
TextView mTextView = (TextView) mView.findViewById(R.id.snackbar_text);
mTextView.setTextColor(Color.RED);
初步Design的设计,感觉Android的UI越来越舒服了,用起来也越happy,真希望国内的APP尽快能普及这种设计,不要总是用iOS的那种风格,说真的很多时候感觉根本不适合Android的风格。
源码