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

先是布局界面

复制代码
<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>

使用代码

Kotlin 复制代码
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()
    }
}
相关推荐
黄林晴2 小时前
如何判断手机是否是纯血鸿蒙系统
android
火柴就是我2 小时前
flutter 之真手势冲突处理
android·flutter
法的空间2 小时前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
循环不息优化不止2 小时前
深入解析安卓 Handle 机制
android
恋猫de小郭2 小时前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
jctech3 小时前
这才是2025年的插件化!ComboLite 2.0:为Compose开发者带来极致“爽”感
android·开源
用户2018792831673 小时前
为何Handler的postDelayed不适合精准定时任务?
android
叽哥3 小时前
Kotlin学习第 8 课:Kotlin 进阶特性:简化代码与提升效率
android·java·kotlin
Cui晨3 小时前
Android RecyclerView展示List<View> Adapter的数据源使用View
android
氦客3 小时前
Android Doze低电耗休眠模式 与 WorkManager
android·suspend·休眠模式·workmanager·doze·低功耗模式·state_doze