AndroidでIOSと同じようなレイアウトに似せるFWの考察

android

エントリ分割しました。

　stackoverFlowで [android iPhone Style] で検索するとワラワラでてきますね。
海外の人も同じようなオーダされているようなので、日本のAndroid開発者だけの悩みではないのかも
(劣化IOSコピーの作成


　企画の方のIOS至上主義みたいなのがよく感じるな。。。
消費者的にもそんな感じなのでしょうかね？？*1
　ターゲットが Android も IOSも両方持ってるヘビーユーザが対象なのでしょうか（汗

　ただIOSユーザはAndroidの操作感に凄く違和感を感じるそうなので
それで合わせてということらしい。

　よちよちAndroid でもお話聞いた感じだと

  • カメラキャプチャ画面をIOSチックに作る*2
    • カメラアプリ自体のキャプチャを撮って＝＞部品をデザインソフトで編集＝＞使用

とかいう話は結構あるみたい。

　こう考えると
プログラマにもデザインソフトで加工できる能力は必要かな

  • デザイナ素材も一枚絵が多い
  • アニメーションさせる画像を作る場合、自分で編集しろってこと？
    • ココらへん簡単に補完アニメーションとか作れるアプリ等があると嬉しいんだけどな‥‥‥

とかはよく考えます(汗

なまとめされている方もいらっしゃるようですが
そこら辺企画レベルではアンマリ認識共有されていないのかも。。。(汗

一応海外でもその手の需要はあるようで

な特集ページも有り

それはさておき、下記は調べてる（調べたメモ）

Toggle Switch_A)

ただしAPI8以上の関数を使ってる
結構綺麗なんだけどね。。

一応 IS01で動かすようにはしてみたけど全部のデモは動かせず。。
2.1のREGZAでは動くので、なんか違うんかもしれない・・
修正したのは


実際使ってみる編＞
使うレイアウトの一番外側のレイアウトに

xmlns:mySwitch="http://schemas.android.com/apk/res-auto"

mySwitch:属性名 で設定

で動きますね。。


この書き方は 

同一Project内なら検索可能(LibraryProjectみたいにまたぐと駄目)


drawableに以下をコピー

  • background_fenced.xml
  • switch_track_green.xml

sw＿XXにリネムして以下をvalues/に


ただこれをそのままは難しくて

  1. switch_track_green.xml => switch_track_silver.xml とか作って銀色対応をする
  2. ボタンの位置が オフ/オン になってる*3
  3. ボタンフォントのサイズをsw_styles.xmlで指定されているので マルチ解像度対応がちと大変

Toggle Switch_B)

これはAPI4でもOK
demoをみると



 app:background_switch="@drawable/button_switch_facebook"

はselectorを指定できるのでいけるかなとおもったけど
IS01で動かすには以下修正必要

case R.styleable.SwitchView_background_switch:
	if(a.getDrawable(attr) instanceof StateListDrawable){
		isStateListDrawable =true;
		stateListDrawable =(StateListDrawable) a.getDrawable(attr);

		try {
			stateListDrawable.mutate(); // make sure that we aren't sharing state anymore
		} catch (Exception e) {
		}

修正したのは

実際使ってみる編＞
1クラスなのでコピーして試してみた感じだと

  • SwitchView/res/values/attrs.xml を要コピー
  • SwitchView/res/drawable/ あたりのデフォルト画像も必要
<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.hogedrivn" //☆
    style="@style/behindMenuScroll" >

       <LinearLayout 
           style="@style/behindMenuScrollContent"
	       android:layout_marginTop="50dip">

			<com.appspheregroup.android.swichview.SwitchView
			android:layout_marginTop="8dip"
 		        android:id="@+id/switchView1"
 		        android:layout_width="wrap_content"
    		        android:layout_height="wrap_content"
        		app:background_switch="@drawable/button_switch_facebook"
        		app:text_off="ほげ"
        		app:text_on="ふが" />

な感じで ☆の



 xmlns:app="http://schemas.android.com/apk/res/パッケージ名
が必要

参考）


Toggle Switch_C)

一応IS01で動くように直したの

これはAndroid4のSwitchのbackportらしい。

ただこっちに関しては
[IOSに似てない]
っていうので却下されそうな気もするんだけどなー。
ただIOS7に関してはフラットスタイルって形でAndroid4に寄せてきてる気もするので
その状況次第ではいけるのかもしれない‥‥‥

  • 組込用テストプロジェクトに入れてみた感じだとこんなイメージ
    • res/attrs.xml => res/sw_attrs_bp.xml
    • res/styles.xml => sw_styles_bp.xml

としてコピー。

自分が試してたテストプロジェクトだと
複数のswを入れていて名前空間がぶつかったので

<attr name="textColor" format="color" /> 
=>
<attr name="textColor_" format="color" />

みたいな形に変更

従って

ts = appearance.getDimensionPixelSize(R.styleable.TextAppearanceSwitch_textSize, 0);
=>
ts = appearance.getDimensionPixelSize(R.styleable.TextAppearanceSwitch_textSize_, 0);

な形のコード修正が必要になります

    <string name="textOn">ON</string>
    <string name="textOff">OFF</string>

追加

drawable/switch_XXX.xml
drawable-xhdpi/XXX.png
コピー

レイアウトに対する設置は
上記の layout-autoと同じ形で参照

res/themes.xmlのActivity用のスタイルに

	<item name="switchStyle">@style/switch_light</item>
	<item name="switchStyle">@style/switch_dark</item>

のどちらかを追加。なんか設定しないと使えないみたい。


情報源)


