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

Question

我正在尝试实现相互水平重叠的自定义按钮。单击的按钮会变亮，其余按钮会稍微褪色，并且与所选按钮重叠的边框会隐藏在后面。这是一张图片来阐明我在说什么。

为了做到这一点，我制作了一个水平方向的线性布局，它有子线性布局来包裹每个按钮，但最终奇怪的按钮从父布局中伸出来，尽管我对它们的宽度和高度进行了一些调整。有人可以提示我如何执行此操作吗？

Answer 1

采用 RelativeLayout a将三个按钮水平对齐，中间按钮重叠另外两个。现在将两个按钮放在左右上方，它们与中心按钮重叠。让他们的知名度消失。

现在单击左按钮使左重叠按钮可见等等。

希望对您有所帮助！！！

Answer 2

您的布局文件应如下所示：-

<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.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>

round_background_white.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>

最终结果

点击事件会像这样改变背景和文字颜色，我用 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_white"
        android:gravity="center"
        android:text="Line"
        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="5dp"
        android:layout_marginTop="1dp"
        android:layout_weight="1"
        android:background="@drawable/round_background"
        android:gravity="center"
        android:text="Lyft"
        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>

Answer 3

我通过 RadioButton 做过类似的事情。您可能需要将单选按钮逻辑更改为 button ，以便一次只单击一个。下面是我的代码。
1) activity 内的布局在此处：

<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) Activity 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>

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

How to implement curved custom buttons horizontally in Android?

android

android-custom-view

android-button