2014年9月9日火曜日

Android WidthやHeightとWeightの関係

androidでレイアウトを作成する時、WidthやHeight、Weightの設定でデザインが大きく変わります。

WidthプロパティとHeightプロパティに指定できる値は以下の3種類あります。
match_parent・・・親のViewいっぱいに表示
wrap_content・・・自動調整で表示
fill_parent・・・Android SDK 2.2以降は非推奨。match_parentを使用する。

次にWeightですが「画面上のオブジェクトの占有比率」を指定します。

つまりボタンを3つ配置し、Weight=1、Weight=2、Weight=3と指定すると
Weight=3を指定したボタンが一番大きく、次にWeight=2、Weight=1の順でボタンが大きく表示されるということです。
しかし、WidthやHeightの設定によって、まったく逆の結果になってしまうこともあります。
Weight=1を指定したボタンが一番大きく、次にWeight=2、Weight=3の順でボタンが大きく表示されることもあります。

具体的に見ていきます。
以下はLinearLayout(Vertical)にボタンを3つ配置して、ボタンのプロパティをそれぞれ設定します。

まずボタンのHeightにwrap_contentを指定した場合です。

1つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1

2つ目のボタン
Width=wrap_content
Height=wrap_content
weight=2

3つ目のボタン
Width=wrap_content
Height=wrap_content
weight=3
次はボタンのHeightにmatch_parentを指定した場合です。

1つ目のボタン
Width=wrap_content
Height=match_parent
weight=1

2つ目のボタン
Width=wrap_content
Height=match_parent
weight=2

3つ目のボタン
Width=wrap_content
Height=match_parent
weight=3

Heightプロパティにwrap_contentを指定した場合は
Weight=3を指定したボタンが一番大きく、次にWeight=2、Weight=1の順でボタンが大きく表示されます。

Heightプロパティにmatch_parentを指定した場合は
Weight=1を指定したボタンが一番大きく、次にWeight=2、Weight=3の順でボタンが大きく表示されます。

原因はコチラに詳しく解説されています。
zaki日記 LinearLayout の width(またはheight) と weight の関係
つまりweightは余白を配分する割合を指定するもので、
wrap_contentを指定し場合は余白が正の値になるため、weightに指定した値で余白を分配できるが
match_parentを指定した場合は余白が負の値になるため、weightに指定した値で分配するとおかしなことになるとのことです。
なるほど~

次は横パターンで見ていきます。
LinearLayout(Horizontal)にボタンを2つ配置して、Width=wrap_contentを指定しweightは指定していない状態です。

1つ目のボタン
Width=wrap_content
Height=wrap_content


2つ目のボタン
Width=wrap_content
Height=wrap_content

それぞれのボタンにweight=1を指定します。

1つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1


2つ目のボタン
Width=wrap_content
Height=wrap_content
weight=1

右のボタンの方が大きいですね。
wrap_contentはボタンに設定されているテキストからボタンサイズを計算し、さらにweightの指定による余白の分配をしているので当然の結果ですね。

次はそれぞれのボタンにWidth=match_parent、weight=1を指定した状態です。

1つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


2つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


左右のボタンの大きさが同じになりました。
しかし、2つのボタンのweightが共に1なので問題ありませんが、それぞれweightを変えてみると、縦配置と同じような現象が発生します。
1つ目のボタンをweight=1、2つ目のボタンをweight=2とすると、2つ目のボタンが小さくなってしまいました。

1つ目のボタン
Width=match_parent
Height=wrap_content
weight=1


2つ目のボタン
Width=match_parent
Height=wrap_content
weight=2


widthやheightにwrap_contentを指定した上でweightを指定するということは、ウィジェットに設定されている内容からウィジェットのサイズを自動計算し、 さらにweightの指定による余白の分配が行われます。
そのため少しパフォーマンスが悪くなるようです。

weightに指定した比率でボタンを配置したい場合は、縦配置であればHeight=0dip、横配置であればWidth=0dipに指定し、Weightを指定するようにします。

