Android 開発 viewをリサイズ

やり方をメモ

タイミング

Activity内なら、onWindowFocusChanged(hasFocus=true)いい。 onCreateだと、viewがまだ見えない、取得する幅が0のまま。

カスタマビューを使ってるなら、surfaceCreated(SurfaceViewの場合)でもいい。

設定の仕方

this.getLayoutParams().height = (int) height;
this.getLayoutParams().width = (int) width;

Android 開発、向きを設定

静的に指定する場合

下記のようにAndroidManifest.xmlで指定する。

  • 縦固定
AndroidManifest.xml
<activity
    android:name=".MainActivity"
    android:screenOrientation="portrait">
  • 横固定
AndroidManifest.xml
<activity
    android:name=".MainActivity"
    android:screenOrientation="landscape">
  • 自動
AndroidManifest.xml
<activity
    android:name=".MainActivity"
    android:screenOrientation="unspecified"> <!-- 未指定でもOK! というか、普通は未指定 -->

動的に指定する場合

下記のように Activity#setRequestedOrientation を呼び出す。
呼び出した結果、実際に画面の向きが変わった場合はActivityが再生成される(android:onConfigChangesでorientation等を指定していなければ)。

  • 縦固定
MainActivity.java
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
  • 横固定
MainActivity.java
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
  • 自動
MainActivity.java
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);

初Android開発

環境

Android Studio

起動

なぜかデフォルトのままエミュレータが起動しない。
後程原因判明: vagrantvirtualboxを起動しているのは理由。
$vagrant haltで問題解決。

仕方なく実機で確認することに。

Activity

アプリで言うと画面のこと。iOSの場合StoryBoradで描くViewと同じ。

  • activity間遷移
Intent intent = new Intent(getApplicationContext(),JoinActivity.class);
startActivity(intent);
  • Toastの表示

引数で表示時間設定。メソッドで表示position設定

Toast ts = Toast.makeText(this, "You did not enter a nickname", Toast.LENGTH_SHORT);
ts.setGravity(Gravity.TOP, 0, 0);
ts.show();
  • タイトルバーの非表示

AppCompatActivityを普通のActivityに変える。

もしくは、動的に切り替え:
/ 非表示 /
getSupportActionBar().hide();

/ 表示 /
getSupportActionBar().show();

AngularJS サーバサイドJSONレスポンスのスタブを作成

WEBサービスを実現する場合、フロントエンドからバックエンドのAPIサーバにアクセスすることが多いと思いますが、バックエンド側がまだ開発途中であったりすると、代替としてNode.js等でスタブのアプリケーションを作ったり、または固定のJSONファイルを作ったりと、割と手間がかかってしまいます。

今回、ためしに AngularJS の ngMockE2E を利用して、擬似的なAPIサーバを構築してみたので、その方法を紹介します。

前提

  • Yeomanで構築したAngularJS開発環境が前提です。

  • 別途 ngMockライブラリをインストール場合も、Bower を使えば簡単にできます。

    • $ bower install angular-mocks

ngMockを使う準備

①index.htmlからngMockのJSファイルをロード

app/index.html
<script src="bower_components/angular-mocks/angular-mocks.js"></script>

②ルートモジュールにngMockE2Eを追加

app/scripts/app.js
'use strict';

angular.module('ngMockTestApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
+  'ngMockE2E'
])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

これで準備は完了です。

疑似APIサーバの処理を書く

  • 先程と同じ app.js に、.run 以降を追記してみます。
    • 面倒なのでこうしてますが、本当はファイルを分けた方がいいです。
app/scripts/app.js
'use strict';

angular.module('ngMockTestApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngMockE2E'
])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }])
  .run(['$httpBackend', function ($httpBackend) {

    $httpBackend.whenGET(/^views\//).passThrough();

    var sample = [
      {
        "id": "1",
        "name": "山田"
      },
      {
        "id": "2",
        "name": "鈴木"
      }
    ];

    $httpBackend.whenGET('data/sample.json?hoge=1').respond(200, sample, {});

    $httpBackend.whenGET('data/sample.json?hoge=2').respond(function(method, url, data, headers) {
            return [200, sample, {}];
    });

  }])
;

動作確認

ここは何でもいいのですが、APIを叩く処理を書きます。

まず、APIにアクセスするFactoryを作って、

app/scripts/services/data.js
'use strict';

angular.module('ngMockTestApp')
  .factory('JsonData', function ($http) {

    return {

      getSampleData: function () {

        return $http.get('data/sample.json?hoge=1')

          .success(function(data, status, headers, config) {

            return data;

          });

      }

    }

  })
;

Controllerから呼び出し、

app/scripts/controllers/main.js
'use strict';

angular.module('ngMockTestApp')
  .controller('MainCtrl', ['$scope', 'JsonData', function ($scope, JsonData) {

    JsonData.getSampleData().then(function(res){

      $scope.items = res.data;

    });

  }])
;

Viewで描写します。

app/views/main.html
<!-- 対応する Controller は app.js の $routeProvider で定義済み -->
<li ng-repeat="item in items">
  {{item.id}} - {{item.name}}
</li>

結果はこんな感じ。表示されました!

スクリーンショット 2014-05-13 15.06.07.png

疑似APIサーバの処理をみてみる

  .run(['$httpBackend', function ($httpBackend) {

    $httpBackend.whenGET(/^views\//).passThrough();

    var sample = [
      {
        "id": "1",
        "name": "山田"
      },
      {
        "id": "2",
        "name": "鈴木"
      }
    ];

    $httpBackend.whenGET('data/sample.json?hoge=1').respond(200, sample, {});

    $httpBackend.whenGET('data/sample.json?hoge=2').respond(function(method, url, data, headers) {
            return [200, sample, {}];
    });

  }])

全ての HTTPアクセスがこのロジックを経由します。
で、ここに全てのHTTPアクセスについて定義しないとエラーになるので、注意が必要です。
正規表現はつかえます。)

.passThrough()は何もしない、という意味です。テンプレートのアクセスもHTTP経由なので、「URLが views/で始まる場合は何もしない」というふうに記載しています。

whenGET でURLを定義し、対応するレスポンスを .respond に記載します。今回は2パターンを記載してみました。

上のパターンは、単純に用意されたJSONデータをレスポンンスしています。

下のパターンは、JavaScriptでいろいろ処理させてからレスポンンスさせるパターンです。
この例だと、結局JSONをレスポンスしているだけですが、判定処理とか動的なJSONファイルの生成処理がここに書けるわけです。

ほか

 

qiita.com

中国向けB2Cプラットフォームの選択

跨境电商解决方案

www.shopex.cn

http://www.qianmi.com/solutions/kj/

跨境电商解决方案-千米网:专业的电商解决方案提供商 - 千米网-专业的电商SaaS系统及服务提供商,为企业提供全方位电商解决方案