如何在Android中水平实现弯曲的自定义按钮?

时间:2016-01-22 09:25:45

标签: android android-custom-view android-button

我正在尝试实现水平重叠的自定义按钮。点击的按钮将是明亮的,其余的将会褪色一点,并且所选按钮的重叠边框将隐藏在后面。这是一张图片来澄清我在说什么。enter image description here

为了做到这一点,我制作了一个水平方向的线性布局,其中包含了包含每个按钮的子线性布局,但最终有奇怪的按钮伸出父布局,即使我的宽度和高度都有一点点。有人可以给我一个如何做到这一点的提示吗?

3 个答案:

答案 0 :(得分:1)

我通过RadioButton做了类似的事情。您可能需要将单选按钮逻辑更改为按钮,以便一次只能单击一个。以下是我的代码 1)内部活动布局如下:

<RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/myRadioGroup"
            android:background="#A4A4A4"
            android:orientation="horizontal">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="One"
            android:id="@+id/One"
            android:layout_alignParentLeft="true"
            android:background="@drawable/selector"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="Two"
            android:id="@+id/Two"
            android:background="@drawable/selector"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Theee"
            android:id="@+id/Three"
            android:layout_alignParentRight="true"
            android:background="@drawable/selector"
            />
        </RadioGroup>


2)残疾人背景:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:centerColor="#A4A4A4"
        android:startColor="#A4A4A4"
        android:endColor="#A4A4A4"
        />
</shape>


3)enabled.xml的背景

<gradient
        android:centerColor="@color/colorPrimary"
        />
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners
        android:radius="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "10dp" />


4) RadioGroup的活动代码

radioGroup = (RadioGroup) findViewById(R.id.myRadioGroup);
        one=(RadioButton)findViewById(R.id.One);
        two=(RadioButton)findViewById(R.id.Two);
        three=(RadioButton)findViewById(R.id.Three);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                if (checkedId == R.id.One) {
                    one.setBackground(getDrawable(R.drawable.enabled));
                    two.setBackground(getDrawable(R.drawable.disabled));
                    three.setBackground(getDrawable(R.drawable.disabled));
                    Toast.makeText(getApplicationContext(), "choice: One", Toast.LENGTH_SHORT).show();

                } else if (checkedId == R.id.Two) {
                    Toast.makeText(getApplicationContext(), "choice: Two", Toast.LENGTH_SHORT).show();
                    two.setBackground(getDrawable(R.drawable.enabled));
                    one.setBackground(getDrawable(R.drawable.disabled));
                    three.setBackground(getDrawable(R.drawable.disabled));
                }
                else {
                    three.setBackground(getDrawable(R.drawable.enabled));
                    two.setBackground(getDrawable(R.drawable.disabled));
                    one.setBackground(getDrawable(R.drawable.disabled));
                    Toast.makeText(getApplicationContext(), "choice: Three", Toast.LENGTH_SHORT).show();

                }
            }
        });


5)选择器xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/disabled" />
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/enabled" />
    <item
        android:state_pressed="false"
        android:state_enabled="true"
        android:drawable="@drawable/disabled" />
    <item
        android:state_focused="true"
        android:state_enabled="true"
        android:drawable="@drawable/enabled" />
    <item
        android:state_enabled="true"
        android:drawable="@drawable/enabled" />
</selector>

答案 1 :(得分:0)

使用RelativeLayout a a水平三个按钮与中心按钮重叠另外两个按钮。 现在在左右上方放置两个按钮,这些按钮与中心按钮重叠。让他们的知名度消失。

现在点击左键单击左侧重叠按钮可见,依此类推。

希望它有所帮助!

答案 2 :(得分:0)

这就是你的布局文件的样子: -

(define (cc a b)
  (cond ((= b 1) a))
  ((odd? b) (+ a (cc a (- b 1))))
  (else (cc (double a) (halve b)))
  )
(define (double n)
  (+ n n)
  )
(define (halve n)
  (/ n 2)
  )

用于灰色背景的round_background.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/round_background"
    android:orientation="horizontal"
    android:weightSum="3"
    tools:context="com.example.curved.MainActivity" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background"
        android:gravity="center"
        android:text="Line"
        android:textSize="20sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background_white"
        android:gravity="center"
        android:text="Lyft"
        android:textColor="#ff33b5e5"
        android:textSize="20sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="1dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background"
        android:gravity="center"
        android:text="Plus"
        android:textSize="20sp" />

</LinearLayout>

白色按钮的round_background_white.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle" >

    <!-- you can use any color you want I used here gray color -->
    <solid android:color="#ABABAB" />

    <corners android:radius="50dp" />

</shape>

最终结果

enter image description here

点击事件更改背景和文字颜色,我已用xml显示它。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- you can use any color you want I used here white color -->
    <solid android:color="#FFF" />

    <corners android:radius="50dp" />

</shape>

enter image description here