扒一扒Android那些常用的布局

通用抽屜布局(DrawerLayout)

效果圖

布局

布局文件

新建一個tool_bar.xml

之所以使用另外新建布局文件靠柑,是因為考慮到toolbar在很多Activity可能會復(fù)用奇唤。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:layout_scrollFlags="enterAlways|scroll">

</android.support.v7.widget.Toolbar>

新建一個drawer.xml

新建一個drawer.xml純屬是因為不想把太多代碼寫在一個布局文件里面始腾。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="this is content" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#fff"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="option1"
            android:text="選項1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="option2"
            android:text="選項2" />
    </LinearLayout>

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

注意,一個DrawerLayout里面需要有兩個ViewGroup港谊,其中帶有android:layout_gravity="start"的將會是左邊側(cè)滑的菜單贾漏。

activity_main.xml

由于上面兩個布局都寫好了,所以我們就直接包含進(jìn)來就可以了具伍。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/toolbar"
        layout="@layout/tool_bar" />

    <include
        android:id="@+id/drawerLayout"
        layout="@layout/drawer" />
</LinearLayout>

菜單文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:icon="@mipmap/ic_launcher"
        android:title="選項1"
        app:showAsAction="always" />
    <item android:title="選項2" />
    <item android:title="選項3" />
    <item android:title="選項4" />
    <item
        android:title="選項5"
        app:showAsAction="always" />
</menu>

app:showAsAction表示該菜單項會在toolbar上顯示

MainActivity.java

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        setupDraerLayuout();
    }

    private void setupDraerLayuout() {
        toolbar.setTitle("");
        toolbar.setTitleTextColor(Color.parseColor("#ffffff"));
        setSupportActionBar(toolbar);
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0) {
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                Toast.makeText(MainActivity.this, "close", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                Toast.makeText(MainActivity.this, "open", Toast.LENGTH_SHORT).show();
            }
        };
        drawerToggle.syncState();
        drawerLayout.setDrawerListener(drawerToggle);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    public void option1(View v) {
        Intent intent = new Intent();
        intent.setClass(this, ToolbarHideActivity.class);
        startActivity(intent);
    }

    public void option2(View v) {
        Intent intent = new Intent();
        intent.setClass(this, CollaspingLayoutActivity.class);
        startActivity(intent);
    }
}

較為關(guān)鍵的應(yīng)該就是下面的代碼

        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, 0, 0) {
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                Toast.makeText(MainActivity.this, "close", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                Toast.makeText(MainActivity.this, "open", Toast.LENGTH_SHORT).show();
            }
        };
        drawerToggle.syncState();
        drawerLayout.setDrawerListener(drawerToggle);

由于ActionBarDrawerToggle自身實現(xiàn)DrawerLayout.DrawerListener接口翅雏,所以我們只需要重寫他的一些接口方法,就可以直接設(shè)置為drawerLayout的監(jiān)聽器了人芽。

導(dǎo)航抽屜布局(DrawerLayout)

效果圖

布局

這種布局跟上面的布局差不多望几,只是左邊的側(cè)滑欄改變了。我們不使用普通的LinearLayout啼肩,而是使用NavigationView代替橄妆。這讓我們的代碼更加地優(yōu)雅衙伶。

所以我們只需要在上面的代碼作修改

activity_main_drawer.xml

左邊的選項是通過菜單的形式展示的

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/option1"
            android:icon="@mipmap/ic_launcher"
            android:title="選項1" />
        <item
            android:id="@+id/option2"
            android:icon="@mipmap/ic_launcher"
            android:title="選項2" />
    </group>

    <item android:title="分組2">
        <menu>
            <item
                android:id="@+id/option3"
                android:icon="@mipmap/ic_launcher"
                android:title="選項3" />
            <item
                android:id="@+id/option4"
                android:icon="@mipmap/ic_launcher"
                android:title="選項4" />
        </menu>
    </item>


</menu>

drawer.xml

我們只需要把原來的LinearLyaout改成NavigationView就可以了祈坠。

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="this is content" />
    </LinearLayout>

  
    <android.support.design.widget.NavigationView
        android:id="@+id/nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/activity_main_drawer"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

MainActivity.java

至于代碼害碾,差不多就只有設(shè)置菜單點擊事件的代碼了

navigationView.setNavigationItemSelectedListener(this);

可選

因為我們的效果是帶有圖片的,這一步可以為左邊的側(cè)滑欄添加headerView赦拘。