ActionSheet）

これはActionSheetもどき。Androidだと QuickActionとか使いたいもんですけどね・・。

ソースコードはココらしい）

　動かしてみた感じだと
Menuの代わりに ActionSheetを出す流れ

　他にも「XMLだけでIOSダイアログを作る」
は あいぽんフリークの人にはウケるかもな・・*4

　でも企画ベースだとIOSマンセーな人が多いよなー


　今はIOS7が出るという話で凄いもちきり

な感じですし‥‥

で大騒ぎしてたよなー。仕事場。。。それだけカネになるPWなんでしょうけど。。。

Picker）

これはPickerの似せたもの。試作は作ったことあるけど
　「IOSの利点機能をあえてAndで実装したのをユーザさんに見せるとIOSのウリがなくなってしまうかも？（(IOSのかっこいいUIの代表例らしい＜ピッカー))」
で不採用になってたりも。。。（汗

日本語の意味よくわからないです〜 ＞＜


RadioButton)

これはできないかどうか？ ときかれてたから凄く参考になるかも*5

@さんがすでに試されていたよう。状況から見ると要検証かも


リストビュー）


　こっちのUITableViewもどきのほうが実際近いかもな‥‥＿


タブ）
http://stackoverflow.com/questions/2677698/android-iphone-style-tabhost

IOSは下タブ

GameCenter っぽいの)

商用利用とかの場合はどうなんだろう？
規約まで見てみないとわからないかもしれない。。

サンプル動かしてみた感じ

