zoukankan      html  css  js  c++  java
  • 通过android XML 创建图形,降低对美工的依赖

    在开发中总会须要自己定义各种View的样式,假设总是依赖美工作图弄出须要的UI样式图片(比方:一个button要选中和默认两张图片),不但时间上会浪费、往往也会有适配问题。

    尽管能够通过.9图来解决一些适配问题。依旧要花不少时间,毕竟美工通常不懂.9图的制作(得自己动手)。所以有时能够通过简单的创建android XML的方式制作须要的View的UI样式(不但快捷,更不会有适配问题)。


    下面XML代码创建了一个4dip圆角带2px边框的样式(start_use_btn_selector.xml)。

    (带有点击、选中、默认三总状态)

    <?xml version="1.0" encoding="utf-8"?

    >
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        
    <item android:state_selected = "true"><!-- 选中状态 -->
            
    <shape android:shape="rectangle"><!-- 图形形状 rectangle为矩形、oval为椭圆、line为线、ring为环形 -->
                
    <corners android:radius="4dip"/><!-- 四周圆角,也能够单独设置某一个角为圆角 如:设置topLeftRadius -->
                
    <solid android:color="#33ffffff"/><!-- 中心填充色 -->
                
    <stroke android:width="2.0px" android:color="#ffffffff"/><!-- 边框线宽度和颜色设置 -->
            
    </shape>
        
    </item>
        
    <item android:state_pressed="true"><!-- 点击状态 -->
            
    <shape android:shape="rectangle">
                
    <corners android:radius="4dip"/>
                
    <solid android:color="#33ffffff"/>
                
    <stroke android:width="2.0px" android:color="#ffffffff"/>
            
    </shape>
        
    </item>
        
    <item><!-- 默认状态 -->
            
    <shape android:shape="rectangle">
                
    <corners android:radius="4dip"/>
                
    <solid android:color="#00ffffff"/>
                
    <stroke android:width="2.0px" android:color="#ffffffff"/>
            
    </shape>
        
    </item>

    </selector>


    在layout中使用
    <Button
        
    android:layout_width="wrap_content"
        
    android:layout_height="wrap_content"
        
    android:background="@drawable/start_use_btn_selector"
        
    android:includeFontPadding="false"
        
    android:paddingBottom="2dip"
        
    android:paddingLeft="28dip"
        
    android:paddingRight="28dip"
        
    android:paddingTop="2dip"
        
    android:text="立即体验"
        
    android:textColor="#FFFFFFFF"
        
    android:textSize="20sp" />

    效果图(背景绿色是总体layout颜色)



  • 相关阅读:
    非vue-cli的花括号闪现问题
    vue中实现图片全屏缩放预览,支持移动端
    vue 图片预览插件
    angular.uppercase()
    angular.toJson()
    angular.module()
    对AngularJs的简单了解
    jQuery的属性、遍历和HTML操作
    JQuery函数
    JQuery的选择器
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/6903228.html
Copyright © 2011-2022 走看看