如何用两个button等分屏幕宽度?

简介: 如何用两个button等分屏幕宽度?

如何用两个button等分屏幕宽度?

问题引入

现有一个小问题:如何使用两个按钮,然后将屏幕宽度评分?如图:
实现最终效果图
再进一步细节:如果按钮的宽度相等呢?不相等呢?

看看人家的实现
Android的实现

1.按钮宽度相等的实现
这里直接上布局文件(.xml)的代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注册"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="忘记密码"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible"/>
</LinearLayout>

效果如下:
按钮等宽平分
Android里面使用LinearLayout布局,然后直接使用了三个view,然偶设置其不可见(visibility="invisible"),但是占用当前的位置。最后设置每个layout里面的控件的weight为1,这样就保证了用两个按钮将屏幕等分。
2.按钮宽度不相等的实现:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注册"
        android:minWidth="0dp"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="忘记密码"
        android:minWidth="0dp"
        />
    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible"/>
</LinearLayout>

效果如下:
android unequal
这里的代码和上面的大同小异,唯一的区别就是button设置了minWidth。

CSS+HTML的实现:
    <style type="text/css">
        .container {
            display: -webkit-box;
        }
        .container .tempDiv {
            -webkit-box-flex:1;
        }
    </style>

        <section class="container">
            <div class="tempDiv"></div>
            <button class="btn_login">登录</button>
            <div class="tempDiv"></div>
            <button class="btn_forget">忘记密码</button>
            <div class="tempDiv"></div>
        </section>

运行效果如下:
html 实现
html这边比较简单,只是把关键代码列出来了。直接使用-webkit-box来设置,然后将每个tempDiv的-webkit-box-flex都设置为1即可。
因为比较简单,所以也没有分按钮width是否相等两种情况。

iOS中的实现

iOS实现如果单独做计算也是可以的。可以先将按钮的宽度相加,然后(屏幕宽度-按钮相加宽度)/3 得到间隙的大小,然后再将按钮按照计算结果进行计算放置即可。这里需要固定按钮的宽度,才能实现。这里有个精度损失问题,因为在Int和Float之间转换有损失。关键代码如下:

         let interval = (screenWidth - CGFloat(forgetButtonWidth)  - CGFloat(loginButtonWidth) )/3
        
        loginButton.setTitle("登录", for: UIControlState.normal)
        loginButton.setTitleColor(UIColor.white, for: UIControlState.normal)
        loginButton.backgroundColor = UIColor.brown
        loginButton.frame = CGRect.init(x: Int(interval), y: 100, width: loginButtonWidth, height: 40)
        
        forgetPwdButton.setTitle("忘记密码", for: UIControlState.normal)
        forgetPwdButton.setTitleColor(UIColor.white, for: UIControlState.normal)
        forgetPwdButton.backgroundColor = UIColor.darkGray
        forgetPwdButton.frame = CGRect.init(x: Int(interval)*2+loginButtonWidth, y: 100, width: forgetButtonWidth, height: 40)
      
        self.view.addSubview(loginButton)
        
        self.view.addSubview(forgetPwdButton)

严格来说,这里并没有将其平分为三份,不过如果不是太严谨的话可以当做平分。
上面的这种通过计算的方式适合于按钮等宽或者不等宽的情况进行平分。接下来看看另一种方式:Stack view分割。
先简单说一下Stack view。它在IOS中的体现就是UIStackView这个类,是iOS9新增的一个布局技术,可以用来进行多个控件的快速布局。具体的介绍就不多说了,不了解的可以参考这里
通过StackView,可以快速地实现分割,关键代码如下:

          loginButton.setTitle("登录", for: UIControlState.normal)
    
            loginButton.setTitleColor(UIColor.white, for: UIControlState.normal)
            loginButton.backgroundColor = UIColor.brown
    
            forgetPwdButton.setTitle("忘记密码", for: UIControlState.normal)
    
            forgetPwdButton.setTitleColor(UIColor.white, for: UIControlState.normal)
            forgetPwdButton.backgroundColor = UIColor.darkGray
    
    
            tempViewOne.backgroundColor = UIColor.clear
    
            tempViewTwo.backgroundColor = UIColor.clear
            tempViewThree.backgroundColor = UIColor.clear
    
            stackView.addArrangedSubview(tempViewOne)
            stackView.addArrangedSubview(forgetPwdButton)
            stackView.addArrangedSubview(tempViewTwo)
            stackView.addArrangedSubview(loginButton)
            stackView.addArrangedSubview(tempViewThree)
    //
            //set vertical or horizontal
            stackView.axis = UILayoutConstraintAxis.horizontal
        
            stackView.distribution = UIStackViewDistribution.fillEqually
            
            self.view.addSubview(stackView)

