今天回家有些晚(应该说是昨天,已过零点),但是为了坚定的落实我的计划,补上昨天的。

本文参考资料:1.《疯狂Android 讲义》第六章:Android应用的资源

                         2. ShapeDrawable的应用


效果:

android dialog 宽度 自定义 android 自定义drawable_自定义

android dialog 宽度 自定义 android 自定义drawable_android_02

android dialog 宽度 自定义 android 自定义drawable_布局_03

分别为系统默认效果(不同的系统版本不同)、自定义1、自定义2


        系统默认的编辑框是矩形的,没有圆角效果,填充为白色完全不透明,当获得焦点时,边框变为橙色。除了可以通过android:background设置填充背景外,其它属性不能直接通过xml配置文件设置。而且不同的系统版本也不相同,我们需要统一风格,就需要自定义样式。市面上多数软件的编辑框都是自定义过的。


        上图是我自定义的编辑框2,边框为圆角矩形,当获得焦点时边框变为清新的绿色。

        编辑框3,背景填充为半透明的红色,获取焦点时文字为亮白色,失去焦点时文字变为灰色。

方法:

        1.通过ShapeDrawable资源定义形状,shape有四种选择:rectangle、oval、line、ring(矩形、椭圆、线、环)需要先定义形状,在通过background将shape附给组件。

ShapeDrawable的几个标签:

         solid(内填充)、stroke(外边框)、padding(内容间距)、corners(圆角半径)、 gradient(渐变)、       size(大小)

        2.通过StateListDrawable资源设置当组建处于不同状态时的不同布局,android:state_XXX表示一个特定的状                态,每个状态有true和false属性。

           先定义selector的item选项,再在组件的合适地方使用。


            android:state_active           

         是否处于激活状态              

          android:state_checkable

          可勾选

          android:state_checked

          已勾选

          android:state_enable

          可用

          android:state_first

          开始

          android:state_focused

          已得到焦点

          android:state_last

          结束

          android:state_middle

          中间

          android:state_pressed

          已被按下

          android:state_selected

          已被选中

   android:state_window_focused

          窗口已得到焦点

代码:

(下载地址: )

1.MainActivity。(不修改)

2.res/layout/activity_main.xml


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg2"
    android:orientation="vertical"
    tools:context="org.wp.myview02_edittext.MainActivity" >

    <EditText
        android:id="@+id/edit1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="编辑文本框1" />

    <EditText
        android:id="@+id/edit2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="3dp"
        
        android:background="@drawable/my_selector1"
        
        android:text="编辑文本框2" />

    <EditText
        android:id="@+id/edit3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="3dp"
        
        android:background="@drawable/my_shape1"
        android:textColor="@drawable/my_selector2" 

        android:text="编辑文本框3" />
</LinearLayout>

3.res/drawable-mdpi/my_shape1

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

    <!-- 设置内填充颜色为半透明的颜色 -->
    <!-- 颜色值为4个参数时,分别表示alpha、red、green、blue -->
    <solid android:color="#60E04343" />

    <!-- 内容间距 -->
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />

    <!-- 圆角半径 -->
    <corners android:radius="4dp" />

</shape>

4.res/res/drawable-mdpi/my_shape4_2

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

    <!-- 设置内填充颜色  -->
    <solid android:color="#FFF" />

    <!-- 设置外边框宽度和颜色 -->
    <stroke
        android:width="1.5dp"
        android:color="#3FD335" />
    
	<!-- 设置内容与边框的间距 -->
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />
	
    <!-- 设置圆角矩形效果圆角半径 -->
    <corners android:radius="4dp" />
</shape>

5.res/drawable-mdpi/my_shape4

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

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

    <stroke
        android:width=".8dp"
        android:color="#C4C3FD" />

    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />
    
    <corners android:radius="3dp"/>
</shape>

6.res/drawable-mdpi/my_selector1

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

    <!-- 当组件为选中状态时,使用my_shape4_2布局 -->
    <item android:state_focused="true" android:drawable="@drawable/my_shape4_2"/>
    
    <!-- 当组件为未选中状态时,使用my_shape4布局 -->
    <item android:state_focused="false" android:drawable="@drawable/my_shape4"/>

</selector>

7.res/drawable-mdpi/my_selector2

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

    <!-- 当组件为选中状态时,使用颜色为白色 -->
    <item android:color="#FFF" android:state_focused="true"/>
    
    <!-- 当组件为选中状态时,使用颜色为灰色 -->
    <item android:color="#C4C4CE" android:state_focused="false"/>

</selector>

结语:

        使用Drawable资源可以制作出不同风格样式的组件,不限于编辑框,可以任意发挥自己的创意,使界面更加有特色,更加美观。


        Android中的资源使用十分有用,官方建议所有资源都通过注册后使用,比如我们在使用android:text="text"时就会有警告,建议现在string.xml中定义,再通过@string/id来使用。其它资源同理,资源的使用很灵活,使用style.xml

等可以统一整体风格,提高编程效率。


        同时,资源也是可以继承的,如


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

    <!-- 定义一个样式,指定字体大小、字体颜色 -->
    <style name="style1">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">#00d</item>
    </style>
    <!-- 定义一个样式,继承前一个颜色 -->
    <style name="style2" parent="@style/style1">
        <item name="android:background">#ee6</item>
        <item name="android:padding">8dp</item>
        <!-- 覆盖父样式指定的属性 -->
        <item name="android:textColor">#000</item>
    </style>

</resources>



继承的关键字为parent,继承的规则与其它语言一直,也遵循同名覆盖原则。