zoukankan      html  css  js  c++  java
  • Android 对控件设置边框样式(边框颜色,圆角)和图片样式(圆角)

    1、设置边框、圆角、背景色案例

    在drawable中 新建一个edge.xml文件

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 这里是设置背景色-->
        <solid android:color="@color/colorGrey" />
        <!-- 这里是设置为四周 也可以单独设置某个位置为圆角-->
        <corners android:topLeftRadius="5dp"
            android:topRightRadius="5dp"
            android:bottomRightRadius="5dp"
            android:bottomLeftRadius="5dp"/>
        <!-- 这里设置边框 -->
        <stroke android:width="1dp" android:color="#000000" />
    </shape>

     Activity页面引用:

     android:background="@drawable/edge"

    如下案例所示:

     <ScrollView
            android:id="@+id/scrollView2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toTopOf="@+id/guideline"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            android:background="@drawable/edge">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
    
                <TextView
                    android:id="@+id/et"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minLines="8"
                    android:text="123456789" />
    
            </LinearLayout>
        </ScrollView>

    说明: solid为填充色 即内部的背景填充色 ,stroke 为边框 可以设置颜色和宽度

    效果如下:

     2、设置边框颜色案例: 

    在drawable中 新建一个button_edge.xml文件

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 边框颜色值 -->
        <item>
            <shape>
                <solid android:color="#3bbaff" />
            </shape>
        </item>
    
        <!--这个是按钮边框设置为四周 并且宽度为1-->
        <item
            android:right="1dp"
            android:left="1dp"
            android:top="1dp"
            android:bottom="1dp">
            <shape>
                <!--这个是背景颜色-->
                <solid android:color="#ffffff" />
                <!--这个是按钮中的字体与按钮内的四周边距-->
                <padding android:bottom="5dp"
                    android:left="5dp"
                    android:right="5dp"
                    android:top="5dp" />
            </shape>
        </item>
    </layer-list>

    使用:

       android:background="@drawable/button_edge" 

    3、设置圆角按钮案例:(其实按钮还是方形的,只是将外围部分隐藏了而已) 
    在drawable中: 新建一个 button_circle_shape.xml文件

    <?xml version="1.0" encoding="UTF-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <!-- 填充的颜色 -->
        <solid android:color="#FFFFFF" />
        <!-- android:radius 弧形的半径 -->
        <!-- 设置按钮的四个角为弧形 -->
        <corners 
        android:radius="5dip" />  
        <!--也可单独设置-->
        <!-- <corners -->
       <!-- android:topLeftRadius="10dp"-->
       <!-- android:topRightRadius="10dp"-->
       <!-- android:bottomRightRadius="10dp"-->
      <!--  android:bottomLeftRadius="10dp"-->
     <!--   />  -->
            **设置文字padding**
        <!-- padding:Button里面的文字与Button边界的间隔 -->
        <padding
            android:left="10dp"
            android:top="10dp"
            android:right="10dp"
            android:bottom="10dp"
            />
    </shape>

    使用:

       android:background="@drawable/shape" 

    4、设置圆角图片案例

    1 简单的设置:(不能添加自定义图片 只能设置颜色和字体) 
    在drawable中 创建一个image_circle.xml图片

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="#FFFFFF" />
        <corners android:topLeftRadius="10dp"
            android:topRightRadius="10dp"
            android:bottomRightRadius="10dp"
            android:bottomLeftRadius="10dp"/>
    </shape>

    使用:

       android:background="@drawable/image_circle" 

    5、真实案例:

     

     edge.xml

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 边框颜色值 -->
        <item>
            <shape>
                <solid android:color="#3bbaff" />
            </shape>
        </item>
    
        <!--这个是按钮边框设置为四周 并且宽度为1-->
        <item
            android:right="1dp"
            android:left="1dp"
            android:top="1dp"
            android:bottom="1dp">
            <shape>
                <!--这个是背景颜色-->
                <solid android:color="#ffffff" />
                <!--这个是按钮中的字体与按钮内的四周边距-->
                <padding android:bottom="5dp"
                    android:left="5dp"
                    android:right="5dp"
                    android:top="5dp" />
            </shape>
        </item>
    </layer-list>

    布局文件 LeftFragment.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".LeftFragment">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:orientation="vertical">
    
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:orientation="horizontal"
                android:padding="10dp"
                >
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@mipmap/user" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="手工登录"
                    android:textSize="20sp" />
    
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:background="@drawable/edge"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="20dp"
                    android:text="账号"
                    android:textSize="15sp"/>
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="请输入工厂管理系统账号"
                    android:background="@null"
                    android:paddingLeft="10dp"
                    android:textSize="15sp"/>
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:background="@drawable/edge"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingLeft="20dp"
                    android:textSize="15sp"
                    android:text="密码" />
                <EditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="请输入工厂管理系统登录密码"
                    android:background="@null"
                    android:paddingLeft="10dp"
                    android:textSize="15sp"/>
            </LinearLayout>
    
            <CheckBox
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:text="记住密码" />
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:text="登录" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="登录出现问题?" />
        </LinearLayout>
    </FrameLayout>
  • 相关阅读:
    C# 观察者模式(Observer)
    CXGRID设置Selstart和SelLength
    Delphi 中相对路径与绝对路径、系统环境变量等相关函数说明
    用Delphi创建一个空的Access数据库
    非COM环境下的接口编程
    VCLZIP样例
    delphi 文件CRC32校验
    delphi中无类型文件读写
    Delphi调用MSSQL存储过程返回的多个数据集
    CXGRID,定位并高亮
  • 原文地址:https://www.cnblogs.com/zoro-zero/p/12621050.html
Copyright © 2011-2022 走看看