[Android]Making SegmentedControl like iOS

今回はAndroidでボタンをiOSのUISegmentedControlの様に見せる方法についてご紹介します。
I introduce how to distribute buttons like UISegmentedControl of iOS on Android.

といってもボタンを2つ並べて形を似せるだけで完成です。
But if you distribute two buttons and make these shape like UISegmentedControl, it is finished.

環境(Environment)：Android Studio 2.2.1, API 21

package net.studioks.sample1;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import static android.widget.ListPopupWindow.WRAP_CONTENT;

public class sample1 extends Activity implements View.OnClickListener {
    private Button _buttonGroup;
    private Button _buttonDate;

    private GradientDrawable _gradient_buttonGroupOn = new GradientDrawable();
    private GradientDrawable _gradient_buttonGroupOff = new GradientDrawable();
    private GradientDrawable _gradient_buttonDateOn = new GradientDrawable();
    private GradientDrawable _gradient_buttonDateOff = new GradientDrawable();

    @Override    

    public void onCreate(Bundle bundle){
        super.onCreate(bundle);

        RelativeLayout relativeLayout = new RelativeLayout(this);
        setContentView(relativeLayout);

        _gradient_buttonGroupOn.setCornerRadii(new float[]{5,5,0,0,0,0,5,5});
        _gradient_buttonGroupOn.setColor(Color.BLUE);
        _gradient_buttonGroupOff.setCornerRadii(new float[]{5,5,0,0,0,0,5,5});
        _gradient_buttonGroupOff.setColor(Color.WHITE);

        _gradient_buttonDateOn.setCornerRadii(new float[]{0,0,5,5,5,5,0,0});
        _gradient_buttonDateOn.setColor(Color.BLUE);
        _gradient_buttonDateOff.setCornerRadii(new float[]{0,0,5,5,5,5,0,0});
        _gradient_buttonDateOff.setColor(Color.WHITE);

        _buttonGroup = new Button(this);
        _buttonGroup.setId(1);
        _buttonGroup.setText("Group");
        _buttonGroup.setGravity(Gravity.CENTER);
        _buttonGroup.setPadding(0,0,0,0);
        _buttonGroup.setTextColor(Color.WHITE);
        _buttonGroup.setWidth(100);
        _buttonGroup.setHeight(60);
        _buttonGroup.setOnClickListener(this);
        _buttonGroup.setBackground(_gradient_buttonGroupOn);
        RelativeLayout.LayoutParams param_buttonGroup =
                new RelativeLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
        param_buttonGroup.leftMargin = 10;
        param_buttonGroup.topMargin = 5;
        param_buttonGroup.addRule(RelativeLayout.ALIGN_TOP);
        relativeLayout.addView(_buttonGroup,param_buttonGroup);

        _buttonDate = new Button(this);
        _buttonDate.setId(2);
        _buttonDate.setGravity(Gravity.CENTER);
        _buttonDate.setPadding(0,0,0,0);
        _buttonDate.setText("Date");
        _buttonDate.setTextColor(Color.BLUE);
        _buttonDate.setOnClickListener(this);
        _buttonDate.setHeight(100);
        _buttonDate.setHeight(60);
        _buttonDate.setBackground(_gradient_buttonDateOff);
        RelativeLayout.LayoutParams param_buttonDate =
                new RelativeLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
        param_buttonDate.leftMargin = 0;
        param_buttonDate.topMargin = 5;
        param_buttonDate.addRule(RelativeLayout.RIGHT_OF,1);
        relativeLayout.addView(_buttonDate,param_buttonDate);
    }

    public void onClick(View v) {

        switch (v.getId()){
            case 1:
                //Click Group Button                

                _buttonGroup.setTextColor(Color.WHITE);
                _buttonGroup.setBackground(_gradient_buttonGroupOn);
                _buttonDate.setTextColor(Color.BLUE);
                _buttonDate.setBackground(_gradient_buttonDateOff);
                break;

            case 2:
                //Click Date Button                

                _buttonGroup.setTextColor(Color.BLUE);
                _buttonGroup.setBackground(_gradient_buttonGroupOff);
                _buttonDate.setTextColor(Color.WHITE);
                _buttonDate.setBackground(_gradient_buttonDateOn);
                break;

        }
    }
}

動かすとこんな感じになります。

If you run this program, you can see below screen.

にほんブログ村

クリエイティブライフ ブログランキングへ