左边栏UI布局与抽屉（DrawerLayout）的使用

左边栏UI布局

---

原则

1. 先一大块一大块的整体布局好（敲XML代码，而不是通过鼠标拖拽控件）
2. 再填写元素内容
3. 最后在慢慢调整

XML代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.js.LeftActivity">
    <!-- 用户部分-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center_horizontal"
            android:layout_margin="10dp"
            android:background="@drawable/left_face" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="尊敬的游客用户"
            android:textSize="15dp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_margin="10dp"
            android:gravity="center">

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/peach" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:text="100"
                android:textColor="#bab6b6"
                android:textSize="15sp" />
        </LinearLayout>
        <!-- 立即登录控件 -->
        <Button
            android:layout_width="250dp"
            android:layout_height="50dp"
            android:layout_gravity="center_horizontal"
            android:background="#e9e5e5"
            android:text="立即登录"
            android:textColor="#b3aaaa"
            android:textSize="20sp" />
    </LinearLayout>

    <!--图片控件 -->
    <LinearLayout
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:weightSum="3">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/left_sign" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="签到" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:background="@drawable/left_chong" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="充值" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:scaleType="fitXY"
                android:src="@drawable/left_manage" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="设置" />

        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:background="#00f"></View>


    <!--四个条目 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:padding="10dp">

            <ImageView
                android:id="@+id/iv_1"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:background="@drawable/left_gl" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/iv_1"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="阅读管理"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="点击进入阅读管理，管理您的阅读记录"
                    android:textColor="#636363"
                    android:textSize="10sp" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:padding="10dp">

            <ImageView
                android:id="@+id/iv_2"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:background="@drawable/left_jb" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/iv_2"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="金币值"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="通过虚拟金币值，您可以在本软件内阅读付费的小说"
                    android:textColor="#636363"
                    android:textSize="10sp" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:padding="10dp">

            <ImageView
                android:id="@+id/iv_3"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:background="@drawable/left_qb" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/iv_3"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="充值"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="您可以定期订阅相应的小说，不会错过精彩"
                    android:textColor="#636363"
                    android:textSize="10sp" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:padding="10dp">

            <ImageView
                android:id="@+id/iv_4"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerVertical="true"
                android:background="@drawable/left_gift" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/iv_4"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="您的礼物"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="您可以查看由其他游客赠送的和剑圣阅读随机赠送的礼物"
                    android:textColor="#636363"
                    android:textSize="10sp" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

---

运行结果（含抽屉（DrawerLayout）效果）

---

抽屉（DrawerLayout）使用步骤

1、 先在主界面定义根元素：

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

2、在主界面XML定义帧布局：

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity = "
        android:id="@+id/frame">

3、最后在主界面Activity写上FrameLayout关联Layout代码

// 添加左侧边栏的布局
FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frame);
// 通过View的静态方法，唤醒布局，成为View
View view = View.inflate(this, R.layout.activity_left, null);
frameLayout.addView(view);