Android MaterialDesign

一、CardView

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="20dp"
    app:cardCornerRadius="5dp"
    app:cardBackgroundColor="@color/colorPaiGowYellow">
  • 誤區(qū)：設(shè)置背景顏色，沒有圓角
android:background="@color/colorPaiGowYellow"
mCardView.setBackgroundColor="getResources().getColor(R.color.colorPaiGowYellow)";
  • 解決：設(shè)置控件背景
app:cardBackgroundColor="@color/colorPaiGowYellow"
mCardView.setCardBackgroundColor(getResources().getColor(R.color.colorPaiGowYellow)）;

二、FloatingActionButton

 <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end"/>

    <!--Fab大小設(shè)置-->
    <dimen name="design_fab_size_normal" tools:ignore="PrivateResource">80dp</dimen>
    <!--Fab中間Icon大小設(shè)置-->
    <dimen name="design_fab_image_size" tools:override="true">60dp</dimen>
  • 具有立體感，和普通按鈕功能一樣

三、CircleImageView

<de.hdodenhof.circleimageview.CircleImageView
        android:src="@drawable/image11"
        android:layout_centerInParent="true"
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp" />
  • 圓形圖片，常用于顯示頭像

四、DrawerLayout 、NavigationView

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/img_frame_background"
    tools:context="com.example.lenovo_g50_70.materialdesign.MainActivity">
    <!--側(cè)滑左布局-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:tag="START"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"/>
    <!--側(cè)滑右布局-->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_rightview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        android:tag="END"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"/>
</android.support.v4.widget.DrawerLayout>
  • 允許加入兩個(gè)子控件，分別是側(cè)滑菜單和主布局
  • NavigationView：常用于側(cè)滑菜單的根布局
  • 提供更好的側(cè)滑菜單展示效果(nineoldandroids-2.4.0.jar)
drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {//監(jiān)聽菜單滑動時(shí)的動畫效果
                View mContent = drawerLayout.getChildAt(0);
                View mMenu = drawerView;
                float scale = 1 - slideOffset;
                float rightScale = 0.8f + scale * 0.2f;

                //Tag,用于給相關(guān)聯(lián)的view添加額外的信息
                if (drawerView.getTag().equals("START"))
                { //左側(cè)滑欄
                    float leftScale = 1 - 0.3f * scale;

                    ViewHelper.setScaleX(mMenu, leftScale);
                    ViewHelper.setScaleY(mMenu, leftScale);
                    ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
                    ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * (1 - scale));
                    ViewHelper.setPivotX(mContent, 0);
                    ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
                    mContent.invalidate();
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                } else { //右側(cè)滑欄
                    ViewHelper.setTranslationX(mContent, -mMenu.getMeasuredWidth() * slideOffset);
                    ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());
                    ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
                    mContent.invalidate();
                    ViewHelper.setScaleX(mContent, rightScale);
                    ViewHelper.setScaleY(mContent, rightScale);
                }
            }

五、SwipeRefreshLayout

<android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.widget.SwipeRefreshLayout>
  • 下拉刷新，常作為View的根布局，刷新子View的內(nèi)容
  • 第三方依賴，支持下拉刷新和上拉加載
 <com.liaoinstan.springview.widget.SpringView
        android:id="@+id/spring_news"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_news"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </com.liaoinstan.springview.widget.SpringView>

六、CoordinatorLayout 、AppBarLayout 、NestedScrollView 、CollapsingToolbarLayout、Toolbar

CoordinatorLayout是增強(qiáng)版FrameLayout，AppBarLayout是增強(qiáng)版LinearLayout，NestedScrollView是增強(qiáng)版ScrollView，Toolbar是增強(qiáng)版ActionBar，CollapsingToolbarLayout是一個(gè)支持折疊并且?guī)в袃?yōu)美的動畫漸變效果的Layout 。

Toolbar一般作為CollapsingToolbarLayout的直接子布局，CollapsingToolbarLayout一般作為AppBarLayout的直接子布局，AppBarLayout一般作為CoordinatorLayout的直接子布局

CoordinatorLayout的子布局實(shí)現(xiàn)屬性app:layout_behavior="@string/appbar_scrolling_view_behavior"，將滑動事件通知AppBarLayout，使AppBarLayout作出相應(yīng)的動作。

