安卓开发之前端界面的搭建

前段时间因为网络编程这门课要做一个课程project，题目是本地服务器的开发，需要开发一个安卓客户端，于是就把去年小学期学的那点安卓知识捡起来了（心累）

想到去年小学期学的那点安卓真的不算什么，就是一些很简单的东西，所以为了做好这次前端，努力学了很多安卓的前端搭建知识，毕竟是数媒人，在前端上可不能输给其他专业的（哼~）

这次的安卓开发需求比较简单，要求的功能不多因此界面也没有几个。

界面清单

• 连接服务器界面
• 登录界面
• 注册界面
• 首页界面
• 消息界面
• 社区界面
• 设置界面
• 联系人界面
• 添加好友界面
• 好友聊天界面
• 社区消息编辑界面
• 添加联系人界面

有些界面其实差不多，基本上要用到以下一些组件：

• 按钮Button
• 文本显示TextView
• 文本域Text Field
• 图表charts
• 工具条toolbar
• 浮动按钮fab
• 列表ListView
• 页面切换Tab
• 刷新

接下来我就介绍一些组件的使用

一、开发环境

Android Studio2.0

Android Studio 是一个Android集成开发工具，基于IntelliJ IDEA. 类似 Eclipse ADT，Android Studio 提供了集成的 Android 开发工具用于开发和调试。

我以前用的是eclipse with ADT进行开发的，现在安卓开发基本上主流的就是这两种IDE，eclipse是老牌的java IDE，自然也支持安卓开发。我用eclipse的时候觉得他对界面的可视化编辑比较差，而且开模拟器会很卡，然后这次决定采用AS进行开发，AS对界面的可视化编辑支持比较好，模拟器比较快（我一般是用真机调试）但是打代码的时候总有一种我在写C++的错觉…

还有要说的一点是，eclipse和AS的项目结构是不一样的！在eclipse里面一个project就是一个app，但是在AS里面project不是app的意思，而是一个项目的意思，这个项目底下可以有多个app同时存在，当你运行的时候要选择运行哪个app。AS在侧边栏可以支持多种文件结构视图，通常我是看Android 视图，这样子看起来就和eclipse的结构差不多了。

关于文件结构、文件功能我就不多说了，网上有很多入门资料。

二、定制自己的ToolBar

通常新建一个项目安卓会自动的给你界面加上一个丑丑的toolbar，而且不好改他的功能，因为有时候我们需要在toolbar加上按钮来跳转，所以为了解决这个问题我们可以定制自己的toolbar。

先看一下效果：

这是统一模板：建立一个layout文件，layout_common_toolbar.xml

代码如下：

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

    <RelativeLayout
        android:id="@+id/toolbar_content_rlyt"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:background="@color/bg_toolbar">

        <Button
            android:id="@+id/toolbar_left_btn"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentLeft="true"
            android:padding="50dp"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:background="#00000000"
            android:visibility="invisible"/>
        <TextView
            android:id="@+id/toolbar_left_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/toolbar_left_btn"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:textColor="#fff"
            android:textSize="15sp"
            android:text="返回"
            android:visibility="gone"
            />

        <TextView
            android:id="@+id/toolbar_title_tv"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:singleLine="true"
            android:text="标题"
            android:textSize="20sp"
            android:textColor="#fff"
            android:maxEms="10"
            android:visibility="invisible"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@id/toolbar_title_tv"
            android:layout_centerVertical="true">
            <Button
                android:id="@+id/toolbar_right_btn"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:gravity="center"
                android:layout_marginLeft="70dp"
                android:visibility="invisible"
                android:background="#00000000"
                android:textSize="15sp"
                android:textColor="#fff"/>

            <TextView
                android:id="@+id/toolbar_right_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_marginLeft="70dp"
                android:textColor="#fff"
                android:textSize="15sp"
                android:text="更多"
                android:visibility="gone"/>

            <Button
                android:id="@&#