header_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/header" />

</LinearLayout>

MainActivity.java

NavigationView navigationView = (NavigationView) findViewById(R.id.nav);
        navigationView.addHeaderView(getLayoutInflater().inflate(R.layout.header_view, null, false));

上述代碼就可以為NavigationView添加一個headerView了慌随。

普通Toolbar自動隱藏布局(視差滾動視圖)

效果圖

布局
布局

這是純布局的代碼,那就直接上代碼了躺同。

布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <include
            android:id="@+id/toolbar"
            layout="@layout/tool_bar" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/text" />

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

ToolbarHideActivity.java

public class ToolbarHideActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_toolbar_hide);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("新聞");
        setSupportActionBar(toolbar);
    }
}

帶圖片的Toolbar自動隱藏布局(視差滾動視圖)

效果圖

布局
布局

這個基本也都是純布局的代碼

activity_collapsing_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/header"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <include layout="@layout/tool_bar" />
        </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">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/text" />

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fac"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="6dp"
        android:src="@mipmap/ic_launcher"
        app:backgroundTint="@color/colorPrimary"
        app:layout_anchor="@id/toolbar_layout"
        app:layout_anchorGravity="bottom|center"
        app:pressedTranslationZ="16dp"
        app:rippleColor="@color/colorPrimaryDark" />


</android.support.design.widget.CoordinatorLayout>
  • app:layout_scrollFlags

    • scroll: 當(dāng)滾動的時候開始移出屏幕
    • enterAlways: 一旦向上滾動這個view就可見阁猜。
    • enterAlwaysCollapsed: 顧名思義,這個flag定義的是何時進(jìn)入(已經(jīng)消失之后何時再次顯示)蹋艺。假設(shè)你定義了一個最小高度(minHeight)同時enterAlways也定義了剃袍,那么view將在到達(dá)這個最小高度的時候開始顯示,并且從這個時候開始慢慢展開捎谨,當(dāng)滾動到頂部的時候展開完民效。
    • exitUntilCollapsed: 同樣顧名思義,這個flag時定義何時退出涛救,當(dāng)你定義了一個minHeight畏邢,這個view將在滾動到達(dá)這個最小高度的時候消失。
  • app:contentScrim: 當(dāng)內(nèi)容收起來的時候检吆,顯示的背景顏色舒萎。

  • appbar_scrolling_view_behavior: 改字符串其實是一個class的完成名字,可以直接被使用蹭沛。這個Behavior的class是真正控制滾動時候View的滾動行為.我們也可以繼承Behavior這個class去實現(xiàn)特有的滾動行為.

CollapsingLayoutActivity.java

public class CollapsingLayoutActivity extends AppCompatActivity{


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing_layout);
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末臂寝,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子摊灭,更是在濱河造成了極大的恐慌交煞,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件斟或,死亡現(xiàn)場離奇詭異素征,居然都是意外死亡,警方通過查閱死者的電腦和手機萝挤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門御毅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人怜珍,你說我怎么就攤上這事端蛆。” “怎么了酥泛?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵今豆,是天一觀的道長嫌拣。 經(jīng)常有香客問我,道長呆躲,這世上最難降的妖魔是什么异逐? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮插掂,結(jié)果婚禮上灰瞻,老公的妹妹穿的比我還像新娘。我一直安慰自己辅甥,他們只是感情好酝润,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著璃弄,像睡著了一般要销。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上夏块,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天疏咐,我揣著相機與錄音,去河邊找鬼拨扶。 笑死凳鬓,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的患民。 我是一名探鬼主播缩举,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼匹颤!你這毒婦竟也來了仅孩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤印蓖,失蹤者是張志新(化名)和其女友劉穎辽慕,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體赦肃,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡溅蛉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了他宛。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片船侧。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖厅各,靈堂內(nèi)的尸體忽然破棺而出镜撩,到底是詐尸還是另有隱情,我是刑警寧澤队塘,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布袁梗,位于F島的核電站宜鸯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏遮怜。R本人自食惡果不足惜淋袖,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望奈泪。 院中可真熱鬧适贸,春花似錦灸芳、人聲如沸涝桅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽冯遂。三九已至,卻和暖如春谒获,著一層夾襖步出監(jiān)牢的瞬間蛤肌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工批狱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留裸准,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓赔硫,卻偏偏與公主長得像炒俱,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子爪膊,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

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