Android - 按钮的边框

【问题标题】：Android - border for buttonAndroid - 按钮的边框
【发布时间】：2011-12-03 04:12:09
【问题描述】：

如何为按钮添加边框？不使用图像是否可以做到这一点？

【问题讨论】：

标签： android button border android-button


【解决方案1】：

第 1 步：创建名为 my_button_bg.xml 的文件

第 2 步：将此文件放在 res/drawables.xml 中

第 3 步：插入以下代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient android:startColor="#FFFFFF" 
    android:endColor="#00FF00"
    android:angle="270" />
  <corners android:radius="3dp" />
  <stroke android:width="5px" android:color="#000000" />
</shape>

第 4 步：在需要的地方使用代码“android:background="@drawable/my_button_bg”，例如：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your Text"
    android:background="@drawable/my_button_bg"
    />

【讨论】：

  • thanks.+1 for this.将它作为xml文件保存到drawable文件夹中。我们如何使用它？
  • @AndroidPower 你可以将它与 R.drawable.FILE_NAME 一起使用
  • 此代码在哪里，在按钮标记的 .axml 代码中？它是否在 styles.xml 类型文件中？
  • 我只使用了笔触（并将其设为白色）用白色勾勒出一个 Button。在 4.4 中效果很好，但在 4.0.3 中按钮变黑 - 有什么想法吗？
  • @Kibi 抱歉有人编辑了我的答案并给了你不正确的建议。我已经更改了它，但我很震惊有人可以编辑已接受的答案并更改有用性。
【解决方案2】：

• Android Official Solution

由于引入了Android Design Support v28，使用MaterialButton 创建带边框的按钮很容易。此类为构造函数中的按钮提供更新的 Material 样式。使用app:strokeColor 和app:strokeWidth，您可以创建自定义边框，如下所示：


1.当你使用androidx:

build.gradle

dependencies {
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.google.android.material:material:1.0.0'
}

• 边框按钮：

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

• 未填充的边框按钮：

<com.google.android.material.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNFILLED MATERIAL BUTTON"
    android:textColor="@color/green"
    android:textSize="15sp"
    app:backgroundTint="@android:color/transparent"
    app:cornerRadius="8dp"
    app:rippleColor="#33AAAAAA"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />


2。当你使用appcompat:

build.gradle

dependencies {
    implementation 'com.android.support:design:28.0.0'
}

style.xml

确保您的应用程序主题继承自 Theme.MaterialComponents 而不是 Theme.AppCompat。

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
</style>

• 边框按钮：

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="15sp"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

• 未填充的边框按钮：

<android.support.design.button.MaterialButton
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="UNFILLED MATERIAL BUTTON"
    android:textColor="@color/green"
    android:textSize="15sp"
    app:backgroundTint="@android:color/transparent"
    app:cornerRadius="8dp"
    app:rippleColor="#33AAAAAA"
    app:strokeColor="@color/green"
    app:strokeWidth="2dp" />

视觉效果

【讨论】：

  • 我看到您在按钮 XML 中声明了 textColor 和 textSize。如果有人已经为 textColor 和 textSize 定义了样式，现在他们想添加 style="@style/Widget.AppCompat.Button.Borderless"，您有什么建议？
  • 我已经弄明白了，见developer.android.com/guide/topics/ui/look-and-feel/…
  • 如您所说，可以定义继承自无边框样式的样式，然后根据基本样式添加首选属性。
  • 也许我错了，但对我来说，在 • 未填充边框按钮中，我不得不将 app:backgroundTint="@color/transparent" 更改为 app:backgroundTint="@android:color/transparent "
  • 使用 为我工作
【解决方案3】：

在您的可绘制文件夹中创建一个button_border.xml 文件。

res/drawable/button_border.xml

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

    <solid android:color="#FFDA8200" />

    <stroke
        android:width="3dp"
        android:color="#FFFF4917" />

</shape>

并将按钮添加到您的 XML 活动布局并设置背景android:background="@drawable/button_border"。

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_border"
    android:text="Button Border" />

【讨论】：

    【解决方案4】：

    创建drawable/button_green.xml：

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <gradient
    android:startColor="#003000"
    android:centerColor="#006000"
    android:endColor="#003000"
    android:angle="270" />
  <corners android:radius="5dp" />
  <stroke android:width="2px" android:color="#007000" />