縦配置の例です。

1つ目のボタン
Width=wrap_content
Height=0dip
weight=1

2つ目のボタン
Width=wrap_content
Height=0dip
weight=2

3つ目のボタン
Width=wrap_content
Height=0dip
weight=3
横配置の例です。

1つ目のボタン
Width=0dip
Height=wrap_content
weight=1

2つ目のボタン
Width=0dip
Height=wrap_content
weight=2

2014年9月8日月曜日

Android パッケージ名

androidプロジェクトをを作成する際、アプリケーション名を入力すると、 パッケージ名は「com.example.xxxxx」となります。
Android Marketに登録する時、「com.example.xxxxx」のままだとエラーで登録できません。

通常、パッケージ名にはドメイン名を逆に並べたものを指定することが推奨されています。
たとえば会社ドメインが「mycompany.co.jp」であれば、パッケージ名は「jp.co.mycompany」となります。
ドメイン名は一意なので、これをパッケージ名に使うことでパッケージ名も一意が保障されることになります。

ドメインを持っていない個人の場合は、
日本インターネット協会 Java 部会のパッケージ名登録/利用サービスというサービスがあります。
http://www.java-conf.gr.jp/Package/naming/index.html
こちらのサービスを利用すると、一意なパッケージ名を取得できます。
取得したパッケージ名は「jp.gr.java_conf.xxxxx」となります。

ドメイン名をお持ちでない方はコチラの利用をお勧めします。

Androi 最新の開発環境 2014年9月現在

2014年9月現在のAndroidの最新の開発環境の作成手順です。
説明はすべてwindowsの64ビットマシンを前提にしています。

Javaのインストール


以下のサイトからJDKをダウンロードします。

http://www.oracle.com/technetwork/java/javase/downloads/index.html

ダウンロードした「jdk-8u20-windows-x64.exe」を実行し、JDKのインストールを行います。

インストールが終了したら、環境変数を設定します。
コンピュータのプロパティ画面より「システムの詳細設定」リンクをクリックし「システムプロパティ画面」を開きます。

「詳細設定」タブの「環境変数」ボタンをクリックします。


「JAVA_HOME」の値を、先ほどJDKをインストールしたパスに変更します。
JDKのデフォルトのインストールパスは「C:\Program Files\Java\jdk1.8.0_20」になっています。

「システム環境変数」のリストより「Path」を選択し、「%JAVA_HOME%bin」が含まれていることを確認します。
Pathに含まれていない場合は、編数値の末尾に「;」をつけ、「%Java_HOME%bin;」を追記します。


Eclipseのインストール


以下のサイトからEclipse4.4をダウンロードします。
http://www.eclipse.org/downloads/
ダウンロードしたファイル「eclipse-standard-luna-R-win32-x86_64.zip」を解凍します。
解凍してできた「eclipse」フォルダを任意の場所に配置します。
私はC:\Program Files\eclipse4.4\に配置しました。

Eclipseの日本語化


「Pleiades」というサードパーティ製のソフトウェアを使用します。 以下のページよりダウンロードします。
http://mergedoc.sourceforge.jp/
少し下にスクロールして「安定板」を選択します。
「pleiades_1.5.0.zip 」をタウンロードします。
ダウンロードしたファイル「pleiades_1.5.0.zip」を解凍します。
解凍してできた「pleiades_1.5.0」フォルダの中身をすべて、「C:\Program Files\eclipse4.4\」フォルダの中に上書きします。

次にeclipse.ini を編集します。
C:\Program Files\eclipse4.4\eclipse.iniをテキストエディタで開きます。
最後に「-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar」1行を追記します。
-startup
plugins/org.eclipse.equinox.launcher_1.3.0.v20140415-2008.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.200.v20140603-1326
-product
org.eclipse.epp.package.standard.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
--launcher.appendVmargs
-vmargs
-Dosgi.requiredJavaVersion=1.7
-Xms40m
-Xmx512m
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar  

