タグ

uiと*programmingに関するsgtakeruのブックマーク (10)

  • Facebookアプリのメニューらしきものをandroidで実装してみた

    お久しぶりです。高畑です。 前回にandroidのことをちょろっと書きましたが、今回もandroidネタを書きます。 今回はタイトルの通り、iphoneandroidのFacebookアプリにある左側からにょいーんとなるメニューを実装してみたいと思います。 実装のイメージとしては、メニューとなるレイアウトと、メインとなるレイアウトを重ねあわせて。メインのレイアウトを右ににょいーんとスライドさせることで下に隠れていたメニューを表示するというものです。 実際にFacebookのアプリ側はどうやって実装しているのかはわかりませんが、ここでやる方法でかなり良い感じになります。 今回使用するレイアウトのxmlファイルです <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.androi

  • Android で画像なしの光沢グラデーション - アカベコマイリ

    スマートフォンなどでよく見かける光沢のあるグラデーションを持ったツールバーを画像なしで作成してみる。Android ではコントロールの描画方法を drawable リソースから指定可能。これは画像と XML に大別される。 画像はデザインの自由度が高く美しいのだが解像度 (ldpi、mdpi、hdpi、...etc) と引き延ばしを意識する必要がある。詳しくは Draw 9-patch を参照のこと。有志による日語訳はこちら。一方 XML はデザイン指定の方法がかなり限定されるため希望どおりの描画結果を得るのが難しい。 dp または dip のような密度非依存ピクセルによるサイズ指定と標準で用意されている形状・塗りは解像度に依存しないため、様々な端末への対応が容易になる。dp や dip については Supporting Multiple Screens を参照のこと。有志による日語訳

  • 画像ファイルを使わずにそこそこ見栄えのいいボタンを作ってみる - なら@はてなブログ

    約3ヶ月ぶりの更新。 ちょっと仕事がバタバタしててというか、ストレスたまりすぎてて家に帰ってまでプログラムのことを考えたくなかったというか。 フロンティア(MHF)始めたのが原因かもしれませんが。 3鯖でのんびりやってますので、見かけたら声かけてください。喜びます。 で、仕事Androidアプリをいろいろと公開していますが、自分でもAndroid端末使いだして気づいたことは、iPhoneと比較してストレージ容量が非常に少ないこと。 なので、アプリのサイズは少しでも小さくしたほうがよいですね。microSDカードに移せますが、ユーザーが安物SDカード使ってると目に見えて処理が遅くなりますし。 で、これまではオリジナルボタンとか背景とかはデザイナーさんに画像ファイルを作ってもらってたんですが、できれば画像は使わない方向でいきたいなー、ということでちょっとだけやってみました。 とりあえず作って

    画像ファイルを使わずにそこそこ見栄えのいいボタンを作ってみる - なら@はてなブログ
  • 画面遷移のアニメーション | Techfirm Android Lab

    AndroidでもiPhoneみたいにぬるっと画面遷移したい!と思ったことありませんか? 上下左右から次画面が入ってくるようなやつです。 知らなかったのですが、実はAndroidでも画面遷移をアニメーションさせる方法がありました。 しかもかなり簡単です。 調べていた際に、こちらのサイトがかなり分かりやすかったので、具体的なコードについてはこちらを参考にしてみてください。 http://www.adamrocker.com/blog/289/activity_open_close_animation.html 以下はアニメーションの幅を広げるための補足になります。 Animation 上記サイトでは次画面が下から出てくるようなアニメーションですが、XMLの記述次第で様々なアニメーションが可能です。 アニメーションの種類としては次の様なものがあり、<set>要素内に複数記述するこ

  • 写真が語るUXとUIの違い - Nothing ventured, nothing gained.

    Windows XPのXPがeXPerienceだったことを覚えている人がどのくらいいるかわからないが、正直、最初にユーザーエクスペリエンスと聞いたときに、どのように日に定着させようかと悩んだ。略語を開くことなどあまり無いので、製品名などは大して心配はしなかったのだが、確か何かの設定画面かにも、Experienceというタブ名か何かがあり、どのように訳すか頭を痛めたように記憶する。 それから数年、すっかりUX、すなわちユーザーエクスペリエンスという言葉が定着したように思う。それでも、今でもUXUIを混同する場面に出くわすことがある。 すでに様々なところで説明はされているが、敢えて、ここでもUXUIの違いを説明しよう。 UX(ユーザーエクスペリエンス)は、製品やサービスに対して、ユーザーがどのように感じ、そして反応するかのことである。実は、UXは2010年にISO 9241-210とい

  • ふつうのformをつかいたい - はまちや2 - ニコニコ超会議2012

    こんにちはこんにちは!! はまちや2 (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう? プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 日のテーマ: 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…(はいはい) フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた!) (これで送信、と…) ※エラー:住所を正しく入力してください (え、なんで!?) ※住所は全角で入力してく

  • 【Flex】ComboBoxとMenuを組み合わせて多段プルダウンメニューを作ってみました | _level0 - KAYAC Front Engineer Blog

    こんにちは! 今回はFlexで、プルダウンを実現するComboBoxコンポーネントとメニューを実現するMenuを使って、多段化したプルダウンメニューを作ってみました。 「プルダウンをクリック→カテゴリや区分を選んでマウスオーバー→さらに出てきた項目をクリックして選択」 というような動作を目指しました。 実行結果は以下のようになります。 multiPullDown.swf ソースはコチラ.zip。↓にも表示しています。 ポイントは、ComboBoxのcloseメソッドをオーバーライドして閉じるタイミングを管理すること、サブメニューの方をクリックした時にComboBoxのpromptを設定することです。 ○メインのアプリケーションmxml <?xml version = "1.0" encoding = "utf-8"?> <mx:Application xmlns:mx = "http://

    【Flex】ComboBoxとMenuを組み合わせて多段プルダウンメニューを作ってみました | _level0 - KAYAC Front Engineer Blog
  • Creating User interface

    sgtakeru
    sgtakeru 2010/07/04
    px,in,mm,pt,dp,sp
  • Androidのアプリケーション開発のGUIキット, アイコンを, フォントとツール « 息子Byteの & ウェブデザイン & 開発

    ホット前回のGUIの記事の直後に, iPhoneと開発のGUIキットを計算された, 今日に焦点を当てる アンドロイド 開発. 考え方は同じです: アプリの設計と開発を合理化するために, AndroidGUIのかなり包括的なコレクションとキット, アイコンを, フォント, 。PSDは、ツール, それは、あなたではなく、開発をゼロからすべてを設計することに焦点を当てるようになります. リンゴに比べてiPhone, Androidの相互作用の設計ガイドラインは、はるかに広範なされてからも連隊、彼らです. アンドロイドのガイドラインは、包括的かつ明確に十分である, まだ彼らは許可しないいくつかのオリジナルデザインの創造性の余地 – これ良いです. もちろん, そこに理由がある設計指針している理由は、, 彼らは虐待すべきではない (niceはしかし、元に), ガイドライン でしょう あなたは、ユー

    sgtakeru
    sgtakeru 2010/06/13
    GUI開発に使えるツール紹介
  • ウノウラボ Unoh Labs: 四角いリンク

    yamaokaです。 最近タブをメタファーにしたナビゲーションをよく見るようになりました。タブには大抵、内容を示すキャプションが付けられています。さて、どこからどこまでがリンクでしょうか。どの部分をクリックすればそのタブを選択できるでしょうか。 例えば、キャプションの文字だけにリンクが貼られている場合。利用者はタブの中のさらに狭い範囲、文字の部分を狙ってクリックしなくてはなりません。 実はマウスの操作というのは難しいのです。狭い範囲を狙って指定することにはあまり向いていません。目的到達のために狭い範囲のクリックを強制するのはどう考えてもよいインターフェースではありません。 そこで大抵のタブ型インターフェースではタブの枠の中全体をリンクとして扱えるようになっています。 アンカー要素のdisplay属性をblockにして、必要な高さと幅を与えることでリンクの範囲を四角形に広げることができますね

  • 1