ちょっと重い(PHP製っぽいからかな？）
仕事でnode.js使ってるプロジェクトあるけど
現状ですら得点の送信が遅いって話があってまずいな。。とか思ってたりしてる。
＜でもPHP使ってる別プロジェクトのやつだと
　起動時のPHPアクセスの時点でロックかかって場合によっては
　起動が30秒以上かかる or 起動失敗 とかのアプリも有るので
　作り次第なのかもしれない・・*6

追記)
rank-park2.0ベースのサンプル改造

  • libs/rankparkSDK-2.0.jar に差替
  • com.example,rankpark.test => com.sample で変更(ライブラリ内部で、ANDROID_ID/パッケージ名を自動取得するっぽいので）
    • AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sample"
    android:versionCode="1"
    android:versionName="1.0" >
<!-- 
    package="com.example.rankpark.test"
 -->
    • src/com/sample/MainActivity
package com.sample;

import java.io.IOException;

import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;

import com.rankpark.RankPark;


public class MainActivity extends Activity implements OnClickListener{

	private Button btn;
	private Button btn1;
	private Button btn2;
	private Button btn3;
//	private String deviceId;//端末ID
//	private Context context=this;
	private Thread rankpark_thread;//ダイアログThread
	private ProgressDialog mProgressDialog;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		LinearLayout mLayout = new LinearLayout(this);
		mLayout.setOrientation(LinearLayout.VERTICAL);
		mLayout.setBackgroundColor(Color.WHITE);

//		deviceId = Settings.Secure.getString(
//				this.getContentResolver(), Settings.Secure.ANDROID_ID);

		btn=new Button(this);
		btn.setText("Web");
		btn.setOnClickListener(this);

		btn1=new Button(this);
		btn1.setText("スコア&Web");
		btn1.setOnClickListener(this);

		btn2=new Button(this);
		btn2.setText("スコア送信1");
		btn2.setOnClickListener(this);

		btn3=new Button(this);
		btn3.setText("スコア送信2");
		btn3.setOnClickListener(this);

		mLayout.addView(btn);
		mLayout.addView(btn1);
		mLayout.addView(btn2);
		mLayout.addView(btn3);

		setContentView(mLayout);
	}

	public void onClick(View v) {
		if(v==btn){
			//rank-park 表示(ゲームスコアは送信されません)
			//RankPark.rp_view(this,"com.sample",deviceId);
			RankPark.startActivity(this);
		}
		if(v==btn1){
			//rank-park 表示とゲームスコアの送信を行います
			//RankPark.rp_score(this,"com.sample",deviceId,"20");
			try {
				RankPark.sendScore(this,20);
				RankPark.startActivity(this);
			} catch (IOException e) {
				// TODO 自動生成された catch ブロック
				e.printStackTrace();
			}
		}
		if(v==btn2){
			//rank-park ゲームスコアの送信のみを行います
			//RankPark.rp_register(this,"com.sample",deviceId,"40",true);
			try {
				RankPark.sendScore(this,40);
			} catch (IOException e) {
				// TODO 自動生成された catch ブロック
				e.printStackTrace();
			}
		}
		if(v==btn3){
			//rank-park ゲームスコアの送信のみを行います
			mProgressDialog = ProgressDialog.show(this, "", "スコア送信中..", false);
			rankpark_thread= new Thread() {
				@Override
				public void run() {
					try {
						rankpark_score();
					}catch (Exception e) {
					}
				}
			};
			rankpark_thread.start();
		}
	}
	
	public void rankpark_score(){
		Log.d("rankpark_score","rankpark_score");
		//RankPark.rp_register(this,"com.sample",deviceId,"40",false);
		try {
			RankPark.sendScore(this,40);
		} catch (IOException e) {
			// TODO 自動生成された catch ブロック
			e.printStackTrace();
		}
		if (mProgressDialog.isShowing()) {
			mProgressDialog.dismiss();
		}
	}
}


OS標準で入ってるApacheで

  • そのままアクセス
    • スケーリング対応とかしてない*7
  • 一つのPHPに役割もたせすぎ（パラメータで内部分岐

辺りだと

環境構築が要らない(Railsは運用環境構築大変）
があるからそこは違うんだろうけどなとか思うわけなんだけどな・・

でも個人のその手の鯖側作ろうとすると面倒ではあるので
そういう面では楽かもしれない*8

*1:自分はAndroidユーザとしてはIOSチックのUIにすごく違和感感じるけど。。

*2:IOSはOS標準の機能なので

*3:IOSは オン/オフ で逆

*4:今のお仕事場はAndの色を凄く嫌ってて矢鱈IOSに似せる/IOSで実装できる形を美徳としてる

*5:もっと前に知ってたら既存のに試せたのに＜汗

*6:メンテ面重視で黙殺されてるけどほんとうに大丈夫？

*7:FaceBookみたいに専用のインフラの人がチューニングしてるとか

*8:考えてみるとIOS自体のGameCenterへのアクセスは、Wifiでも結構重めな処理な感じもする