iPhoneでいうところのセグメンテッドコントロールというのは、こういうの。
つまり、UISegmentedControlってやつ、これをAndroidでも同じようなのできないかと思ったのでその実現方法を書いてみた。同じような挙動というえば、RadioButtonがそれになると思う。RadioButtonを改造して、同じようなものを作ってみた。まず、それぞれのラジオボタンの見た目を返るためのxmlを書く。
左端のボタンのxmlは、次の通り
radiobuttonleft.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:bottomRightRadius="6dp"
android:topLeftRadius="6dp"
/>
<stroke android:color="#222222" android:width="0.66dp" />
<gradient android:startColor="#7A7672" android:endColor="#6B6865" android:angle="270" />
</shape>
radiobuttonleftselect.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:bottomRightRadius="6dp"
android:topLeftRadius="6dp"
/>
<stroke android:color="#222222" android:width="0.66dp" />
<gradient android:startColor="#4A4A4A" android:endColor="#333333" android:angle="270" />
</shape>
真ん中のボタンのxmlは次の通り
radiobuttoncenter.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#222222" android:width="0.66dp" />
<gradient android:startColor="#7A7672" android:endColor="#6B6865" android:angle="270" />
</shape>
radiobuttoncenterselect.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:color="#222222" android:width="0.66dp" />
<gradient android:startColor="#4A4A4A" android:endColor="#333333" android:angle="270" />
</shape>
右端のボタンのxmlは次の通り
radiobuttonright.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:bottomLeftRadius="6dp"
android:topRightRadius="6dp"
/>
<stroke android:color="#222222" android:width="0.66dp" />
<gradient android:startColor="#7A7672" android:endColor="#6B6865" android:angle="270" />
</shape>
radiobuttonrightselect.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners
android:bottomLeftRadius="6dp"
android:topRightRadius="6dp"
/>
<stroke android:color="#222222" android:width="0.66dp" />
<gradient android:startColor="#4A4A4A" android:endColor="#333333" android:angle="270" />
</shape>
それぞれ、二つづつあるのは、選択したときと、非選択状態のときの色をかえるため。
で、２つの状態のボタンをまとめるためのxmlのうち右端のものだけ書くと
radioright.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:state_pressed="true"
android:drawable="@drawable/radiobuttonrightselect" />
<item
android:state_checked="true"
android:drawable="@drawable/radiobuttonrightselect" />
<item
android:state_checked="false"
android:state_pressed="true"
android:drawable="@drawable/radiobuttonright" />
<item
android:state_checked="false"
android:drawable="@drawable/radiobuttonright" />
</selector>
こんな感じ。
その２につづく