4

レイアウトでこの特定のタイプのラジオ ボタンを実現したいと思います。

ここに画像の説明を入力

= 最初のアイテム、中間のアイテム、最後のアイテムでグラフィックが異なり、角が丸くなっています。3 種類のボタンに異なるスタイル (カスタム スタイル、ステートフルなドローアブルを使用) を使用してこれを行うことを想像できます。

カスタムトグルボタンを使用してこれを実装しています。最初と最後のアイテムに異なるドローアブルを使用するためにドローアブルセレクターを利用したいので、次を使用します。

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:state_first="true" 
        android:drawable="@drawable/radio_left_act"/> 

    <item android:state_checked="true" android:state_last="true" 
        android:drawable="@drawable/radio_right_act"/> 

    <item android:state_checked="true" 
        android:drawable="@drawable/radio_middle_act"/> 

    <item android:state_checked="false" android:state_first="true" 
        android:drawable="@drawable/radio_left_inact"/> 

    <item android:state_checked="false" android:state_last="true" 
        android:drawable="@drawable/radio_right_inact"/> 

    <item android:state_checked="false" 
        android:drawable="@drawable/radio_middle_inact"/> 

</selector>

しかし、現在、状態が自動的に設定されないという問題があるstate_firstためstate_last、LinearLayoutボタンをクリックするたびに手動で設定する必要があります。これらの状態が自動的に設定される方法、レイアウトはありますか? 助けてくれてありがとう。

4

3 に答える 3

3

特別なことは何も見つからなかったので、カスタムトグルボタンを使用した「デフォルト」ソリューションを次に示します。styles.xml最初、中間、最後のボタンの3つの異なるスタイル（置く）は次のとおりです。

<!-- Toggle button styles -->

<style name="CustomToggle">
    <item name="android:paddingTop">9dp</item>
    <item name="android:paddingBottom">9dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
</style>            

<style name="FirstToggle" parent="@style/CustomToggle">
    <item name="android:background">@drawable/radio_first</item>
</style>            

<style name="MiddleToggle" parent="@style/CustomToggle">
    <item name="android:background">@drawable/radio_middle</item>
</style>            

<style name="LastToggle" parent="@style/CustomToggle">
    <item name="android:background">@drawable/radio_last</item>
</style>

また、トグルボタンのイベントを処理するアクティビティの短いコードであるため、同時に1つのボタンのみがチェックされ、チェックされたボタンは無効になります。

public class AktivityActivity extends Activity 
{
    ArrayList<ToggleButton> toggle_buttons;

    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.aktivity);

        initToggleButtons();
    }

    private void initToggleButtons() 
    {
        toggle_buttons = new ArrayList<ToggleButton>();
        toggle_buttons.add((ToggleButton) findViewById(R.id.toggle_1));
        toggle_buttons.add((ToggleButton) findViewById(R.id.toggle_2));
        toggle_buttons.add((ToggleButton) findViewById(R.id.toggle_3));

        // Listen on all toggle buttons
        for (ToggleButton toggle_button : toggle_buttons)
            toggle_button.setOnCheckedChangeListener(check_listener);

        // Check first toggle button
        updateToggleButtons(toggle_buttons.get(0));
    }

    // Only one toggle can be checked, and checked button must be disabled
    private void updateToggleButtons(ToggleButton checked_button)
    {
        for (ToggleButton toggle_button : toggle_buttons)
        {
            toggle_button.setChecked(toggle_button == checked_button);
            toggle_button.setEnabled(toggle_button != checked_button);
        }
    }

    // Toggle buttons change listener
    OnCheckedChangeListener check_listener = new OnCheckedChangeListener() 
    {
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
        {
            if (isChecked)
                updateToggleButtons((ToggleButton) buttonView);
        }
    };
}

多分それは誰かのために役立つことができます...

于 2011-09-17T18:11:10.357 に答える
1

WordPress Android プロジェクトを確認してください。同様の機能を提供する「ToggleButton」を使用します。.xml については、こちらを参照してください。完全なソースをダウンロードするには、ここをクリックしてください。

トグルボタンしかないので、あなたが望むものと同じにはなりませんが、ラジオボタンの必要なスタイルに適応させることができます(まだ組み込まれていない場合)。

Wordpress Android プロジェクトは、私が多くのことを学ぶのに役立ちました。テーマ、カスタム ボタン、カスタム レイアウト、トグル ボタン、xmlrpc などのすべて。

于 2011-09-16T21:16:17.623 に答える
1

ここに画像の説明を入力

これを行うために私が見つけた最も簡単な方法は次のとおりです。

1) RadioButton クラスを次のように拡張します。

import android.content.Context;
import android.view.ViewGroup;
import android.widget.RadioButton;

public class RoundedButton extends RadioButton {

    private static final int[] STATE_ONLY_ONE = new int[] {
            android.R.attr.state_first,
            android.R.attr.state_last,
    };

    private static final int[] STATE_FIRST = new int[] {
            android.R.attr.state_first
    };

    private static final int[] STATE_LAST = new int[] {
            android.R.attr.state_last
    };

    public RoundedButton(Context context) {
        super(context);
    }