AppBarLayout的子布局實(shí)現(xiàn)屬性app:layout_scrollFlags，其中scroll表示AppBarLayout的ChildView 跟隨滑動事件滑進(jìn)或滑出屏幕 ， 滑動的前提是當(dāng)前的ChildView 前的ChildView也設(shè)置了scroll 屬性，enterAlways 表示快速返回模式，則ChildView的滑動優(yōu)先級大于AppBarLayout外的View，enterAlwaysCollapsed作為enterAlways的附加屬性，需要結(jié)合android:minHeight和enterAlways 一起使用，表示 ChildView先滑動minHeight的距離，然后讓AppBarLayout外的View完成滑動，再滑動ChildView剩下的距離，exitUntilCollapsed 設(shè)置了該屬性的ChildView滑出屏幕后，如果其后面的ChildView沒設(shè)置該屬性，則不能滑出屏幕，snap是ChildView滑動的一個(gè)吸附效果，不會存在局部滑動的情況，在屏幕中整個(gè)顯示或者整個(gè)隱藏 。

CollapsingToolbarLayout的子布局實(shí)現(xiàn)屬性app:layout_collapseMode，其中off是默認(rèn)屬性，表示沒有折疊的行為，pin表示CollapsingToolbarLayout折疊后，設(shè)置該屬性的ChildView將固定在頂部，parallax表示CollapsingToolbarLayout折疊時(shí)，此布局會有視差折疊效果，CollapsingToolbarLayout自己實(shí)現(xiàn)屬性app:contentScrim="?attr/colorPrimary"，表示趨于折疊狀態(tài)以及折疊后的背景顏色 。

   <!--主布局-->
  <android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_girl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.lenovo_g50_70.materialdesign.GirlActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="530dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/girl_image_view"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/ToolBar"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp">
            <TextView
                android:id="@+id/girl_content_text"
                android:layout_margin="10dp"
                android:textSize="20sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

七、Snackbar

可與用戶實(shí)現(xiàn)交互，可比作增強(qiáng)版的Toast

Snackbar.make(v,"Data delete",Snackbar.LENGTH_INDEFINITE)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this,"Data restored",Toast.LENGTH_SHORT).show();
                            }
                        }).show();

八、TextInputLayout

包裹EditText，展示更豐富的提示效果

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginBottom="8dp"
            android:background="@android:color/white"
            android:textColorHint="@color/colorPrimary"
            app:counterEnabled="true"
            app:counterMaxLength="19"
            app:counterOverflowTextAppearance="@color/colorPrimary"
            app:hintTextAppearance="@color/colorPrimary">

            <EditText
                android:imeOptions="actionNext"
                android:id="@+id/log_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="5dp"
                android:background="@null"
                android:hint="用戶名"/>
        </android.support.design.widget.TextInputLayout>

九、BottomNavigationView

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:itemBackground="@null"  -> 取消導(dǎo)航欄的點(diǎn)擊效果
        app:itemIconTint="@color/colorPrimary" 
        app:itemTextColor="@color/colorPrimary" 
        app:menu="@menu/navigation" />

底部Item菜單

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:icon="@mipmap/ic_launcher"
        android:title="首頁" />
    <item
        android:icon="@mipmap/ic_launcher"
        android:title="收藏" />
    <item
        android:icon="@mipmap/ic_launcher"
        android:title="我的" />
</menu>

當(dāng)菜單數(shù)目大于三時(shí)，會有位移動畫，可以通過反射取消該動畫

    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                item.setChecked(item.getItemData().isChecked());
            }
          } catch (Exception e) {
        } 
    }

取消導(dǎo)航欄的每項(xiàng)點(diǎn)擊文字和圖片放大的效果

    <dimen name="design_bottom_navigation_active_text_size">10dp</dimen>
    <dimen name="design_bottom_navigation_text_size">10dp</dimen>

十、啟動頁優(yōu)化

public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

        <activity
            android:name=".ui.activity.SplashActivity"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_layer</item>
    </style>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/colorPrimary"/>

    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher"/>
    </item>

</layer-list>

十一、相關(guān)依賴

  • compile 'com.android.support:design:25.0.1'
  • compile 'de.hdodenhof:circleimageview:2.1.0'
  • compile 'com.android.support:cardview-v7:25.0.1'
  • compile 'com.liaoinstan.springview:library:1.2.6'
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容