eclipseのクリーン起動を行います。
C:\Program Files\eclipse4.4\eclipse.exe -clean.cmdをダブルクリックして実行します。
eclipse が起動し日本語化されていることを確認します。
これは日本語化に伴う作業なので、1回だけ実行します。
通常Eclipse を起動するときは、 eclipse.exe をダブルクリックして実行します。


Android SDKのインストール


Android SDKはAndroidアプリを開発するために必要なライブラリや、AndroidアプリをPC上で動作させるためのAndroid端末エミュレータなどの開発ツールがまとまった開発キットです。
以下のページよりダウンロードします。

http://developer.android.com/intl/ja/sdk/index.html
少し下にスクロールして「VIEW ALL DOWNLOADS AND SIZES」を選択し、「SDK Tools Only」の「installer_r23.0.2-windows.exe 」をダウンロードします。
ダウンロードしたインストーラーを実行し、SDKをインストールします。

Android Devlopment Tools(ADT)のインストール

Android Devlopment Tools(ADT)をインストールします。
ADTはExlipseにAndroidアプリの開発機能を追加するためのプラグインです。
Eclipseからインストールします。
Eclipseを起動し、 「ヘルプ」メニューにある「新規ソフトウェアのインストール…」 を選択します。
開いたダイアログの「追加」ボタンを押します。

「リポジトリーの追加」ダイアログに以下を入力します。
名前:任意
ロケーション:ADTプラグインの配布サイトのURL 「https://dl-ssl.google.com/android/eclipse/」
表示されているもの全部にチェックを入れて、「次へ」ボタンをクリックします。
インストールの途中で警告が出ますが、無視してOKをクリックします。 インストールが完了したらEclipseを再起動します。

以上で、環境の作成は終了です。

2014年9月5日金曜日

【HTML & CSS】 ボタンの設定(まとめ)

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

今回はボタンのスタイルシートの設定についてです。

ボタンのスタイルシートの設定

ボタンを機能ごとに色を変えて欲しいという要望はよくあると思います。
例えば
通常ボタンは青系で、削除系のボタンは赤色で・・・といった要件です。

スタイルシートはこんな感じですかね。
.btn {
    padding: 10px 30px;
    font-weight: bold;
    color: #ffffff;
    border: none;
    border-radius: 5px;
}

.btn_def{
    background:  #000080;
}

.btn_del{
    background:  #CD5C5C;
}
HTML
<input type="submit" value="通常" Class="btn btn_def">
<input type="submit" value="削除" Class="btn btn_del">

次によくあるのが「カーソルが当たった時がわかりにくいですよねぇ・・・」というお言葉です。
ボタンの色を変えているので、それぞれのボタンごとにホバーしたときの色を設定するのはメンドクサイです。
ここは全てのボタンで使用できる透過で処理しちゃいます。
透過を適用すると、ボタンにカーソルが当たった時にボタンの色が少し薄い色に変わります。
先ほどのスタイルシートにホバー時の設定を追加します。
.btn:hover {
    opacity: 0.75;
}
opacityプロパティはCSS3の機能で透過効果を適用できます。
0.0(透明)から1.0(不透明)の数値を指定します。


このままではプログラムからボタンを無効にした時、ボタンの色が変わりません。
無効にした時のcssを追記します。
.btn:disabled {
    color: #808080;
    background:  #C0C0C0;
}

ここで完成と言いたいところですが、このままでは無効にしたボタンをホバーした時もボタンの色が透過されてしまいます。
ボタンが無効の時は透過させない設定を追加します。
.btn[disabled]:hover {
    opacity: 1;
}

これでボタンのスタイルシートの設定は完成です。
CSS
.btn {
    padding: 10px 30px;
    font-weight: bold;
    color: #ffffff;
    border: none;
    border-radius: 5px;
}

.btn:hover {
    opacity: 0.75;
}

.btn:disabled {
    color: #808080;
    background:  #C0C0C0;
}