    @Override
    protected int[] onCreateDrawableState(int extraSpace) {
        ViewGroup parent = (ViewGroup) getParent();
        if (parent == null) {
            return super.onCreateDrawableState(extraSpace);
        }

        final int size = parent.getChildCount();
        final boolean isFirst = (parent.getChildAt(0) == this);
        final boolean isLast = (parent.getChildAt(size-1) == this);

        int[] states = super.onCreateDrawableState(extraSpace + 2);
        if (isFirst && isLast) {
            mergeDrawableStates(states, STATE_ONLY_ONE);
        } else if (isFirst) {
            mergeDrawableStates(states, STATE_FIRST);
        } else if (isLast) {
            mergeDrawableStates(states, STATE_LAST);
        }

        return states;
    }

}

2) 「res/drawable/rbtn_selector.xml」に 1 つの XML ファイルを作成し、ラジオ ボタンの背景用の XML コードの下に追加します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- First Checked -->
    <item android:state_first="true" android:state_checked="true">
        <shape>
            <gradient
                android:angle="90"
                android:startColor="@color/radio_button_selected_start"
                android:endColor="@color/radio_button_selected_end"
                android:type="linear" />
            <!--<solid android:color="@android:color/holo_blue_dark" />-->
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
            <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_selected" />
        </shape>
    </item>

    <!-- First Unchecked -->
    <item android:state_first="true" android:state_checked="false">
        <shape>
            <gradient
                android:angle="90"
                android:startColor="@color/radio_button_unselected_start"
                android:endColor="@color/radio_button_unselected_end"
                android:type="linear" />
            <!--<solid android:color="@android:color/holo_purple"/>-->
            <corners android:topLeftRadius="10dp" android:topRightRadius="@dimen/radio_button_radius"/>
            <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_unselected" />
        </shape>
    </item>

    <!-- Last Checked -->
    <item android:state_last="true" android:state_checked="true">
        <shape>
            <gradient
                android:angle="90"
                android:startColor="@color/radio_button_selected_start"
                android:endColor="@color/radio_button_selected_end"
                android:type="linear" />
            <!--<solid android:color="@android:color/holo_green_dark" />-->
            <corners android:bottomLeftRadius="@dimen/radio_button_radius" android:bottomRightRadius="@dimen/radio_button_radius"/>
            <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_selected" />
        </shape>
    </item>

    <!-- Last Unchecked -->
    <item android:state_last="true" android:state_checked="false">
        <shape>
            <gradient
                android:angle="90"
                android:startColor="@color/radio_button_unselected_start"
                android:endColor="@color/radio_button_unselected_end"
                android:type="linear" />
            <!--<solid android:color="@android:color/holo_red_dark"/>-->
            <corners android:bottomLeftRadius="@dimen/radio_button_radius" android:bottomRightRadius="@dimen/radio_button_radius"/>
            <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_unselected" />
        </shape>
    </item>



    <!-- Default Checked -->
    <item android:state_checked="true">
        <shape>
            <gradient
                android:angle="90"
                android:startColor="@color/radio_button_selected_start"
                android:endColor="@color/radio_button_selected_end"
                android:type="linear" />
            <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_selected" />
            <!--<solid android:color="@android:color/holo_orange_dark" />-->
        </shape>
    </item>

    <!-- Default Unchecked -->
    <item android:state_checked="false">
        <shape>
            <gradient
                android:angle="90"
                android:startColor="@color/radio_button_unselected_start"
                android:endColor="@color/radio_button_unselected_end"
                android:type="linear" />
            <stroke android:width="@dimen/radio_button_border" android:color="@color/radio_button_border_unselected" />
            <!--<solid android:color="@android:color/holo_green_light"/>-->
        </shape>
    </item>
</selector>

3) 「res/drawable/rbtn_textcolor_selector.xml」に 1 つの XML ファイルを作成し、ラジオ ボタンのテキスト セレクターの色の XML コードを以下に追加します (テキスト カラー セレクターの xml ファイル)。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/radio_text_selected"/>
    <item android:color="@color/radio_text_unselected"/>
</selector>

4) スタイルをボタンに設定します。

4.1) プログラムで RoundedButton を既存の RadioGroup に追加します。

RoundedButton newRadioButton = new RoundedButton(this.getActivity());

if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
    newRadioButton.setBackgroundDrawable(this.getActivity().getResources().getDrawable(R.drawable.rbtn_selector));
} else {
    newRadioButton.setBackground(this.getActivity().getResources().getDrawable(R.drawable.rbtn_selector));
}
newRadioButton.setTextColor(this.getActivity().getResources().getColorStateList(R.color.rbtn_textcolor_selector));

4.2) XML:

<RoundedButton
    android:id="@+id/bt_id_1"
    android:background="@drawable/rbtn_selector"
    android:textColor="@drawable/rbtn_textcolor_selector" />

5) 例で使用した独自の色と寸法を選択します。

<color name="radio_text_selected">#FFF</color>
<color name="radio_text_unselected">#222</color>

<color name="radio_button_selected_start">#5393c5</color>
<color name="radio_button_selected_end">#6facd5</color>

<color name="radio_button_unselected_start">#f9f9f9</color>
<color name="radio_button_unselected_end">#eee</color>

<color name="radio_button_border_selected">#2373a5</color>
<color name="radio_button_border_unselected">#aaa</color>

と：

<dimen name="radio_button_radius">10dp</dimen>
<dimen name="radio_button_border">0.7dp</dimen>
于 2015-01-31T14:27:43.443 に答える