今回はカスタマイズした ListView に CheckBox を乗せたときの on/off 切替を行選択時に行う方法の紹介。 ListView(の項目)にCheckBoxを乗せた場合、CheckBoxのon/off切替はCheckBoxをクリックした時だけになります。 しかもCheckBoxが項目のフォーカスを奪ってしまっているため、onItemClickイベントが発生しなくなっています。 そこで、CheckBoxが項目から奪っているフォーカスを項目にお返しし、onItemClickイベントでCheckBoxの on/off を切り替えるようにします。 これはレイアウトの <CheckBox> に以下の2つの属性を追加することで対応できます。 android:clickable="false" CheckBoxにフォーカスを当たらなくし、onItemClickイベントを発生するようにしま
はじめに デザインの都合上ボタンとか、LinearLayoutを角丸にしたかった時に調べた時のメモ。 実装 基本的にはbackgroundを指定する際に、別ファイルで角丸を定義したものを読みこめばうまく行きます。 ボタンの比較 まずはボタンで比較してみます。 比較対象は通常のボタン、角丸(5dp)のボタン、角丸(10dp)のボタンです。 <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp"> <!--通常のボタン--> <Button android:id="@+id/buttonNormal" android:layout_width="wrap_content" android:layout_heig
執筆時点(2014/04/19)のバージョン等 Android 4.3, 4.4で確認(下位バージョンでも動作すると思われます) FontAwesome 4.0.3 はじめに Androidアプリでボタンなどにアイコンを配置したいことはよくあると思いますが、アプリのイメージカラーに合わせたり画面の解像度ごとに画像を用意するのは手間がかかります。 PhotoShopやGIMPに慣れていないと、コーディングの時間より画像作成にばかり時間を取られたり。 Font Awesomeは、(画像でなく)フォントとして369種類ものアイコンが提供されているWebフォントです。 これをボタンなどのビューにセットすることでオシャレなアイコンを簡単に実装できます。 あくまでテキストなので、色やサイズの指定はAndroid標準の指定方法がそのまま使えます。Layoutファイルで何度でも簡単に変更して最適な設定を試
フラットデザインってたまたま流行っただけ? フラットデザインというものが世の中に浸透してきて、随分と定着したような感じがしますね。 Web制作の場面でも、フラットデザインを取り入れたWebサイトが増えています。 しかし、「どうしてフラットデザインが世の中に広まったのか」を考えたことがある人は少ないのではないでしょうか。 少なくとも、ファッションの流行のような「一過性の流行ではない」ということは、Webデザイナーであればしっかりと認識しておく必要があります。 フラットデザインの前に主流だった、リアルなアイコン もともとフラットデザインが普及する前に主流であった、いわゆるリアルなアイコンはスキュアモーフィズムと呼ばれる様式です。 なぜアイコンなどがリアルに描画されている様式が主流だったのか。 これは、コンピュータが一般家庭へ普及した歴史を見ていけば明らかになります。 まず、ご存知のとおり昔のコ
フォーカスとタッチモード Androidのフォーカスの制御は、タッチモードがからんでいてわかりずらい。 タッチモードについては、「l. タッチモード - ソフトウェア技術ドキュメントを勝手に翻訳」を参照。 非タッチモード時とタッチモード時で、異なるAPIが存在する。 Activity画面にTextViewと3つのEditViewとButtonを配置する、以下のようなレイアウトファイルを作成する。 リスト1(main.xml) このプログラムを実行して、各ウィジェットをタッチ(クリック)した場合のフォーカスの移動を確認してみる。 TextViewをタッチしてもフォーカスは、TextViewに移動しない。 EditTextの場合は、タッチする事でフォーカスを移動する事ができる。 Buttonの場合にはタッチした瞬間、一時的にフォーカスが移動するが、その後、タッチ前のフォーカスの位置に戻ってしま
Checkboxの枠線の色というのはこれです。 結論からいうと、theme の textColorSecondary を変更するだけです。 ただ textColorSecondary を変更するとToolbarのアイコンあたりにも影響が出るので、そのへんも含めてメモしておこうと思います。 themeの変更 android:textColorSecondaryを変更します。 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/theme500</item> <item name="colorPrimaryDark">@color/theme600</item> <item name="colorAccent">@color/accent500
消す場合 android:background="#00000000" で透明な背景にします。 変える場合 colorControl*** を設定した theme をつけて変更します。 EditText の場合は android:theme、AppCompatEditText の場合は app:theme です。 (xmlns:app="http://schemas.android.com/apk/res-auto" としている場合) <style name="EditTextColorControl"> <item name="colorControlNormal">@color/app_primary</item> <item name="colorControlActivated">@color/app_primary</item> <item name="colorControlH
Android アプリ全体で統一したデザインスタイルがあると、つぶしが効いて良いですよね。 そのための仕組みとして、Android ではテーマというものが設けられています。テーマを用いることで、アプリケーション全体の配色を決めたり、文字のスタイルを決めたりすることができるようになります。 一つのテーマを全体に適用するだけでよければそれはそれで良いのですが、実際問題としては複数のテーマを画面ごとに使い分けることもよくある話かと思います。この画面はフルスクリーンで ActionBarを消すけど、別の画面ではActionBarを出す、みたいな。 さて、複数のテーマを使う場合、たとえば、Light と Dark でボタンの色みを変えたい、という事が起こります。色合いがよく似ているならともかく、Light と Dark のように大きな違いがある場合は、色の調整をしたほうが良いでしょう。 また、テーマ
参考資料 Android Developers 画面全般 スプラッシュ画面 必要のないスプラッシュ画面の表示はやめましょう。 なぜダメか 多くのアプリにおいて、スプラッシュ画面では何も処理していません。 このようなアプリでは、ユーザがアプリを起動してからスプラッシュ画面の表示が終わるまでの間、ユーザの時間を単純に浪費してしまいます。 わずかな時間かもしれませんが、Androidではアプリの起動/終了が頻繁に繰り返される場合があるため、デスクトップアプリと比べて表示される頻度が多くなることを意識する必要があります。 解決法 スプラッシュ画面を削除する。 余談ですが、iOSのLaunchImagesは体感上の起動時間を短縮するためにアプリ起動後の画面と似たものを使用することが推奨されています。 Androidアプリにおいて、体感上の起動時間を短縮するためにできることはスプラッシュ画面を削除する
はじめに Android Developers 公式チャネルで公開されている「UX アンチパターン」の紹介です。UX の改善はユーザの満足度向上にもつながりますので、紹介内容をチェックすることをおすすめします。 動画 URL https://www.youtube.com/watch?v=x_gxZd9kLv4 トピック別の再生用リンク ダイアログ タッチできない UI デザイン 時代遅れ 他プラットフォームの移植 非標準ナビゲーション 共有機能を独自実装 WebView で UI を作る しつこい 縦向き固定 その他 ちなみに個人的に残念だと感じるトップ3はこちらです。 下タブバー 非標準のナビゲーション WebView で UI を作る ダイアログ 読み込み中のダイアログ ちらつきについては、ProgressDialog を使用した場合のイメージでしょうか。 ダイアログ全般について、基
My previous short article about gratuitous animation really struck a chord with people. The response has been phenomenal and it’s been awesome reading others’ frustrations with overly animated UIs. To be clear, I’m not anti motion design for UIs. Far from it. I have a problem with animation that serves only to get in the way of the end user. One of the clearest signs of a competent UI designer is
API Level 21からPackageManager#getUserBadgedIconというメソッドが追加されました http://developer.android.com/reference/android/content/pm/PackageManager.html#getUserBadgedIcon(android.graphics.drawable.Drawable,android.os.UserHandle 結論から言うと現在は特定の条件で固定のバッジを表示するのみのようです。 実装は https://github.com/android/platform_frameworks_base/blob/a6ed1b9547dcd592031a415739cc7e672c068f7c/core/java/android/app/ApplicationPackageManager
はじめに iPhone の登場から日本でも次第にアプリや Web における UI, UX というものが重視されるようになりましたが、昨今はプロトタイピング・ツールが盛り上がりつつあるようです。毎年いろいろなツールが登場してきているので、ここでは特に気になったプロダクト(一応モバイル方面、特に iOS/Mac に近い所)を自身のメモも兼ねて挙げていきたいと思います。 プロトタイピング・ツール / サービス Prott 用途:ワイヤーフレーム設計、ペーパープロトタイプの取り込み、画面遷移設計、共有 Goodpatch が開発したプロトタイピングツール。エディターでワイヤーフレームを描くこともできれば、Sketch からデータを読み込むこともできる。リンクをつないで Web やモバイル端末でプレビューすることも可能。 Sketch プラグイン https://blog.prottapp.com/
ググってもだいたいEllipsizeの設定で自動省略の話しか出てこないのでメモる。 やりたい事 TextViewが省略表示になっているかを確認して処理したい、というモノ。 isTextTruncated()を作る TextViewUtilsとか適当に作る。おおむねgetLatyout()とかgetLineCount()とかgetEllipsisCount()とか使うと省略かどうかわかる public class TextViewUtils { public static boolean isTextTruncated(TextView textView) { if (textView == null) { return false; } Layout layout = textView.getLayout(); if (layout == null) { return false; } i
Web マーケター。 ソフトウェアのテクニカルサポートからキャリアチェンジし、Web/アプリ業界へ。株式会社ファンコミュニケーションズを退職後フリーランスとなる。独立した理由は髪の毛を伸ばしたかったから。 Webやアプリ等のデジタルなサービスに触れていると、UXと言えばUIを前提としたものと考えがちです。 今回は、ECサイトを例にとり、UI変更を伴わないUX改善について触れてみたいと思います。 2015年9月9日、Amazonジャパンが携帯電話番号があればメールアドレスなしでもアカウント作成できるよう仕様変更を行いました。これはあまり大々的にニュースに取り上げられていませんが、実際にはEC業界にとって大きな意味を持ちます。また、UXの観点からも、UI変更を伴わないながら大きな意義があると思えます。 メアドを持たない若者たち ECの歴史が始まってより長く、メールアドレスをベースとしたユーザー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く