写给安卓萌新的教程 - 实践篇（一个简易的侧边栏App）

发表于

Introduction

环境配置好了，现在就万事俱备了，然后我们就应该动手啦～

出于种种考虑……决定教大家用模版做一个简单的带有侧边栏的App来体验一下Android的乐趣所在。

Now, let’s begin.

新建工程

  • 点击Start a new Android Studio project

之后就不用多说了，自己选择工程名字和所在位置。

  • 选择模版Navigation Drawer Activity

后面基本一路Next就好，相信聪明的你一定会的(๑•̀ㅂ•́)و✧

目录结构介绍

在Android Studio中，提供了以下几种项目结构类型：

我们一般常用的有以下两种结构：

Project结构类型

  • app/build/ app模块build编译输出的目录
  • app/build.gradle app模块的gradle编译文件
  • app/app.iml app模块的配置文件
  • app/proguard-rules.pro app模块proguard文件
  • build.gradle 项目的gradle编译文件
  • settings.gradle 定义项目包含哪些模块
  • gradlew 编译脚本，可以在命令行执行打包
  • local.properties 配置SDK/NDK
  • MyApplication.iml 项目的配置文件
  • External Libraries 项目依赖的Lib, 编译时自动下载的

Android结构类型

  • app/manifests AndroidManifest.xml配置文件目录
  • app/java 源码目录
  • app/res 资源文件目录
  • Gradle Scripts gradle编译相关的脚本

推荐大家多用Project目录，加强对工程的整体把握。

布局文件

因为在开始我们选择使用了侧滑栏的模版，所以我们可以看到app/res/layout布局文件中除了activity_main.xml之外已经自动帮我们生成了app_bar_main.xml、content_main.xml、nav_header_main.xml三个布局文件，接下来就简单介绍一下它们。

  • content_main.xml

这个布局很简单，就只有一个TextView显示Hello World!文字。其中相关的参数根据中文意思你们也应该能差不多猜到，这里不详细介绍，以后大家都会学到的…

  • app_bar_main.xml

布局包含三个部分，其中两个请参考图中标识。

文字部分是通过

1
<include layout="..."/>

的方式包含content_main.xml布局，所以会显示Hello World!文字。

  • nav_header_main.xml

聪明的你一定会举一反三，很容易看出来，这个布局就是 一张图加两句话 一个ImageView + 两个TextView。

嗯，忍住没换那个丑丑的绿色背景，不，忍不住了，先换了再说…

  • activity_main.xml

虽然还是不好看，咳咳……我们先说正事。

activity_main.xml就是整个工程的主布局文件，包括app_bar_main.xml和一个侧边栏的布局。

可以看到，实际上NavigationView就是侧边栏的布局，包含了头部文件和菜单两个板块。头部文件实际上就是nav_header_main.xml布局，菜单部分你们可以在app/res/menu中自行查看，在此不做过多介绍。

好了，布局文件到此就告一段落了(´・◡・｀)

源码部分

这里主要讲两个部分的内容来帮助你们理解和使用⊱(“ ڡ “)⊰

findViewById()

我们可以看到在MainActivity中，有以下代码：

1
2
3
4
5
6
7
8
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
...
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
...
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
...
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
...

这些都是findViewById()的使用。Android中findViewById()是一个非常常用的函数，位于android.app.Activity包中。该函数利用我们在XML文件中定义的View的id属性来获取相应的View对象。当然，这不是唯一的方法，但是还是希望你们能熟练掌握这种方式＼( ◠‿◠ )／

接下来我们举个例子 ☞☞☞

相信大家都记得在content_main.xml中有一个TextView，我们在布局文件中给它设置一个id:

1
android:id="@+id/txv"

回到代码部分，我们先导入要用到的包:

1
import android.widget.TextView;

之后，在OnCreate部分写入代码:

1
2
3
4
TextView textView = (TextView) findViewById(R.id.txv);
        textView.setText("欢迎加入木犀团队！");
        textView.setTextColor(getResources().getColor(R.color.colorPrimary));
        textView.setTextSize(24);

这里可以看到，我们先用findViewById()关联布局文件之后，可以通过setText()、setTextColor()、setTextSize()分别来动态设置TextView所显示的文字、字体颜色以及字体大小。最后的效果就是这样子 ☞

当然啦，看到这里之后你就可以 随心所欲，为所欲为 发挥自己的想象力和创造力了꒰ ∩´∇ `∩꒱

setOnClickListener()

在Android中，我们可以通过setOnClickListener()为各种Button设置监听事件。

举个例子，在代码中:

1
2
3
4
5
6
7
fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
        }
});

这样就为FloatingActionButton设置了监听，点击FloatingActionButton之后，
会通过Snackbar显示”Replace with your own action”

实际上，我们可以在这里写上我们想要实现的代码，这里就留给你们自己动手实践一下啦。

Ending

看到这里，有木有觉得Android很有趣（有，我帮你们回答了…）

在这里放上代码的链接，可以作为参考。

最后，附上Git安装，完成这部分代码之后，请使用git推代码到Github上，在报名表单上填入自己Github的链接。当然，如果能在保证完成度的情况下加入自己的创意当然更好啦(๑•̀ㅂ•́)و✧