テクメモ このページをアンテナに追加 RSSフィード Twitter

2013-02-18

2011-02-24

PreferenceActivityのレイアウト変更

PreferenceActivityがListActivityを継承しているので、同様にListViewを含めたレイアウトを定義できる。

スクロールする要素を追加したいしたい場合は、getListView().addHeaderView(view)とかでできそう。

public class Preferences extends PreferenceActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // preferencesとは別にlayoutを設定する
        setContentView(R.layout.preferences);
        addPreferencesFromResource(R.xml.preferences);
    }
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        >
    <!-- このListViewにPreferencesが入る。idは"@android:id/list"で固定 -->
    <ListView
            android:id="@android:id/list"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            />
    <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            />
</LinearLayout>

2011-01-10

Androidアプリを作ったときにやったこと

少し前になりますが、Bookmark Homeというブックマーク関連のAndroidアプリを公開しました。AndroidもJavaも初めてで制作期間は2ヶ月ぐらい。その時の記録です。


アプリについて

ホームアプリのようなUIのブックマークアプリ。見た目はiPhoneにも近いです。詳しくは下のページ辺りを参照してください。

http://www.appbrain.com/app/bookmark-home/org.lagoscript.bookmarkhome

http://www.applizoo.com/detail/app/org.lagoscript.bookmarkhome

f:id:lagos_on:20110111054157p:image


Java

Javaというか静的型付けの言語を本格的に触ったのは初めてだったけど、LLをいくつかやったことがあるためかすぐに覚えられました。やったことはリファレンス系の本を一冊軽く読んだだけ。自分にとってあまり新しい概念はない気がしたけど、Genericsとか無名クラスとかはちょっと新鮮でした。あとは言語がクラスの構造化を強制するのでその辺の勉強になった気がする。


Android

最初は初心者本を一冊読んでから、サンプルアプリ(Api Demo)を動かしつつそのソースを見ていきAndroidでどういう事ができるのかを確認。その後はAndroid本を数冊買って、オープンソースの標準アプリやAndroid自体のフレームワークのソースを確認しながら開発をしていきました。開発にはEclipseを使用。Vimなしでは生きていけない体になってしまっていたのでVrapperインストールしてViライクなキーバインドにして使ってました。


標準アプリ

作ったものが近い機能をもっていたこともあり、"Launcher"と"Browser"がかなり参考になった。コードの構成とかに迷ったときにも、これらの標準アプリのソースを確認して同じ感じにしたり。ソースは下のページの"snapshot"からダウンロードするか、Gitでダウンロードできます。

http://android.git.kernel.org/


Androidフレームワーク

公式のドキュメントだけではフレームワーク部分の細かい動きがわからないので、ソースをダウンロードして読まなければならないことが多いです。必要なWidgetが足りないときに、近い機能を持つViewのソースをちょっと改造してWidgetを作ったりもした。


サンプルアプリ

Android SDKに含まれているApi Demosというアプリがとても参考になります。APIの簡単なサンプルを動かしながらソースを確認できる。Androidでできることを把握したり、これどうやるんだっけ?という時にとてもいい。


Android本

数冊読んだ中のオススメ。


初めてのAndroid

初めてのAndroid

最初に読んだ初心者本。簡単な数独アプリを作りながらAndroidの基礎を把握できる。ちょっと古くなったけどコンパクトだし実際のアプリの作り方がわかるので一冊目として最適。


たぶん一番詳細なAndroid本。これでも応用的なことをしようとすると全然足りないけど、ひと通り読むといい気がする。

2010-07-09

Androidでリソースの画像を角丸に変換するやり方メモ

// リソースからbitmapを作成
Bitmap image = BitmapFactory.decodeResource(context.getResources(), R.drawable.image);

// 画像サイズ取得
int width  = image.getWidth();
int height = image.getHeight();

// リサイズ後サイズ
int w = 100;
int h = 100;

// 切り取り領域となるbitmap生成
Bitmap clipArea = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);

// 角丸矩形を描写
Canvas c = new Canvas(clipArea);
c.drawRoundRect(new RectF(0, 0, w, h), 10, 10, new Paint(Paint.ANTI_ALIAS_FLAG));

// 角丸画像となるbitmap生成
Bitmap newImage = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);

// 切り取り領域を描写
Canvas canvas = new Canvas(newImage);
Paint paint = new Paint();
canvas.drawBitmap(clipArea, 0, 0, paint);

// 切り取り領域内にオリジナルの画像を描写
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(image, new Rect(0, 0, width, height), new Rect(0, 0, w, h), paint);

// viewにset
ImageView imageView = (ImageView)context.findViewById(R.id.imageview);
imageView.setImageDrawable(new BitmapDrawable(newImage));

2010-05-23

jQueryプラグインは簡単にGoogle Chromeエクステンションにできる

この前作ったjQuery flickableをGoogle Chromeのエクステンションにしてみたらすごく簡単だった。

設定ファイルとJSCSSを少し書くだけ。


ファイルリスト

適当なディレクトリに次のファイルを用意。

  • manifest.json
  • jquery.js
  • jquery.flickable.js
  • content_script.js
  • content_style.css

manifest.json

エクステンションの設定ファイル。

{
  "name": "Flick Scroll", // エクステンションの名前
  "version": "0.1", // バージョン
  "description": "Enable flick scrolling like iPhone", // 説明

  // 表示したページで実行するスクリプトを設定する
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"], // 対象のページ、この例ではすべてのページを指定
      "css": ["content_style.css"], // 読み込むCSSファイル
      "js": ["jquery.js", "jquery.flickable.js", "content_script.js"] // 読み込むJSファイル
    }
  ]
}

jquery.js

jQuery本体そのまま。


jquery.flickable.js

jQueryプラグイン本体そのまま。


content_script.js

プラグインを実行するJSファイル。下記で全部。

var element = $('body');

if (!element.hasClass('ui-flickable')) { // プラグインがすでに読み込まれていないかチェック
    element.flickable() // プラグイン呼び出し
        
    // 必要に応じて処理を追加する
        .addClass('chrome-flick-scroll')
        .click(function() {
            $(this).flickable('refresh');
        });
}

content_style.css

表示したページに適用するCSS。

body.chrome-flick-scroll > .ui-flickable-container {
  cursor: pointer;
}

body.chrome-flick-scroll.ui-flickable-disabled > .ui-flickable-container, 
body.chrome-flick-scroll .ui-flickable-canceled {
  cursor: default;
}

表示したページにJSを当てるだけならこれだけでOK。

ディレクトリをzipで固めてアップロードすると公開できる。


※エクステンションは実験的に公開していたものだったので削除しました