.btn[disabled]:hover {
    opacity: 1;
}

.btn_def{
    background:  #000080;
}

.btn_del{
    background:  #CD5C5C;
}
HTML
<input type="submit" value="実行" Class="btn btn_def" >
<input type="submit" value="削除" Class="btn btn_del" >
<input type="submit" value="無効" Class="btn" disabled="disabled" >

これだけできれば最低限の見た目は満たしているのではと思います。

【HTML & CSS】 liner-gradient関数で線形グラデーションを付ける

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。


border-radiusプロパティで角を丸くする
box-shadowプロパティでボックスに影を付ける

上記に続いて第3弾はグラデーションを付ける方法です。
今まではグラデーション画像を用意して、ボタンなどの背景画像に設定していました。
画像編集ソフトを使うのが面倒で、ボタンは基本ベタ塗りです・・・(;^ω^)
CSS3からはスタイルシートだけでグラデーションが実現できるんです。
便利になりました。

liner-gradient関数で線形グラデーションを付ける

グラデーションはbackgroundプロパティかbackground-imageプロパティに、線形グラデーションであればlinear-gradient()関数を、円形グラデーションであればradial-gradient()関数を指定することで実現します。
今回はliner-gradient関数で線形グラデーションを付ける方法です。

linear-gradient()関数で線形グラデーション

background:linear-gradient(グラデーションの方向、 開始色 0%, 終了色 100%)
または
background-image:linear-gradient(グラデーションの方向、 開始色 0%, 終了色 100%)
グラデーションの方向は、キーワードまたは角度で指定します。
方向 キーワード 角度
下から上 to top 0deg
左から右 to right 90deg
上から下 to bottom 180deg
右から左 to left 270deg

開始色が白、終了色が黒で上から下にグラデーションを付けたい場合は、以下のように指定します。
background:linear-gradient(to bottom, #fff 0%, #000 100%)
または
background:linear-gradient(180deg, #fff 0%, #000 100%)
または
background-image:linear-gradient(to bottom, #fff 0%, #000 100%)
または
background-image:linear-gradient(180deg, #fff 0%, #000 100%)


開始色が白、終了色が黒で左下から右上にグラデーションを付けたい場合は、以下のように指定します。
background:linear-gradient(45deg, #fff 0%, #000 100%)
または
background-image:linear-gradient(45deg, #fff 0%, #000 100%)



linear-gradient()関数の各ブラウザ対応状況


linear-gradient()関数はCSS3の機能で一部のブラウザではベンダープレフィックスを使用する必要があります。
IEIE10よりサポート
ChromeChrome26よりサポート
FirefoxFirefox16よりサポート
SafariSafari6.1よりサポート
iOsiOS7.0よりサポート
Androidサポートなし
Android2.1以降ではベンダープレフィックス「-webkit-gradient」を使用します。
Android4.0以降からはベンダープレフィックス「-webkit-linear-gradient」を使用します。
iOS3.2以降ではベンダープレフィックス「-webkit-gradient」を使用します。
iOS5.0以降ではベンダープレフィックス「-webkit-linear-gradient」を使用します。
2014年時点ではスマートフォン向けに「-webkit-linear-gradient」を使用する方がよさそうです。
「-webkit-gradient」を使用するかは微妙な所です。

というわけで、linear-gradientの指定の仕方は下記のようになります。(※2014年9月時点)
.box{
   background-image : -webkit-linear-gradient(top, #fff 0%, #000 100%);
   background-image : linear-gradient(to bottom, #fff 0%, #000 100%)
}
-webkit-linear-gradientで指定できるグラデーションの方向、キーワードまたは角度は、linear-gradientの指定と異なります。
方向 キーワード 角度
下から上 bottom 90deg
左から右 left 0deg
上から下 top 270deg
右から左 right 180deg



linear-gradientの設定を簡単に作成するツール


たとえばコチラ CSS matic のような設定ツールを使うと、linear-gradientの設定が簡単に作成・確認できます。