第十二章--material design 實(shí)踐

1.app主題使用理解

  • 基本主題使用
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>    <!-- 標(biāo)題欄的背景色 -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <!-- 頂部顯示時(shí)間,網(wǎng)絡(luò)時(shí)的背景色 -->
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>
  • toolbar使用
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:layout_height="?attr/actionBarSize"></android.support.v7.widget.Toolbar>

2.滑動(dòng)菜單

  • DrawerLayout :這是一個(gè)布局,允許直接放入兩個(gè)子控件;第一個(gè)子控件是主屏幕中顯示的內(nèi)容;第二個(gè)子控件是滑動(dòng)菜單中顯示的內(nèi)容扇救。第二個(gè)子控件中的layout_gravity屬性必須指定,這是判斷屏幕左滑還是右滑出現(xiàn)抽屜菜單的香嗓。

  • NavigationView:放置在DrawerLayout下迅腔,作為第二個(gè)子控件; NavigationView中有兩個(gè)子布局:nav_menu掺出,headerlayout百框;

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <TextView
          android:text="fff"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/headerlayout"
        app:menu="@menu/nav_menu" />

</android.support.v4.widget.DrawerLayout>

//點(diǎn)擊事件處理
    mDrawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView  navigationView= (NavigationView) mDrawerLayout.findViewById(R.id.nav_view);
        navigationView.setCheckedItem(R.id.nav_call);

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.nav_bike:
                        Toast.makeText(NavigationActivity.this,"bike",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_call:
                        Toast.makeText(NavigationActivity.this,"call",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_eat:
                        Toast.makeText(NavigationActivity.this,"eat",Toast.LENGTH_SHORT).show();
                        break;
                }
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
  • FloatingActionButton 懸浮按鈕,普通按鈕使用
    <android.support.design.widget.FloatingActionButton
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_margin="10dp"
        />
  • Snackbar 提示布局锨并,底部出現(xiàn)露该,類(lèi)似Toast
  • 卡片式布局

3.優(yōu)雅的顯示

  • 解決控件間的遮擋問(wèn)題
  • recycleview向下滑動(dòng)的時(shí)候解幼,toolbar隱藏特铝,向上出現(xiàn)解決方式
Paste_Image.png
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap" />
        </android.support.design.widget.AppBarLayout>

        <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.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.v4.widget.SwipeRefreshLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done" />
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

</android.support.v4.widget.DrawerLayout>

  • 下拉刷新控件

  • 可折疊式標(biāo)題欄

  • 充分利用系統(tǒng)狀態(tài)欄空間

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末澄者,一起剝皮案震驚了整個(gè)濱河市俄精,隨后出現(xiàn)的幾起案子竖慧,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件帚稠,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡杆麸,警方通過(guò)查閱死者的電腦和手機(jī)减细,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事琼腔〉ち” “怎么了擂达?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我绵患,道長(zhǎng),這世上最難降的妖魔是什么移迫? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任荡陷,我火速辦了婚禮顿肺,結(jié)果婚禮上屠尊,老公的妹妹穿的比我還像新娘托享。我一直安慰自己羡榴,他們只是感情好稻扬,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布汽绢。 她就那樣靜靜地躺著宁昭,像睡著了一般蜕猫。 火紅的嫁衣襯著肌膚如雪回右。 梳的紋絲不亂的頭發(fā)上隆圆,一...
    開(kāi)封第一講書(shū)人閱讀 49,144評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音翔烁,去河邊找鬼渺氧。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蹬屹,可吹牛的內(nèi)容都是我干的侣背。 我是一名探鬼主播白华,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼贩耐!你這毒婦竟也來(lái)了衬鱼?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤憔杨,失蹤者是張志新(化名)和其女友劉穎鸟赫,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體消别,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡抛蚤,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了寻狂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岁经。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蛇券,靈堂內(nèi)的尸體忽然破棺而出缀壤,到底是詐尸還是另有隱情,我是刑警寧澤纠亚,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布塘慕,位于F島的核電站,受9級(jí)特大地震影響蒂胞,放射性物質(zhì)發(fā)生泄漏图呢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一骗随、第九天 我趴在偏房一處隱蔽的房頂上張望蛤织。 院中可真熱鬧,春花似錦鸿染、人聲如沸指蚜。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)摊鸡。三九已至,卻和暖如春丢烘,著一層夾襖步出監(jiān)牢的瞬間柱宦,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工播瞳, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人免糕。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓赢乓,卻偏偏與公主長(zhǎng)得像忧侧,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子牌芋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容