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

android

これも自メモ。

エントリを一部分割しました）

  • IOS上部の黒帯再現
    • drawable/grad.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:startColor="#FF777777"
        android:endColor="#FF000000"
        android:angle="270" />
</shape>
    • 配置側レイアウト
<LinearLayout 
     android:orientation="horizontal"  android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
  　android:background="@drawable/grad"
    >

な使用イメージ

な方法もあるらしい。

  • たまにある透明ボタン
    • drawable/border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
	<stroke android:width="1dip" android:color="#FFFFFF" />
	<gradient android:startColor="@null" android:endColor="@null" />
	    <corners
    	android:bottomRightRadius="7dp"
    	android:bottomLeftRadius="7dp"
    	android:topLeftRadius="7dp"
    	android:topRightRadius="7dp"
       />
</shape>
    • 配置側レイアウト
<Button android:text="もどる" 
	      android:layout_width="150dip" 
	      android:layout_height="75dip" 
	      android:textSize="18dip"
	      android:textColor="@color/white" 
	      android:background="@drawable/border"

な使用イメージ*1


画像の縁がまるくて既存の輪郭が邪魔なケースの時は、下記のリンクのテクはよく使うけど

スキンをいじるだけでも結構イケルみたい

ダイアログの話は別エントリ化しました）



参考になりそうな情報)

ActivityGroupは使ったこと無いので、そういう情報は凄く助かるかも‥‥‥


TextViewの周りを丸くする）

これ実はButtonにも、EditTextにも使えて

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="16dp" />
<!-- 
    <solid 
        android:color="#FF000000"
        />
 -->    
    <solid 
        android:color="#FFF0F0F0"
        />
<!--
    <stroke
        android:width="8dp"
        android:color="#FFFFFFFF"
        />
-->
    <stroke
        android:width="8dp"
        android:color="#FFF0F0F0"
        />
</shape>
  • res/layout/main.xml
	<Button 
	    android:background="@drawable/window"

みたいな方が使えるかも（複数並んだ場合の設定コンソールっぽいのはこれだけでは厳しいが。。）






未解決系)

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="#5F8ec1da" //☆
    >

<EditText 
    android:gravity="center_vertical|center"
    android:layout_gravity="center_vertical|center"
    android:inputType="textNoSuggestions" 
    android:imeOptions="actionGo"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"/>

</LinearLayout>

なレイアウト

でもココらへん
Swing GlassPane みたいな事で実現する方法がいいのかなと思ってたらzakiさんがブログかかれてた

  1. Swingとスレッドと再描画 - Kazzzの日記
  2. GlassPaneとブロッカ - Kazzzの日記
  1. GlassPaneを作る (その1) - Kazzzの日記
  2. GlassPaneを作る(その2) - Kazzzの日記
  3. GlassPaneを作る(その3) - Kazzzの日記
  4. GlassPaneを作る(その4) - Kazzzの日記
    1. Kazzzの日記

この話の場合は HTML5でIOS設定画面作る ＝＞Androidでも同じ操作感 ＝＞素晴らしい！
の理屈なんだけど、そういうFWとか有るのだろうか。。。うーん。

PS)
エイトっぽい設定画面に関していえば
背景だけならレイアウトで一応は頑張れる*2

  • drawable/bg_chip.png みたいな画像を用意
    • 左から右へ灰色グラデかかっている小片画像
      • IPhoneでキャプチャ＝＞DropBox等で転送=>画像編集ソフトで小片切出で取得可能
  • drawable/bg.xml 
<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:tileMode="repeat"
    android:src="@drawable/bg_chip"
></bitmap>

みたいなの作って android:background で指定っていう手もあるんですけど。
まあこれも普通使わないよな。。。（汗


な感じがお客様の目にやさしいお話なんですかね？

のスライドのお話なら凄く納得できるんだけどな。。。（汗


IOSレイアウト VS Androidレイアウト の話）

IOSは絶対座標レイアウトだからな。。。仕方ないんですけどねー（汗
この画面解像度別dimens対応結構時間がかかるので

  • 画面比、画面深度で自動計算して設定したほうが手間がかからないんじゃないの？
  • 画像まで減色対応とかリサイズとか工数的にありえない！ OpenGLでやったほうがいいんじゃないの？

というお話がよく話題になりがち

画面解像度別にリソースを持たないで頑張るとかの話は

のお話とあい通じるかもしれない（汗

Android的には

的な理想的な話とかなり意識のズレが出てきてしまうんだけど、Androidはそこまで工数かけなくていい*3
という判断も有るんだろうな。。

- な話はあるので、IOSもAUさんがブラウザアプリ指定とかやらんと避ける傾向にあるんだよね
*4
 

なお話に通じてしまうかも・・・


絵文字問題）

よくPHPで作る場合とか、

  • MySQLアップデートまではせず、OS標準の物を使う
  • 絵文字削ってMySQLに入れる

とか遣ってたりしてる*5

共通ランキングとか作ろうとするとハマる〜

に絵文字変換データがまとまっているそうなんだけどこれを使ったライブラリとか無いのかな？
IOSは AuとSoftbankなのがあってそれの区別も面倒だよな。。。ぐんにょりしてしまう。。

な感じのがあるので上手く置き換えればいけるのかな。。


TL上のメモ）

*1:IOSは透明ウインドウ等を絶対座標に配置しやすいのでよく使うよう

*2:中の丸っこい奴までは作りこんでないが

*3:かけても儲からない

*4:なんだかんだでWebViewの挙動はIOSでも微妙な線のようだ

*5:まあココらへんはIOSが主力製品ではあるので、緊急対応チックにはなりますが。。