第一个Android应用的布局框架搭建

序：对于初学Android的人来说，会有很多困惑，一切从零学起，也就不知道从何学起，我也是硬着头皮啃了几本Android的书籍后，掌握了基础的Android知识后，才慢慢的对它有了一定的认识。但看着市场上优秀的APP，想要做一个与它一样的应用，却又不知如何做起，摸索了一段时间后才慢慢摸清了套路。文章是对自己学习的一个总结，也希望能够帮助更多像我一样的初学者。本文是第一篇入门级的Android应用开发布局框架搭建教程，有了它，以后我们可以慢慢的将更丰富的内容加进去，构建属于自己的应用。如有纰漏，欢迎批评指正。

先上图：

本文采用DrawerLayout和NavigationView来实现整体的布局。步骤如下：

一.添加Design的依赖

compile'com.android.support:design:26+'

二.编写主要的布局文件

1.activity_main.xml

<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:fitsSystemWindows="true"
    tools:openDrawer="start">
    <include
        layout="@layout/main_body"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_body" />

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

该布局包括了主布局和导航布局两部分，主布局以include方式加入进来，NavigationView为导航布局。导航布局的头部通过app:headerLayout方式导入，导航布局的主题部分通过app:menu方式导入。android:layout_gravity="start"指定了导航栏菜单为左滑显示。

2.main_body.xml

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >
    <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="#eeeeee"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

3.nav_header.xml

<LinearLayout 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="wrap_content"
    android:background="#292f3d"
    android:gravity="bottom"

    android:orientation="vertical"
    android:paddingTop="40dp"
    android:paddingBottom="20dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="全栈工程师"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="123456789@qq.com" />

</LinearLayout>

4.nav_body.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single"
        >
        <item
            android:id="@+id/nav_model"
            android:icon="@mipmap/ic_launcher"
            android:title="模型框架" />
        <item
            android:id="@+id/nav_math"
            android:icon="@mipmap/ic_launcher"
            android:title="数学基础" />
        <item
            android:id="@+id/nav_web"
            android:icon="@mipmap/ic_launcher"
            android:title="Web" />
        <item
            android:id="@+id/nav_android"
            android:icon="@mipmap/ic_launcher"
            android:title="Android" />
    </group>
</menu>

三.编写MainActivity.java

在点击导航栏item时跳转到不同的fragment，显示对应的界面，核心代码为：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);//支持Toolbar
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();//设置toobar和drawerlayout联动

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);//设置导航栏监听器

在 onNavigationItemSelected()函数中处理点击item时替换不同的fragment

getSupportFragmentManager().beginTransaction().replace(R.id.content_main,new ModelFragment()).commit();

总结：框架很简单，搭建了左滑菜单和主布局，可以根据自己的需要进行填充，完善自己的应用。完整github地址：https://github.com/DreamInDream/MyFirstAppFramework