AndroidらしいUIの考察

エントリ分け）

[android] / “Androidアプリで使える便利なUIライブラリ - 遙かへのスピードランナー” URL

2012-12-07 13:32:47 via Hatena

[android] / “GreenDroid” URL

2012-12-07 13:36:39 via Hatena

[android] / “Android UI Design Patterns: Free Android UI library & component roundup” URL

2012-12-07 13:41:09 via Hatena

さっきのリンクで紹介されてたライブラリこれかな。 RibbonMenu URL

2012-08-25 12:19:55 via web

　RibbonMenu はAndroid3系以下だとVerificationErrorを吐く。あとで見てみないと・・

URL の話を @sakura_bird1 さんとしてた。こういう奴使いこなしたいですね・・・ #yochiand

2012-12-23 14:04:41 via YoruFukurou

NineOldAndroids
- androidアニメーションの置換メモに情報整理中

でもまあIOSでどこか有名なところが似たようなUI使わないと採用されないんだろうな・・・
とか思いつつ。基本的にIOSでない仕様は極力却下される傾向にあるので（汗 *1

アカイトリで使われているらしいライブラリ）

アカイトリはライセンスの同梱の仕方としてはすごく参考になるかも
(業務アプリのやつも実は入れたほうがいいかなとか思ってたりしてる。。。）

【Android】SlidingDrawerを上から開ける(左も出来るよ)

res/main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
   <View class="it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer"
     xmlns:my="http://schemas.android.com/apk/res/パッケージ名" //サンプルだと[it.sephiroth.demo.slider]と定義
     android:id="@+id/drawer"
     my:direction="topToBottom" //☆
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     my:handle="@+id/handle"
     my:content="@+id/content">
      <include android:id="@id/content"
        layout="@layout/pen_content" />
      <ImageView android:id="@id/handle"
        android:layout_width="wrap_content"
        android:layout_height="40px"
        android:src="@drawable/sliding_drawer_handle_bottom" /> //☆☆
   </View>
</RelativeLayout>

がデモのやつのデフォルトなんですが、これを右横にするために書換えてみる

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">

        <!--//これサンプルでは使ってないみたい-->
	<Button
		android:id="@+id/button_open"
		android:layout_width="100dp"
		android:layout_height="wrap_content"
		android:text="@string/open"
		android:layout_centerInParent="true"
		android:visibility="gone" />
		
	<view 
	    class="it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer"
		xmlns:sd="http://schemas.android.com/apk/res-auto"
		sd:direction="rightToLeft" //☆
		sd:handle="@+id/handle"
		sd:content="@+id/content"
		android:id="@+id/drawer"
		android:layout_width="wrap_content"
		android:layout_height="fill_parent">
		<!-- //display page -->
		<include
			android:id="@id/content"
			layout="@layout/pen_content" />
		<ImageView
			android:id="@id/handle"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:src="@drawable/sd_handle_right" /> //☆☆
	</view>
</RelativeLayout>

☆) sd:direction に関しては res/values/attrs.xml に記載されているもので変更*2
☆☆) sliding_drawer_handle_bottomを90度回転加工したものを使用。

で試してみると
取っ手がセンターリングされてしまうのと、他の属性もあるけどイマイチ感が・・

res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="direction">
        <enum name="rightToLeft" value="0" />
        <enum name="bottomToTop" value="1" />
        <enum name="leftToRight" value="2" />
        <enum name="topToBottom" value="3" />
    </attr>
    
    <declare-styleable name="MultiDirectionSlidingDrawer">
        <attr name="handle" format="reference" />
        <attr name="content" format="reference" />
        <attr name="direction" />
        <attr name="bottomOffset" format="dimension"  /> //☆
        <attr name="topOffset" format="dimension"  />       //☆
        <attr name="allowSingleTap" format="boolean" />   //☆☆
        <attr name="animateOnClick" format="boolean" />  //☆☆
    </declare-styleable>
</resources>

☆ 開いた画面に取っ手を表示させたくないときに調整する感じのよう
☆☆ イマイチ効果差分がわからず‥‥‥（汗

https://play.google.com/store/apps/details?id=jp.co.telemarks.secondbrowser&hl=ja

みたいに右下に取っ手持って行きたいんですけどねー。コードの読んで弄らないと駄目か。。（汗

備考）
ちなみに
　RelativeLayoutで使わないと上手く表示できません。
　LinerLayoutだと背面に隠れてしまうみたい。
　あと中央に取手をセンタリングする処理がコードベタ書きなので
　属性拡張したほうがいいかな。。

コードで弄るなら
MultiDirectionSlidingDrawer::onLayout

		if ( mVertical ) {
			handleLeft = ( width - handleWidth ) / 2;
                        //〜略〜
		} else {
			//handleTop = ( height - handleHeight ) / 2;
			handleTop = ( height - handleHeight ) - 70;
                        //〜略〜
                }

辺り弄って行ったりすることになるかと・・

おもしろそうなの）