Android使用bootstrap简单介绍

1、简介

开源项目到处都有bootstrap的简介，但仅仅停留在提一提的程度。博主自己写了一个简单的demo，运行效果还不错。这里记录下开发步骤吧。按照惯例先介绍下bootstrap，bootstrap是Twitter推出的前端的一个快速开发漂亮网站的框架，网页的图标和样式都很好看，而这个Android-bootstrap项目就是网页的图标效果到android中来。该项目中自己封装了一些常用前端显示组件（现在有四个组件bootstrap buttons，font awesome texts，bootedittext，bootstrap thumbnails，其他如tabs，actionbar正在开发中），而且自定义了一些属性（这些属性值可以在源码中layout下的attrs.xml中看到），可以通过xml布局文件和代码来改变。这些组件很好玩，比如封装的bootstrap buttons中有三个TextView，可以设置他们的图像、文字和位置，还有一些小图标可以闪烁和旋转，这些封装组件在项目源码中都可以看到。而且使用也很简单，和android自带的那些组件类似的使用方法。

在了解bootstrap之前，您或许还需要了解下font awesome。不知道的可以移步：http://blog.csdn.net/dsc114/article/details/50404160

2、使用步骤

1）、添加包：com.beardedhen:androidbootstrap:2.0.1.

      dependencies {
                        compile fileTree(include: ['*.jar'], dir: 'libs')
     compile 'com.android.support:appcompat-v7:23.1.1'
      compile 'com.android.support:design:23.1.1'
      compile 'com.shamanland:fonticon:0.1.8'
    compile 'com.beardedhen:androidbootstrap:2.0.1'
compile files('libs/EventBus2.4.jar')
} 

2、在aseets中添加font awesome-webfont.ttf文件.

3、在Application-->oncreate()中添加：

TypefaceProvider.registerDefaultIconSets();

4、然后布局里就可以使用bootstrap了。例如添加一个TextView

<com.beardedhen.androidbootstrap.AwesomeTextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         bootstrap:bootstrapBrand="success"
        bootstrap:fontAwesomeIcon="fa_thumbs_o_up"/>

注意别忘记添加命名空间：xmlns:bootstrap=”http://schemas.android.com/apk/res-auto”

Bootstrap:fontAwesomeIcon=”fa_thumbs_o_up”的值需要在string.xml中提前定义好.

Icon的选择可以在http://fortawesome.github.io/Font-Awesome/cheatsheet/里找到。

无图无真相，截一张别人的图：

参考：

1）https://github.com/Bearded-Hen/Android-Bootstrap/wiki

2）http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0925/3518.html