用java代码自定义控件_android - 自定义(组合)控件 + 自定义控件外观

1. reference:参考某一资源ID。

(1)属性定义:

(2)属性使用:

android:layout_width = "42dip"

android:layout_height = "42dip"

android:background = "@drawable/图片ID"

/>

2. color:颜色值。

(1)属性定义:

(2)属性使用:

android:layout_width = "42dip"

android:layout_height = "42dip"

android:textColor = "#00FF00"

/>

3. boolean:布尔值。

(1)属性定义:

(2)属性使用:

android:layout_width = "42dip"

android:layout_height = "42dip"

android:focusable = "true"

/>

4. dimension:尺寸值。

(1)属性定义:

(2)属性使用:

android:layout_width = "42dip"

android:layout_height = "42dip"

/>

5. float:浮点值。

(1)属性定义:

(2)属性使用:

android:fromAlpha = "1.0"

android:toAlpha = "0.7"

/>

6. integer:整型值。

(1)属性定义:

(2)属性使用:

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

android:drawable = "@drawable/图片ID"

android:pivotX = "50%"

android:pivotY = "50%"

android:framesCount = "12"

android:frameDuration = "100"

/>

7. string:字符串。

(1)属性定义:

(2)属性使用:

android:layout_width = "fill_parent"

android:layout_height = "fill_parent"

android:apiKey = "0jOkQ80oD1JL9C6HAja99uGXCRiS2CGjKO_bc_g"

/>

8. fraction:百分数。

(1)属性定义:

(2)属性使用:

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

android:interpolator = "@anim/动画ID"

android:fromDegrees = "0"

android:toDegrees = "360"

android:pivotX = "200%"

android:pivotY = "300%"

android:duration = "5000"

android:repeatMode = "restart"

android:repeatCount = "infinite"

/>

9. enum:枚举值。

(1)属性定义:

(2)属性使用:

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

android:orientation = "vertical"

android:layout_width = "fill_parent"

android:layout_height = "fill_parent"

>

10. flag:位或运算。

(1)属性定义:

(2)属性使用:

android:name = ".StyleAndThemeActivity"

android:label = "@string/app_name"

android:windowSoftInputMode = "stateUnspecified | stateUnchanged | stateHidden">

注意:

属性定义时可以指定多种类型值。

(1)属性定义:

(2)属性使用:

android:layout_width = "42dip"

android:layout_height = "42dip"

android:background = "@drawable/图片ID|#00FF00"

/>

自定义组合控件:

第一个实现一个带图片和文字的按钮,如图所示:

6e25d26ce0d22208571bdd1049a6c42e.png

整个过程可以分四步走。第一步,定义一个layout,实现按钮内部的布局。代码如下:

48304ba5e6f9fe08f3fa1abda7d326ab.png

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/iv"

android:src="@drawable/confirm"

android:paddingTop="5dip"

android:paddingBottom="5dip"

android:paddingLeft="40dip"

android:layout_gravity="center_vertical"

/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="确定"

android:textColor="#000000"

android:id="@+id/tv"

android:layout_marginLeft="8dip"

android:layout_gravity="center_vertical"

/>

48304ba5e6f9fe08f3fa1abda7d326ab.png

这个xml实现一个左图右字的布局,接下来写一个类继承LinearLayout,导入刚刚的布局,并且设置需要的方法,从而使的能在代码中控制这个自定义控件内容的显示。代码如下:

48304ba5e6f9fe08f3fa1abda7d326ab.png

package com.notice.ib;

import android.content.Context;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

public class ImageBt extends LinearLayout {

private ImageView iv;

private TextView tv;

public ImageBt(Context context) {

this(context, null);

}

public ImageBt(Context context, AttributeSet attrs) {

super(context, attrs);

// 导入布局

LayoutInflater.from(context).inflate(R.layout.custombt, this, true);

iv = (ImageView) findViewById(R.id.iv);

tv = (TextView) findViewById(R.id.tv);

}

/**

* 设置图片资源

*/

public void setImageResource(int resId) {

iv.setImageResource(resId);

}

/**

* 设置显示的文字

*/

public void setTextViewText(String text) {

tv.setText(text);

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

第三步,在需要使用这个自定义控件的layout中加入这控件,只需要在xml中加入即可。方法如下:

48304ba5e6f9fe08f3fa1abda7d326ab.png

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

>

android:id="@+id/bt_confirm"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_alignParentBottom="true"

android:background="@drawable/btbg"

android:clickable="true"

android:focusable="true"

/>

android:id="@+id/bt_cancel"

android:layout_toRightOf="@id/bt_confirm"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_alignParentBottom="true"

android:background="@drawable/btbg"

android:clickable="true"

android:focusable="true"

/>

48304ba5e6f9fe08f3fa1abda7d326ab.png

注意的是,控件标签使用完整的类名即可。为了给按钮一个点击效果,你需要给他一个selector背景,这里就不说了。

最后一步,即在activity中设置该控件的内容。当然,在xml中也可以设置,但是只能设置一个,当我们需要两次使用这样的控件,并且显示内容 不同时就不行了。在activity中设置也非常简单,我们在ImageBt这个类中已经写好了相应的方法,简单调用即可。代码如下:

48304ba5e6f9fe08f3fa1abda7d326ab.png

public class MainActivity extends Activity {

private ImageBt ib1;

private ImageBt ib2;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.login);

ib1 = (ImageBt) findViewById(R.id.bt_confirm);

ib2 = (ImageBt) findViewById(R.id.bt_cancel);

ib1.setTextViewText("确定");

ib1.setImageResource(R.drawable.confirm);

ib2.setTextViewText("取消");

ib2.setImageResource(R.drawable.cancel);

ib1.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

//在这里可以实现点击事件

}

});

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

这样,一个带文字和图片的组合按钮控件就完成了。这样梳理一下,使用还是非常简单的。组合控件能做的事还非常多,主要是在类似上例中的ImageBt类中写好要使用的方法即可。

再来看一个组合控件,带删除按钮的EidtText。即在用户输入后,会出现删除按钮,点击即可取消用户输入。

定义方法和上例一样。首先写一个自定义控件的布局:

48304ba5e6f9fe08f3fa1abda7d326ab.png

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

android:id="@+id/et"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:singleLine="true"

/>

android:id="@+id/ib"

android:visibility="gone"

android:src="@drawable/menu_delete"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#00000000"

android:layout_alignRight="@+id/et" />

48304ba5e6f9fe08f3fa1abda7d326ab.png

实现输入框右侧带按钮效果,注意将按钮隐藏。然后写一个EditCancel类,实现删除用户输入功能。这里用到了TextWatch这个接口,监听输入框中的文字变化。使用也很简单,实现他的三个方法即可。看代码:

48304ba5e6f9fe08f3fa1abda7d326ab.png

package com.notice.ce;

import android.content.Context;

import android.text.Editable;

import android.text.TextWatcher;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.EditText;

import android.widget.ImageButton;

import android.widget.LinearLayout;

public class EditCancel extends LinearLayout implements EdtInterface {

ImageButton ib;

EditText et;

public EditCancel(Context context) {

super(context);

}

public EditCancel(Context context, AttributeSet attrs) {

super(context, attrs);

LayoutInflater.from(context).inflate(R.layout.custom_editview, this, true);

init();

}

private void init() {

ib = (ImageButton) findViewById(R.id.ib);

et = (EditText) findViewById(R.id.et);

et.addTextChangedListener(tw);// 为输入框绑定一个监听文字变化的监听器

// 添加按钮点击事件

ib.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

hideBtn();// 隐藏按钮

et.setText("");// 设置输入框内容为空

}

});

}

// 当输入框状态改变时,会调用相应的方法

TextWatcher tw = new TextWatcher() {

@Override

public void onTextChanged(CharSequence s, int start, int before, int count) {

// TODO Auto-generated method stub

}

@Override

public void beforeTextChanged(CharSequence s, int start, int count, int after) {

// TODO Auto-generated method stub

}

// 在文字改变后调用

@Override

public void afterTextChanged(Editable s) {

if (s.length() == 0) {

hideBtn();// 隐藏按钮

} else {

showBtn();// 显示按钮

}

}

};

@Override

public void hideBtn() {

// 设置按钮不可见

if (ib.isShown()) ib.setVisibility(View.GONE);

}

@Override

public void showBtn() {

// 设置按钮可见

if (!ib.isShown()) ib.setVisibility(View.VISIBLE);

}

}

interface EdtInterface {

public void hideBtn();

public void showBtn();

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

在TextWatch接口的afterTextChanged方法中对文字进行判断,若长度为0,就隐藏按钮,否则,显示按钮。

另外,实现ImageButton(即那个叉)的点击事件,删除输入框中的内容,并隐藏按钮。

后面两步的实现就是加入到实际布局中,就不再写出来了,和上例的步骤一样的。最后显示效果如图:

42aec70e185c9ac2f5e8bdf0f790b948.png

学会灵活的使用组合控件,对UI开发会有很大帮助。

首先我们看下系统的RadioButton:

RadioButton长成什么样子是由其Background、Button等属性决定的,Android系统

使用style定义了默认的属性,在android源码

android/frameworks/base/core/res/res/values/styles.xml中可以看到默认的定义:

@android:drawable/btn_radio_label_background

@android:drawable/btn_radio

即其背景图是btn_radio_label_background,其button的样子是btn_radio

btn_radio_label_background是什么?

其路径是android/frameworks/base/core/res/res/drawable-mdpi/btn_radio_label_background.9.png

可以看到是一个NinePatch图片,用来做背景,可以拉伸填充。

btn_radio是什么?

其路径是android/frameworks/base/core/res/res/drawable/btn_radio.xml

是个xml定义的drawable,打开看其内容:

48304ba5e6f9fe08f3fa1abda7d326ab.png

android:drawable="@drawable/btn_radio_on" />

android:drawable="@drawable/btn_radio_off" />

android:drawable="@drawable/btn_radio_on_pressed" />

android:drawable="@drawable/btn_radio_off_pressed" />

android:drawable="@drawable/btn_radio_on_selected" />

android:drawable="@drawable/btn_radio_off_selected" />

48304ba5e6f9fe08f3fa1abda7d326ab.png

定义了不同状态下radioButton长成什么样子。

如果不知道selector是什么,就要去看下Android SDK文档中Dev Guide->Application Resources->Resource Types。

以下面一个item为例:

android:drawable="@drawable/btn_radio_on_pressed" />

意思即为当radiobutton被选中时,并且被按下时,其Button应该长成btn_radio_on_pressed这个样子。

0da51673c4e6145b49a28d2ee6d1b100.png 

文件是android/frameworks/base/core/res/res/drawable-mdpi/btn_radio_on_pressed.png

drawable的item中可以有以下属性:

android:drawable="@[package:]drawable/drawable_resource"

android:state_pressed=["true" | "false"]

android:state_focused=["true" | "false"]

android:state_selected=["true" | "false"]

android:state_active=["true" | "false"]

android:state_checkable=["true" | "false"]

android:state_checked=["true" | "false"]

android:state_enabled=["true" | "false"]

android:state_window_focused=["true" | "false"]

当按钮的状态和某个item匹配后,就会使用此item定义的drawable作为按钮图片。

从上面分析我们如果要修改RadioButton的外观,那么步骤应该是:

(1)制作一个9patch的图片作为背景图

准备一副PNG图片,其中白色为透明色,是否需要透明各人根据自己需要决定。

530e2899323f965ef407716ea2c9245a.png 

运行SDK/tools/draw9patch

在可伸缩的范围周围加上黑色的线告知系统这些区域可以伸缩。

制作完的图片,周围多了黑色线。

2de4a7a767aa87934d28ce054712bd13.png 

(2)针对不同的状态提供按钮图片

enabled, on: 紫色外框、红色中心点

cc6ad6eef6432a5efd7003f745b619da.png 

enabled, off:只有紫色外框

45251496cb2f546bd77722c686411c9c.png 

enabled, on, pressed:黄色外框,红色中心点

c4fa593b2fc790b4d5f3b11ed9ad6a42.png 

enabled, off, pressed:黄色外框

76f94e265fea1769991ea6a69d2e64e2.png 

disabled, on: 灰色外框、灰色中心点

f2a707a0a7cc6a0a52082388bd53d064.png 

disabled, off: 灰色外框

5b6190fb06ff763bc8d41dc3c5393c72.png 

其余的状态此处就不再定义。

(3)使用xml描述一个drawable

在res/drawable/创建custom_radio_btn.xml

48304ba5e6f9fe08f3fa1abda7d326ab.png

android:drawable="@drawable/enabled_on_pressed" />

android:drawable="@drawable/enabled_off_pressed" />

android:drawable="@drawable/enabled_on" />

android:drawable="@drawable/enabled_off" />

android:drawable="@drawable/disabled_on" />

android:drawable="@drawable/disabled_off" />

48304ba5e6f9fe08f3fa1abda7d326ab.png

Item顺序是有讲究的,条件限定越细致,则应该放到前面。比如这儿如果把1,2行和3,4行的item交换,那么pressed的就永远无法触发了,因为有item已经满足条件返回了。可以理解为代码中的if语句。

(4)创建一个自定义的style,并应用到RaidioButton的style属性上

@drawable/radio_btn_bg

@drawable/custom_radio_btn

运行ap即可看到此RadioButton的外观已经改变,此demo可以看到文字被按钮遮盖了一部分,

这儿是因第一步制作9patch图片时没有留出按钮图片空间来,稍作修改即可。

a990183ae27dc87aaa11a0af5b6f1cef.png

from:http://mypyg.iteye.com/blog/768471

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值