天天看點

Android MaterialDesign 元件清單

 前言

MaterialDesin 已經釋出那麼長時間了,到今天項目中還沒有使用到,好在疊代版本會進行嘗試引入新的設計元素。下面内容方面日後快速進行索引。大牛,小牛請繞道。

 新的元素

DrawerLayout,NavigationView,ToolBar

 側滑用到新元件

Android MaterialDesign 元件清單
Android MaterialDesign 元件清單

 内容區域 用到新元件

内容頁面用到的新組建

CoordinatorLayout,AppBarLayout,Toolsbar,FloatingActionButton

Android MaterialDesign 元件清單

上面就是使用新版android studio 2.3 建立的一個模闆用到MaterialDesign 新的控件

具體用法不進行贅述,網上已經被泛濫了。

 元件部分2。

可折疊CollapsingToolbarLayout 配合NestedScrollView 實作可折疊滾動效果

Android MaterialDesign 元件清單

上面效果ComponentTree

Android MaterialDesign 元件清單

連結位址:​​javascript:void(0)​​

 元件部分3

TabLayout +ViewPager實作訓示效果

Android MaterialDesign 元件清單

 元件部分4

共享元素 支援 android sdk 21 +

既然是共享肯定不是一個界面

pageA 設定 共享元素 Name

intent.putExtra("bean", list.get(position));
            view.setTransitionName("aaa");
            ActivityOptions options = ActivityOptions
                    .makeSceneTransitionAnimation(MainActivity.this, view, "aaa");
            // start the new activity
            startActivity(intent, options.toBundle());      

pageB 設定 共享元素 Name = PageA 共享元素

pageB布局中的某個元件和共享元素同名

 效果圖:

Android MaterialDesign 元件清單

 元件部分5

TextInputLayout,cardView

Android MaterialDesign 元件清單

 TextInputLayout 的相關屬性

1.app:hintAnimationEnabled=”true”//設定是否可以使用動畫,預設是true

2.app:hintTextAppearance=”@style/myStyle”//設定hint的文本屬性,改變hint文字的大小顔色等屬性

app:counterEnabled=”true”//設定是否可以開啟計數器,預設是false

app:counterOverflowTextAppearance=”” 電腦越位後的文字顔色和大小

app:counterMaxLength=”“電腦的最大字數限制

app:errorEnabled=”true” 是否允許錯誤提示

app:errorTextAppearance=”” 錯誤提示的文字大小和顔色

app:passwordToggleEnabled=”true”顯示小眼睛

app:passwordToggleTint=”@color/colorAccent” 給小眼睛上色

app:passwordToggleTintMode=”multiply”小眼睛的顯示方式

需要注意的是:如果想要顯示小眼睛,就需要在 TextInputEditText 或者 EditText 中設定 為密碼格式。比如: android:inputType=”textPassword”

 cardView

CardView繼承自FrameLayout類,可以在一個卡片布局中一緻性的顯示内容,卡片可以包含圓角和陰影。

可以使用android:elevation屬性,建立一個陰影的卡片。

怎樣指定CardView的屬性:

1、使用android:cardCornerRadius屬性指定圓角半徑

2、使用CardView.setRadius 設定圓角半徑。

3、使用 android:cardBackgroundColor屬性設定卡片顔色

在建立布局檔案中建立CardView

 元件部分6

沉浸式狀态欄 與透明狀态欄的差別(變色狀态欄),以及了解上的一些誤區。

Android MaterialDesign 元件清單

上面輸入透明狀态欄

繼續閱讀