Android Bootstrap 2.xでUI改善

  • 12
    Like
  • 0
    Comment
More than 1 year has passed since last update.

AndroidアプリのUIを改善したい

以前、初めてのAndroidアプリとして、AWSの請求金額を取得するAndroidアプリを作りました。自分しか使わないのでデザインはどうでもいいのですが、さすがに見た目がこれ
WS000011.JPG
ではどうかと思ったので、Android Bootstrapを利用してUIを改善します。

Android Bootstrapを導入する

Android Bootstrapライブラリを取得する

「build.gradle」のdependenciesに以下を追記します。利用するAndroid Bootstrapは2.xです。1.xの場合、以降で記述する導入、利用方法が異なるようなのでご注意ください。

build.gradle
dependencies {
    compile 'com.beardedhen:androidbootstrap:2.+'
}

Applicationクラスを拡張する

Applicationクラスを継承した新規クラスを作成し、onCreateメソッドを拡張して、FontAwesomeのWebフォントをアイコンとして使えるようにします。

BillingInfoBootstrap.java
import android.app.Application;
import com.beardedhen.androidbootstrap.TypefaceProvider;

public class BillingInfoBootstrap extends Application {
    @Override public void onCreate() {
        super.onCreate();
        TypefaceProvider.registerDefaultIconSets();
    }
}

マニフェストファイルを修正する

マニフェストファイルに上記で作成したクラスを追記します。

AndroidManifest.xml
<application
    android:name="BillingInfoBootstrap"
>
    ・・・
</application>

レイアウトファイルを修正する

レイアウトファイルでBootsotrapの名前空間が利用できるように以下を追記します。

activity_main.xml
<RelativeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
>

UIを改善する

Android Bootstrapを利用する環境が整ったので、実際にUIを改善します。

ラベルを修正する

appで始まる要素がBootstrap独自の要素です。

activity_main.xml
    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="請求金額"
        android:id="@+id/view"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h4"
/>

テキストを修正する

activity_main.xml
    <com.beardedhen.androidbootstrap.AwesomeTextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:id="@+id/billingCost"
        android:textSize="100dp"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/view" 
        app:bootstrapBrand="primary"/>

ボタンを修正する

bootstrapTextでFontAwesomeのWebフォントを利用しています。
http://fontawesome.io/cheatsheet/から、利用したいフォントを探して、そのクラス名を記述します。また、app:roundedCornersにtrueを指定すると、ボタンの角が丸くなります。

activity_main.xml
    <com.beardedhen.androidbootstrap.BootstrapButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/update"
        android:height="50dp"
        android:textStyle="bold"
        android:layout_below="@+id/billingCost"
        android:layout_alignParentStart="true"
        android:layout_marginTop="20dp" 
        app:bootstrapText="{fa-rotate-right}  更新"
        app:bootstrapSize="lg"
        app:buttonMode="regular"
        app:bootstrapBrand="success"
        app:roundedCorners="true"/>

MainActivityクラスを修正する

Android標準のUIクラスを、上記で指定したBootstrap独自のクラスに置き換えます。
前回、作成したソースから修正した箇所だけ抜粋します。

MainActivity.java(修正前)
Button updateBtn = (Button) findViewById(R.id.update);

TextView billingTextView = (TextView) findViewById(R.id.billingCost);
try {
    billingTextView.setText(billingInfoFuture.get());
MainActivity.java(修正後)
BootstrapButton updateBtn = (BootstrapButton) findViewById(R.id.update);

BootstrapTextView billingTextView = (BootstrapTextView) findViewById(R.id.billingCost);
try {
    billingTextView.setMarkdownText(billingInfoFuture.get());

完了

上記に加えて、テキストに枠線を描写できるようにしたりしましたが、UI改善後のイメージは以下の通りです。
WS000012.JPG