这里是用了三个临时的占位view,然后将他们和两个按钮都放到stackView里面,设置stackView的distribution为fillEqually。这样就实现了等分效果,这里需要注意:我们只需要对stack进行约束,然后其他的控件布局会由stack view自动管理。实现效果如下:
stack view handle
这样就实现了两个button把界面均分。

这里面设置的distribution是 fillEqually,也就是把stackview里面的控件都充满stackview,并且stackview的arranged view都是等宽的。

Question

1、还有其他的方式实现么?

相关文章
pip镜像源大全及配置
在中国使用pip时,可以配置国内镜像源来提高安装速度和稳定性。以下是一些常见的国内镜像源:
17874 0
|
JSON IDE 机器人
超简单:mac导出微信聊天记录(附上粉丝群全部聊天记录)
今天再给大家讲解一下如何直导出mac版本微信的聊天记录,当然如果你没有mac,那可以直接关闭这篇文章了。
10130 0
超简单:mac导出微信聊天记录(附上粉丝群全部聊天记录)
|
网络协议 Java 容器
Java实现聊天室
Java实现聊天室
331 0
|
前端开发
自定义 Hook 编写指南
【10月更文挑战第15天】本文介绍了 React 中的 Hooks 和自定义 Hook 的基本概念、编写方法及常见问题。通过具体代码示例,详细讲解了如何在函数组件中使用状态和其他 React 特性,并分享了避免常见错误的技巧。自定义 Hook 可以帮助你将组件中的逻辑提取出来,使其更加可重用和可维护。
737 68
|
Linux 数据安全/隐私保护 Windows
更换(Pypi)pip源到国内镜像
pip国内的一些镜像 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.
247253 2
|
安全 Android开发 Kotlin
Android经典面试题之Kotlin延迟初始化的by lazy和lateinit有什么区别?
**Kotlin中的`by lazy`和`lateinit`都是延迟初始化技术。`by lazy`用于只读属性,线程安全,首次访问时初始化;`lateinit`用于可变属性,需手动初始化,非线程安全。`by lazy`支持线程安全模式选择,而`lateinit`适用于构造函数后初始化。选择依赖于属性特性和使用场景。**
431 5
Android经典面试题之Kotlin延迟初始化的by lazy和lateinit有什么区别?
|
安全 数据安全/隐私保护 UED
优化用户体验:前后端分离架构下Python WebSocket实时通信的性能考量
在当今互联网技术的迅猛发展中,前后端分离架构已然成为主流趋势,它不仅提升了开发效率,也优化了用户体验。然而,在这种架构模式下,如何实现高效的实时通信,特别是利用WebSocket协议,成为了提升用户体验的关键。本文将探讨在前后端分离架构中,使用Python进行WebSocket实时通信时的性能考量,以及与传统轮询方式的比较。
243 2
|
编解码 算法 数据安全/隐私保护
CTF图像隐写——“双图”和“图像和像素值转换”
CTF图像隐写——“双图”和“图像和像素值转换”
731 2
|
SQL 安全 关系型数据库
【100天精通python】Day38:GUI界面编程_PyQt 从入门到实战(中)_数据库操作与多线程编程
【100天精通python】Day38:GUI界面编程_PyQt 从入门到实战(中)_数据库操作与多线程编程
481 0
|
运维 Cloud Native 云计算
云计算:重塑数字时代的基石与未来展望
云计算作为数字时代的基石,正以前所未有的速度推动着全球科技的进步和产业的升级。从基础概念到核心技术再到应用场景和未来趋势,云计算的每一步发展都充满了无限可能。我们相信在未来的日子里随着技术的不断进步和应用的不断深入云计算将会为我们带来更加便捷、高效、智能的生活体验和工作方式。让我们共同期待并参与到这场伟大的变革中来共同创造更加美好的未来!
311 0