</shape>

    并将其指出为@drawable/button_green:

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@drawable/button_green"
        android:text="Button" />

    【讨论】：

      【解决方案5】：

      请在此处查看有关创建可绘制形状的信息 http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

      完成此操作后，在您的按钮集的 XML 中 android:background="@drawable/your_button_border"

      【讨论】：

        【解决方案6】：

        如果您的按钮不需要透明背景，则可以使用框架布局创建边框错觉。只需调整 FrameLayout 的“padding”属性即可改变边框的粗细。

        <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="1sp"
        android:background="#000000">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your text goes here"
            android:background="@color/white"
            android:textColor="@color/black"
            android:padding="10sp"
            />
</FrameLayout>

        我不确定形状 xml 文件是否具有可动态编辑的边框颜色。但我知道，通过这个解决方案，您可以通过设置 FrameLayout 背景来动态更改边框的颜色。

        【讨论】：

          【解决方案7】：

          在您的 XML 布局中：

          <Button
    android:id="@+id/cancelskill"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="25dp"
    android:layout_weight="1"
    android:background="@drawable/button_border"
    android:padding="10dp"
    android:text="Cancel"
    android:textAllCaps="false"
    android:textColor="#ffffff"
    android:textSize="20dp" />

          在drawable文件夹中，为按钮的边框样式创建一个文件：

          <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <stroke
        android:width="1dp"
        android:color="#f43f10" />
</shape>

          在你的活动中：

              GradientDrawable gd1 = new GradientDrawable();
    gd1.setColor(0xFFF43F10); // Changes this drawbale to use a single color instead of a gradient
    gd1.setCornerRadius(5);
    gd1.setStroke(1, 0xFFF43F10);

    cancelskill.setBackgroundDrawable(gd1);

    cancelskill.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            cancelskill.setBackgroundColor(Color.parseColor("#ffffff"));
            cancelskill.setTextColor(Color.parseColor("#f43f10"));

            GradientDrawable gd = new GradientDrawable();

            gd.setColor(0xFFFFFFFF); // Changes this drawbale to use a single color instead of a gradient
            gd.setCornerRadius(5);
            gd.setStroke(1, 0xFFF43F10);
            cancelskill.setBackgroundDrawable(gd);

            finish();
        }
    });

          【讨论】：

            【解决方案8】：

            我知道它晚了一年，但你也可以创建一个 9 路径图像 android SDK附带了一个工具，可以帮助创建这样的图像 见此链接：http://developer.android.com/tools/help/draw9patch.html

            PS：图片也可以无限缩放

            【讨论】：

              【解决方案9】： 
              <com.google.android.material.button.MaterialButton
                android:id="@+id/addBtn"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="150dp"
                android:layout_height="80dp"
                android:gravity="center"
                android:backgroundTint="@android:color/transparent"
                android:textColor="@color/blue"
                app:cornerRadius="8dp"
                app:strokeColor="@color/blue"
                app:strokeWidth="2dp"/>

              【讨论】：

                【解决方案10】：

                在你的drawable文件夹中创建一个名为gradient_btn的drawable文件 并粘贴下面的代码

                <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#7BF8C6"
    android:centerColor="#9DECAD"
    android:endColor="#7BF8C6"
    android:angle="270" />
<corners
    android:topLeftRadius="15dp"
    android:topRightRadius="15dp"
    android:bottomLeftRadius="15dp"
    android:bottomRightRadius="15dp"
    />
<stroke android:width="3px" android:color="#000000" />

</shape>

                然后在 xml 中的 Button 代码中调用您创建的文件：

                    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:background="@drawable/gradient_btn"/>

                输出 - 将是一个带有渐变和边框的按钮。

                注意 - 您可以根据需要更改按钮的 Hexa 十进制代码，也可以更改笔划宽度。

                【讨论】：

                  【解决方案11】：

                  使用 Material 组件库，只需使用带有 Widget.MaterialComponents.Button.OutlinedButton 样式的 MaterialButton。

                  <com.google.android.material.button.MaterialButton
   ....
   style="?attr/materialButtonOutlinedStyle"
   app:strokeColor="@color/colorPrimary"/>

                  使用 Jetpack compose 使用 OutlinedButton:

                  OutlinedButton(
    onClick = { },
    border = BorderStroke(1.dp, Color.Blue),
) {
    Text(text = "BORDER")
}

                  【讨论】：

                    猜你喜欢
                    • 2023-04-09
                    • 1970-01-01
                    • 1970-01-01
                    • 2016-02-24
                    • 2016-10-20
                    • 1970-01-01
                    • 2013-10-01
                    • 1970-01-01
                    • 2013-05-31
                    相关资源
                    最近更新 更多
                    热门标签
                    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode