现在的位置: 首页 > 综合 > 正文

android之自定义组件一

2018年06月09日 ⁄ 综合 ⁄ 共 2034字 ⁄ 字号 评论关闭

自定义组件实现如下效果:

 

 

1)在res文件下新建一个drawable文件夹用于存放自定义组件的属性。

2)从效果图分析可以知道,此种效果是由两个EditText和一个View视图组成然后再由一个LinearLayout布局包围显示,因此需要定义一个用来定义EditTextedittext.xml和一个用来包围EditText的布局文件login_linearlayout.xml文件。

3)新建一个edittext.xml其代码如下:

<!-- edittext的样式:无边框,背景色为白 -->

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 渐变 --> 
<gradient
android:angle="0"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<!-- 设边框 -->
<stroke
android:width="0.5dp"/>
<!-- 设内边距 -->
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>

4)新建一个login_linearlayout.xml其代码如下:

<!-- edittext的样式:无边框,背景色为白 -->

 

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

   <!-- 渐变 --> 

    <gradient

        android:angle="0"

        android:endColor="#FFFFFF"

        android:startColor="#FFFFFF" />

    <!-- 设边框 -->

    <stroke

        android:width="0.5dp"/>

    <!-- 设内边距 -->

    <padding

        android:bottom="10dp"

        android:left="10dp"

        android:right="10dp"

        android:top="10dp" />

</shape>

5)最后在要显示此效果的布局文件中将这两个文件以背景图片的形式引用进来,此时activity_main.xml的代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:layout_gravity="center_horizontal"

    android:layout_marginLeft="10dp"

    android:layout_marginRight="10dp"

    android:layout_marginTop="20dip"

    android:background="@drawable/login_linearlayout"

    android:orientation="vertical" >

 

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/edittext" 

        android:hint="用户名"/>

 

    <View

        android:layout_width="match_parent"

        android:layout_height="1dp"

        android:background="#999999" />

 

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/edittext" 

        android:hint="密码"/>

 

</LinearLayout>

此时,上图的效果就完全实现了。

 

抱歉!评论已关闭.