HorizontalScrollView でフリップのswiｔchを、（１）

フリップ入力の widgetが無いものかと、探し方が悪いのか見つからない。
Android 4.0 GALAXY NEXUS の設定にある Wifi スイッチみたいなもの。

このAndroid 4.0 GALAXY NEXUS の設定とは異なり、スイッチＯＦＦ側を表示できる形を作った。

これを作るには、ＯＮの時のボタン画像として以下、平行四辺形の画像が必要になる。

画像と文字を、HorizontalScrollView でスライドさせる方法である。
スイッチとして右端か左端にしか動かないものを作れば良い。

サンプルのレイアウト。。。

<HorizontalScrollView
      android:id="@+id/horizontalScrollView"
      android:layout_width="100dp"
      android:layout_height="wrap_content"
      android:scrollbars="none"
      android:fadingEdge="none"
      android:fadingEdgeLength="0dp"
      android:fadeScrollbars="false"
      android:background="@drawable/switch_bg_light" >
   <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal" >
            <RelativeLayout
                  android:layout_width="wrap_content"
                  android:layout_height="match_parent" >
                  <ImageView
                        android:layout_width="30dp"
                        android:layout_height="wrap_content" />
                  <TextView
                        android:id="@+id/textView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_marginLeft="20dp"
                        android:layout_marginTop="5dp"
                        android:text="OFF"
                        android:textColor="#555555"
                        android:textAppearance="?android:attr/textAppearanceSmall" />
            </RelativeLayout>
            <RelativeLayout
                  android:layout_width="wrap_content"
                  android:layout_height="match_parent"  >
                  <ImageView
                        android:id="@+id/imageViewON"
                        android:layout_width="80dp"
                        android:layout_height="wrap_content"
                        android:scaleType="fitXY"
                        android:src="@drawable/switch_activated_dark" />
                  <TextView
                        android:id="@+id/textViewONOFF"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_marginLeft="30dp"
                        android:layout_marginTop="5dp"
                        android:text="ON"
                        android:textColor="#ffffff"
                        android:textAppearance="?android:attr/textAppearanceSmall" />
            </RelativeLayout>
            <RelativeLayout
                  android:layout_width="wrap_content"
                  android:layout_height="match_parent" >
                  <ImageView
                        android:layout_width="40dp"
                        android:layout_height="wrap_content" />
                  <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:layout_marginLeft="1dp"
                        android:layout_marginTop="5dp"
                        android:text="ON"
                        android:textColor="#555555"
                        android:textAppearance="?android:attr/textAppearanceSmall" />
            </RelativeLayout>
      </LinearLayout>
</HorizontalScrollView>


このレイアウトの Activity

public class FlipSample1Activity extends Activity{
   boolean isCurrentON = true;

   @Override
   protected void onCreate(Bundle savedInstanceState){
      super.onCreate(savedInstanceState);
      setContentView(R.layout.fliplayout);

      final ImageView onoffImage = (ImageView)findViewById(R.id.imageViewON);
      final TextView onoffTextView = (TextView)findViewById(R.id.textViewONOFF);
      final HorizontalScrollView scrollView = (HorizontalScrollView)findViewById(R.id.horizontalScrollView);
      scrollView.setOverScrollMode(View.OVER_SCROLL_NEVER);
      scrollView.setOnTouchListener(new View.OnTouchListener(){
         @Override
         public boolean onTouch(View v,MotionEvent event){
            if (event.getAction()==MotionEvent.ACTION_UP){
               onoffImage.setImageResource(isCurrentON ? R.drawable.switch_activated_dark : R.drawable.switch_disabled_light);
               onoffTextView.setText(isCurrentON ? "ON" : "OFF");
               onoffTextView.setTextColor(isCurrentON ? 0xffffffff : 0xff000000);
               scrollView.scrollTo(isCurrentON ? 0 : 1000,scrollView.getScrollY());
               isCurrentON = !isCurrentON;
               return true;
            }
            return false;
         }
      });
   }
}

しかし、これでは問題がある。
タッチして、右→左に移動、指を離さずに左→右に戻した時、
期待するのは、スイッチしないことであり、この Activity の作りででは、
指を離すとスイッチしてしまう。

これを解決させるには、HorizontalScrollView のスクロール操作をハンドリングして
タッチの動きと連携してから、スイッチを処理する必要がある。