android重写UI控件

很多时候android自定义控件并不克不及满足需求,如何做呢?很多办法,可以本身绘制一个,可以经由过程持续根蒂根基控件来重写某些环节,当然也可以将控件组合成一个新控件,这也是最便利的一个办法。今天就来介绍下如何应用组合控件,将经由过程两个实例来介绍。
第一个实现一个带图片和文字的按钮,如图所示:
全部过程可以分四步走。第一步,定义一个layout,实现按钮内部的布局。代码如下:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    ><ImageView    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"    /><TextView    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"    /></LinearLayout>
  这个xml实现一个左图右字的布局,接下来写一个类持续LinearLayout,导入方才的布局,并且设置须要的办法,从而使的能在代码中把握这个自定义控件内容的显示。代码如下:
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.(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);    }}



  第三步,在须要应用这个自定义控件的layout中参加这控件,只须要在xml中参加即可。办法如下:





<RelativeLayout         
android:orientation="horizontal"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_gravity="bottom"         >         <com.notice.ib.ImageBt            
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"            
/>        
<com.notice.ib.ImageBt            
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"            />        
</RelativeLayout>



重视的是,控件标签应用完全的类名即可。为了给按钮一个点击结果,你须要给他一个or靠山,这里就不说了。



  最后一步,即在activity中设置该控件的内容。当然,在xml中也可以设置,然则只能设置一个,当我们须要两次应用如许的控件,并且显示内容不应时就不可了。在activity中设置也很是简单,我们在ImageBt这个类中已经写好了响应的办法,简单调用即可。代码如下:
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) {                   
//在这里可以实现点击事务           
}       
});  
}}



  如许,一个带文字和图片的组合按钮控件就完成了。如许梳理一下,应用还是很是简单的。组合控件能做的事还很是多,主如果在类似上例中的ImageBt类中写好要应用的办法即可。



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



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





<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    >
<EditText      android:id="@+id/et"    android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:singleLine="true"    />
<ImageButton    android:id="@+id/ib"   
android:visibility="gone"   
android:src="@drawable/menu_"    android:layout_width="wrap_content"    android:layout_height="wrap_content"   
android:background="#00000000"   
android:layout_alignRight="@+id/et" />
</RelativeLayout>



  实现输入框右侧带按钮结果,重视将按钮隐蔽。然后写一个EditCancel类,实现删除用户输入功能。这里用到了TextWatch这个接口,监听输入框中的文字变更。应用也很简单,实现他的三个办法即可。看代码:





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.(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();}



   在TextWatch接口的afterTextChanged办法中对文字进行断定,若长度为0,就隐蔽按钮,不然,显示按钮。



   别的,实现ImageButton(即那个叉)的点击事务,删除输入框中的内容,并隐蔽按钮。



猜你喜欢

转载自flyering.iteye.com/blog/1659856