自定义 按钮间,按钮边框滑动。

先是布局界面

<RelativeLayout
                android:id="@+id/tab_button_rel"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/toolbar"
                >

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/btnOrderList"
                    android:text="订单列表"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="2dp"
                    android:background="@drawable/tab_button_background"
                    />

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/btnChargingOrderList"
                    android:text="充电宝列表"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:layout_marginTop="2dp"
                    android:background="@drawable/tab_button_background"
                    />

                <androidx.appcompat.widget.AppCompatButton
                    android:id="@+id/btnExceptionOrderList"
                    android:text="异常列表"
                    android:layout_width="wrap_content"
                    android:layout_height="50dp"
                    android:layout_alignParentRight="true"
                    android:layout_marginEnd="10dp"
                    android:layout_marginTop="2dp"
                    android:background="@drawable/tab_button_background"
                    />

                <View
                    android:id="@+id/border"
                    android:layout_width="1dp"
                    android:layout_height="50dp"
                    android:background="@drawable/border_button_background" />
            </RelativeLayout>

然后是几个样式文件。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_red_dark" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_blue_dark" />
        </shape>
    </item>
</selector>

另一个border_button_background

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Transparent middle part -->
    <item android:drawable="@android:color/transparent" />

    <!-- Colored border -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_blue_dark" />
        </shape>
    </item>

</layer-list>

使用代码

class YourFragment : Fragment() {

    private var selectedButton: Button? = null

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_your_layout, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val buttons = listOf(btnOrderList, btnChargingOrderList, btnExceptionOrderList)
        val border = view.findViewById<View>(R.id.border)

        buttons.forEachIndexed { index, button ->
            button.setOnClickListener {
                selectButton(button)
                animateBorder(button, border)
            }
        }

        // Set initial width of the border to match the first button
        val firstButton = buttons.first()
        border.layoutParams.width = firstButton.width
        border.requestLayout()
    }

    private fun selectButton(button: Button) {
        selectedButton?.isSelected = false
        button.isSelected = true
        selectedButton = button
    }

    private fun animateBorder(selectedButton: Button, border: View) {
        val targetX = selectedButton.x
        val targetWidth = selectedButton.width

        border.animate()
            .x(targetX)
            .scaleX(targetWidth / border.width.toFloat())
            .setDuration(300)
            .start()
    }
}

相关推荐

  1. 定义 按钮按钮边框滑动

    2023-12-07 09:02:03       62 阅读
  2. WPF 定义按钮类实现

    2023-12-07 09:02:03       41 阅读
  3. uniapp----button按钮去除边框

    2023-12-07 09:02:03       64 阅读
  4. vue定义指令配置小程序按钮权限

    2023-12-07 09:02:03       62 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-07 09:02:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-07 09:02:03       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-07 09:02:03       87 阅读
  4. Python语言-面向对象

    2023-12-07 09:02:03       96 阅读

热门阅读

  1. Android okhttp3.0配置https信任所有证书

    2023-12-07 09:02:03       58 阅读
  2. 「X」Embedding in NLP|初识自然语言处理(NLP)

    2023-12-07 09:02:03       53 阅读
  3. mongodb 日志详情

    2023-12-07 09:02:03       57 阅读
  4. 自然语言处理常用方法和评价指标

    2023-12-07 09:02:03       60 阅读
  5. 主流开源大语言模型的微调方法

    2023-12-07 09:02:03       53 阅读
  6. MongoDB归并连续号段-(待验证)

    2023-12-07 09:02:03       53 阅读
  7. 讲解机器学习中的 K-均值聚类算法及其优缺点。

    2023-12-07 09:02:03       58 阅读
  8. OpenFeign远程调用实例

    2023-12-07 09:02:03       58 阅读
  9. vue3+ts自定义插件

    2023-12-07 09:02:03       54 阅读
  10. Nginx实现(缓冲区)

    2023-12-07 09:02:03       58 阅读
  11. go - 计算CIDR的主机数量

    2023-12-07 09:02:03       61 阅读
  12. RefCell 数据类型

    2023-12-07 09:02:03       51 阅读