zoukankan      html  css  js  c++  java
  • 【android开发笔记】为Button的背景图片添加边框式样式效果

    现在做的项目遇到一个问题,设计给过来的图片只有一种状态,但是实现的需求是要求有两个状态,另一种选状态为图片背景加边框。如图:

    刚开使用使用ImageView ,ImageViewButton 效果不是很明显;

    后来发现 layer-list 能很好的实现这个效果,先分别建 正常模式与选中模式的xml文件:

    正常模式:btn_angle_normal_bg.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <solid android:color="@color/transparent_half" />
        <stroke
            android:width="@dimen/dimen_6px"
            android:color="@color/transparent_half" />
        <padding
            android:bottom="0.0dip"
            android:left="0.0dip"
            android:right="0.0dip"
            android:top="0.0dip" />
    </shape>
    选中模式:btn_angle_bg.xml
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <solid android:color="@color/transparent_half" />
        <stroke
            android:width="@dimen/dimen_6px"
            android:color="@color/gold" />
        <padding
            android:bottom="0.0dip"
            android:left="0.0dip"
            android:right="0.0dip"
            android:top="0.0dip" />
    </shape>
    Selector :common_recangle_bg.xml
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/btn_angle_bg" android:state_pressed="true" />
        <item android:drawable="@drawable/btn_angle_bg" android:state_selected="true" />
        <item android:drawable="@drawable/btn_angle_normal_bg" android:state_enabled="true" />
    </selector>
    Layer-list文件:zhuang_btn.xml
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:drawable="@drawable/common_recangle_bg" /> //这里是normal与press的xml文件
    <item
        android:bottom="@dimen/dimen_4px"
        android:drawable="@mipmap/bai_table_zhuang_up" //这里是背景图片
        android:left="@dimen/dimen_4px"
        android:right="@dimen/dimen_4px"
        android:top="@dimen/dimen_4px" />
    </layer-list>

    然后在布局里的内部控件使用:

     <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/zhuang_btn"
                android:gravity="bottom|center"
                android:text="4545
    "
                android:textSize="@dimen/dimen_tv_20" />

    基本这样可以实现了这个效果!

  • 相关阅读:
    C#快速开发平台(C/S架构+Winform+DevExpress+FastReport)
    C# Winform C/S系统快速开发框架企业版V4.5已发布,欢迎下载试用
    CSS3 Animation
    CSS3 Transition
    CSS3 Transform
    jQuery 屏蔽鼠标快速经过
    JQ插件jquery.fn.extend与jquery.extend
    font-size单位换算
    js获取客户端操作系统
    js数组的操作
  • 原文地址:https://www.cnblogs.com/tefcricul/p/6420811.html
Copyright © 2011-2022 走看看