关于FAB、CardView、Snackbar、TextInpu
http://www.open-open.com/lib/view/open1416664217867.html
1、着色tint
通过修改图像的Alpha遮罩层来修改图像的颜色，从而达到重新着色的目的，
<ImageView
android:src="@mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tint="@color/colorAccent"
android:tintMode="src_in"/>
效果如下：
tint着色
1、修改视图的形状outline
可以使用ViewOutlineProvider来修改outline，之后再将outline作用于视图
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
outline.setRoundRect(0,0,outLineImageView.getWidth(),outLineImageView.getHeight(),40);
}
};
outLineImageView.setOutlineProvider(viewOutlineProvider);
//Sets whether the View's Outline should be used to clip the contents of the View.
outLineImageView.setClipToOutline(true);
裁剪
2、Palette
Palette可以用来提取颜色，让主题可以适应当前页面的色调
代码如下：
private void setPalette() {
Bitmap bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.ic_1);
final Palette.Builder build=new Palette.Builder(bitmap);
build.generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
//通过Palette获得对应的色调
Palette.Swatch swatch=palette.getLightVibrantSwatch();
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(swatch.getRgb()));
getWindow().setStatusBarColor(swatch.getRgb());
}
});
}
依赖
compile 'com.android.support:palette-v7:23.3.0'
可以通过如下几个方法获得对应的色调：
getLightVibrantSwatch()、getVibrantSwatch()、getDarkVibrantSwatch()、getLightMutedSwatch()、getMutedSwatch()、getDarkMutedSwatch()
palette
3、FloatingActionButton
FAB用来表示一个APP最主要的操作（ promoted action），它主要有以下几个属性：
- 属性：
- elevation：正常显示时阴影的大小（FAB在Z轴方向的高度）
- pressedTranslationZ：按下时阴影的大小（按下时，在Z轴的偏移量）
- layout_anchor：锚点
- layout_anchorGrav：相对于锚点的位置
- backgroundTint：背景色，默认的是theme中的colorAccent
- rippleColor：按下时的颜色，默认的是theme中的colorControlHighlight
- fabSize：FAB的大小，normal、mini
代码实现
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_tick"
app:elevation="8dp"
app:fabSize="normal"
app:borderWidth="0dp"
app:pressedTranslationZ="10dp"
app:backgroundTint="#c96449"
app:rippleColor="#dfe7ab"
app:layout_anchor="@id/collapsingToolbarLayout"
app:layout_anchorGravity="bottom|right"
app:useCompatPadding="true"/>
FloatingActionButton
注意：
为FAB添加点击事件，才有ripple的效果
- 样式
- 在屏幕上只能有一个FAB
- 图标：默认，56X56dp；最小40X40dp，用来和屏幕中的其他元素创造视觉的连续性
- icon: 24 x 24dp
Floating action button
参考：
Android Reference FloatingActionButton
Android 设计文档，FAB
4、Snackbar
Snackbar提供了一个可以回调的消息；可以滑出；一个只能同时显示一个Snackbar；高度：48dp (single-line), 80dp (multi-line)
使用的时候，最好将Snackbar与一个CoordinatorLayout关联，这样的话：
- 可以手动滑出
- 在Snackbar出现的时候，一些ui元素会被移动
在Snackbar出现的时候，一些ui元素会被移动
Snackbar.make(coordinatorLayout, "floatingActionButton ", Snackbar.LENGTH_LONG).setAction("ok", null).show();
Android training Snackbar
Android Reference Snackbar
Android Snackbar 设计文档
5、CardView
卡片非常适合展示有不同元素组成的内容，比如带有长标题的图片
- 特点：
- 有圆角
- 有多个Action
- 可以被重新排列、取消
Card的粒子
- 属性
- cardElevation：cardView的高度（投影）
- cardCornerRadius：圆角半径，2dp
- contentPadding：内边距
- cardUseCompatPadding：Add padding in API v21+ as well to have the same measurements with previous versions，不明白
- cardPreventCornerOverlap：为API 20及以前的版本添加padding，防止CardView的内容（ImageView）和CardView的圆角 交叉，效果如下
API 19，cardPreventCornerOverlap为true
但是，有如下限制：
1、使用额外边距
2、不会裁剪其与圆角相交的子视图
API 19，cardPreventCornerOverlap为false
API 23
以上contentPadding="0dp"
代码如下
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentPadding="4dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:cardCornerRadius="2dp"
app:cardPreventCornerOverlap="true"
android:stateListAnimator="@drawable/state_list_animator_selector">
...
</android.support.v7.widget.CardView>
依赖
compile 'com.android.support:cardview-v7:23.0.1'
API 21 以上有效，点击cardView
如果要实现如图点击的效果，添加** stateListAnimator ** 属性，它在API 21以上有效
state_list_animator_selector，代码如下
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="16dp"
android:valueType="floatType" />
</set>
</item>
<item android:state_pressed="false">
<set>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</set>
</item>
</selector>
注意：为cardView添加点击事件，才有上面这个动画效果
参考：
Android 设计文档，Card
Android Reference cardview
5、TextInputLayout
提供一个显示在EditText上方的浮动标签，效果如下
TextInputLayout ，EditText 校验
代码如下
<android.support.design.widget.TextInputLayout
android:layout_margin="30dp"
android:id="@+id/passwordTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="10"
app:counterTextAppearance="@style/MyTextColor"
app:counterOverflowTextAppearance="@android:color/holo_red_dark">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="password"
android:inputType="number"/>
</android.support.design.widget.TextInputLayout>
</br>
<style name="MyTextColor" parent="AppTheme">
<item name="android:textColor">@android:color/holo_red_dark</item>
<item name="android:textColorHint">@color/colorPrimary</item>
</style>
</br>
passwordTextInputLayout.getEditText().addTextChangedListener(new TextWatcher() {
@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(passwordTextInputLayout.getEditText().getText().toString().length()<6){
passwordTextInputLayout.setErrorEnabled(true);
passwordTextInputLayout.setError("密码长度小于6位");
}else {
passwordTextInputLayout.setErrorEnabled(false);
}
}
});
注意：TextInputLayout只能包含一个子View
-
TextInputLayout会在左下角生成一个TextView用来显示错误信息这个效果是怎么实现的呢？
需要借助** setErrorEnabled() **方法，如果传入true，TextInputLayout会在左下角生成一个TextView用来显示错误信息，之后调用setError() 方法，设置错误信息；如果传入false，则移除TextView从而不显示错误信息。 -
如何统计输入的字数？
使用 app:counterEnabled="true"，app:counterMaxLength="10"
统计输入的字数
</br>
代码 下载
</br>
</br>
