Android5.0也出來了老長一段時間了呐芥,5.0推出的MartailDesign系列確實相當高大上,顏色鮮艷像各種套殼的iphone c奋岁,老有設(shè)計范兒了思瘟。接下來,就學(xué)著寫它們的用法闻伶,并寫一些效果滨攻。
github代碼傳送門: https://github.com/18380438200/MDViews
先上效果圖:
Snackbar
在我生命很長的一段歲月里,我用提示都是Toast蓝翰,但是自從我看到微信用了這個滑溜溜地提示框后光绕,我依然拋棄Toast了,因為普通toast太不明顯畜份。Snackbar看似簡單诞帐,用法多姿多彩。
一般用法:
Snackbar.make(rootView,"彈出提示", Toast.LENGTH_SHORT).show();
第一參數(shù)需要傳父容器爆雹,比如在activity中可以這樣獲取rootview:
rootView = getLayoutInflater().inflate(R.layout.activity_main,null);
setContentView(rootView);
setAction()帶點擊事件
snackbar.setAction("右邊文字", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"點擊snackbar",Toast.LENGTH_SHORT).show();
}
}).setCallback(new Snackbar.Callback()).show();
沒有個性啊停蕉,怎么辦愕鼓,為了跟我app應(yīng)景,我就要改背景和文字顏色慧起,那也行菇晃。
/**
* @hide
*
* Note: this class is here to provide backwards-compatible way for apps written before
* the existence of the base {@link BaseTransientBottomBar} class.
*/
@RestrictTo(LIBRARY_GROUP)
public static final class SnackbarLayout extends BaseTransientBottomBar.SnackbarBaseLayout {
public SnackbarLayout(Context context) {
super(context);
}
public SnackbarLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// Work around our backwards-compatible refactoring of Snackbar and inner content
// being inflated against snackbar's parent (instead of against the snackbar itself).
// Every child that is width=MATCH_PARENT is remeasured again and given the full width
// minus the paddings.
int childCount = getChildCount();
int availableWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
if (child.getLayoutParams().width == ViewGroup.LayoutParams.MATCH_PARENT) {
child.measure(MeasureSpec.makeMeasureSpec(availableWidth, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(child.getMeasuredHeight(),
MeasureSpec.EXACTLY));
}
}
}
}
SnackBar有內(nèi)部類,找到布局文件
<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="14dp"
android:paddingBottom="14dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:textAppearance="@style/TextAppearance.Design.Snackbar.Message"
android:maxLines="2"
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="0dp"
android:layout_marginStart="0dp"
android:layout_gravity="center_vertical|right|end"
android:paddingTop="14dp"
android:paddingBottom="14dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:visibility="gone"
android:textColor="?attr/colorAccent"
style="?attr/borderlessButtonStyle"/>
</merge>
所以可以通過得到子控件操縱蚓挤。
Snackbar snackbar = Snackbar.make(rootView,"彈出提示", Toast.LENGTH_SHORT);
View snackView = snackbar.getView();
if(snackView != null){
snackView.setBackgroundResource(R.color.colorAccent);
((TextView)snackView.findViewById(R.id.snackbar_text)).setTextColor(Color.WHITE);
}
snackbar.setAction("右邊文字", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"點擊snackbar",Toast.LENGTH_SHORT).show();
}
}).show();
CardView
帶圓角和陰影的卡片(而且拿得起磺送,放得下)
它繼承自FrameLayout,所以不便于布局屈尼,我們使用時常常嵌套一層Relativelayout册着。普通的圓角可用shape來實現(xiàn),但是想要更好體驗效果脾歧,還是得cardview來實現(xiàn)甲捏,誰的項目里沒有用到幾處cardview呢?
整體用法:
<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:stateListAnimator="@animator/cardview_touchraise"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardBackgroundColor="@android:color/white"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="4dp"/>
它的常用屬性如下:
1.cardBackgroundColor 背景色
2.cardCornerRadius 圓角半徑
3.cardElevation 陰影寬度
有可能我們只需要圓角不需要陰影鞭执,cardElevation=0就可以去掉陰影司顿。
4.lift-on-touch 觸摸抬起效果
給人的感覺是真的把卡片拿起來了有沒有?
使用方法:
android:stateListAnimator="@animator/cardview_touchraise"
cardview_touchraise如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true">
<objectAnimator
android:duration="400"
android:propertyName="translationZ"
android:valueTo="4dp"/>
</item>
<item>
<objectAnimator
android:duration="400"
android:propertyName="translationZ"
android:valueTo="0dp" />
</item>
</selector>
使用的是objectAnimator屬性動畫兄纺,陰影沿著Z軸從0漸變?yōu)?dp大溜。
5.foreground 波紋效果
這里顏色選用系統(tǒng)自帶的selectableItemBackground顏色。
自定義波紋顏色:
android:foreground="@drawable/ripple"
ripple.xml資源文件:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/colorAccent"
android:drawable="@drawable/foreground"
tools:ignore="NewApi" />
foreground.xml資源文件:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#2feaea"/>
</shape>
</item>
<item android:state_focused="true"
android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#0f000000"/>
</shape>
</item>
</selector>
FloatingActionButton
懸浮按鈕估脆,通常見于向上回頂按鈕钦奋。
用法:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:borderWidth="6dp"
android:backgroundTint="@color/colorPrimary"
app:rippleColor="@color/colorPrimary"
app:pressedTranslationZ="@dimen/cardview_default_elevation"
android:background="@mipmap/display_love_pressed"/>
borderWidth 邊框?qū)挾?br>
backgroundTint 背景色
rippleColor 按下波紋顏色
pressedTranslationZ 外環(huán)陰影
如果想給它加上按下變換圖片,background就設(shè)置selector
SwitchCompat
Android里面要用到開關(guān)按鈕疙赠,通常要自定義控件SwithButton之類的付材,但是MD包下已經(jīng)有自帶控件SwitchCompat,用法如下
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="20dp"
android:checked="true"
android:textOn="開"
android:textOff="關(guān)"
app:showText="true"/>
showText屬性設(shè)置是否顯示文字圃阳,textOn厌衔,textOff分別設(shè)置開關(guān)的文字,setOnCheckedChangeListener設(shè)置切換監(jiān)聽捍岳。