チャットっぽいレイアウトのメモ

とあるアプリのいち機能としてコメントの投稿機能を作ろうとしてチャットっぽい画面を作ったのですが、用途に合わずお蔵入り
折角レイアウトを作ったのでメモとして書き残しておきます

チャット部分はRecyclerViewにして、そのAdapterを用意します

ChatAdapter

//重要なところだけで、その他は省略


    @Override
    public ChatAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        switch (i) {
            case VIEW_TYPE_LEFT:
                return new ViewHolder(mInflater.inflate(R.layout.left, viewGroup, false));
            case VIEW_TYPE_RIGHT:
                return new ViewHolder(mInflater.inflate(R.layout.right, viewGroup, false));
            default:
                return new ViewHolder(mInflater.inflate(R.layout.left, viewGroup, false));
        }
    }

    @Override
    public int getItemViewType(int position) {
        if (mItems.get(position).isShowLeft) {
            return VIEW_TYPE_LEFT;
        } else {
            return VIEW_TYPE_RIGHT;
        }
    }

getItemViewTypeで表示の位置を判定して、それに伴ってonCreateViewHolderで使うlayoutファイルを切替えています

left.xmlでは左に寄った表示レイアウト
right.xmlでは右によった表示レイアウト
これらを用意するだけで画像のようなレイアウトになります


left.xml(right.xmlもほぼ同じなので省略）
※XMLをSyntaxHighlighterで表示しようとしたら、崩れてグチャグチャになっちゃったので、そのままコードを貼ってみた

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="42dp"
        android:text="なまえ"
        android:textColor="@color/lite_gray"
        android:textSize="@dimen/text_small" />

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/user_name"
        android:layout_below="@+id/user_name"
        android:background="@color/lite_gray"
        android:paddingBottom="@dimen/space_small"
        android:paddingLeft="@dimen/space_x_small"
        android:paddingRight="@dimen/space_x_small"
        android:paddingTop="@dimen/space_small"
        android:text="Left message.\nhogehoeg" />


    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/user_image"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_alignBaseline="@+id/message"
        android:layout_marginLeft="@dimen/space_x_small"
        android:clickable="true"
        android:src="@mipmap/ic_launcher"
        app:civ_border_color="#FFFFFF"
        app:civ_border_width="1dp" />

    <TextView
        android:id="@+id/send_at"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/message"
        android:layout_below="@+id/message"
        android:text="7/2 11:00"
        android:textColor="@color/lite_gray"
        android:textSize="@dimen/text_small" />

</RelativeLayout>

Read More [...]

Posted in layout, デザイン

デザインに関してみておいて欲しい２つの動画

ABC2012 東北で行われたセミナーで、デザインに関してみておいて欲しい動画を２つ紹介

yanzmさんの「マルチスクリーンに対応するためのレイアウトのコツ」
どちらかといえば、開発者向けですがデザイナーさんにも見ておいて欲しいですね



そして、こちらが秋葉ちひろさんの「デザイナーがエンジニアさんと楽しくデザイン実装の話をするために」
こちらは、デザイナーさん向けですので、ぜひともデザイナーさんには見ておいて欲しいです

どちらの動画もとても重要な内容
こういう動画がすぐに見られるのは嬉しいですね

Read More [...]

Posted in layout

fill_parent それとも match_parent？

fill_parentもmatch_parentも画面要素の大きさを指定で、どちらも「親の大きさに合せて表示する」という指定になります

なんで、同じ指定が２種類あるの？


と、いう疑問は当然ですよね


最初のころはfill_parentしかなかったので、私も癖でfill_parentを使ってしまいますが、Android2.2(API Level8)からはmatch_parentが追加されて、こちらが推奨されています
※機能的な違いはなく、名前が変わっただけです

match_parentはAndroid2.2(API Level8)から追加されたので、当然それ以前では利用できません

じゃぁ、どっちを使えばいいか・・・そこが問題ですよね

Androidのサイトをみると、現在(2012.10.03現在）だとAndroid2.1以前のシェアは3.9%です。この数字の中にはテスト用端末も含まれており、実際にはかなり少ないと思われます

この数値を考えると、match_parentだけにしても影響は少ないでしょうね
と、いうことで私は今後作成するアプリははmatch_parentだけにしていこうと思います

(2012.10.03 現在  Android Developers - Platform Versions)

Read More [...]

Posted in layout