您的位置:首页 > 产品设计 > UI/UE

Android的UI组件之TextView、EditText

2011-12-14 18:58 323 查看
TextView和EditText。这两个组件经常用到,但是功能很多,
TextView:
1、属性设置:

<TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textColor="#00FF00"

        android:padding="30dp"

        android:textSize="30dp"

      //android:layout_margin="10dp"

    android:text="@string/hello" />
设置字体的颜色(android:textColor="#00FF00"),边距(android:padding="30dp"),文本大小(android:textSize="30dp")等属性,其中"layout_width"属性和"layout_margin"有冲突,使用时需要注意
2、Android:autoLink
设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接。可选值为(web/email/phone/map/all/none)
<?xml version="1.0"encoding="utf-8"?>

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

 

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:autoLink="web"

        android:text="@string/webURL" />

 

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:autoLink="map"

        android:text="@string/map" />

 

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:autoLink="phone"

        android:text="@string/phone" />

 

    <TextView

        android:id="@+id/tvHtml"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:autoLink="all"

        android:text="@string/autoAll"/>

</LinearLayout>
注意:

android:autoLink=”email”:会出现unsupported action,可能是模拟器bug,须探究

 

另外使用Html.fromHtml时,超链接只具备外观,不能跳转

给文本添加文本框边距

Xml文件的声明

<?xmlversion="1.0" encoding="utf-8"?>

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

    android:layout_width="match_parent"

   android:layout_height="match_parent"

    android:orientation="vertical">

 

    <cn.class3g.activity.MyBorderTextView

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        android:layout_margin="10dp"

        android:padding="15dp"

        android:text="@string/hello"

        android:textColor="#cccccc"/>

 

    <TextView

       android:layout_width="fill_parent"

       android:layout_height="wrap_content"

        android:layout_margin="10dp"

        android:padding="15dp"

        android:text="@string/hello"

       android:background="@drawable/tv_back"

        android:gravity="center"

        android:textColor="#FFFFFF"/>

 

</LinearLayout>

JAVA类实现    

//必须实现带两个参数的构造

       public MyBorderTextView(Context context,AttributeSet attrs) {

              super(context, attrs);          

       }

 

       //覆盖父类的onDraw方法

       public void onDraw(Canvas canvas){

              super.onDraw(canvas);

             

              //创建画刷

              Paint paint = new Paint();

              //设置当前颜色

              paint.setColor(android.graphics.Color.GREEN);

              //开画

              canvas.drawLine(0, 0,this.getWidth()-1, 0, paint);

              canvas.drawLine(0, 0, 0,this.getHeight()-1, paint);

              canvas.drawLine(this.getWidth()-1,0, this.getWidth()-1, this.getHeight()-1, paint);

              canvas.drawLine(0,this.getHeight()-1,this.getWidth()-1,this.getHeight()-1,paint);

              }

继承TextView接口覆盖父类的onDraw方法、

DrawLine中五个参数分别代表的意义是

第一个参数:起点x轴

第二个参数:起点y轴

第三个参数:终点x轴

第四个参数:终点y轴

3、*.9.patch
1)他是一个针对png图片的处理工具,能够生成一个“*.9.patch”的图片,所谓“*.9.patch”这里是Android里所支持的一种特殊的图片格式,用它可以实现部分拉伸,如果不处理直接用png图片就会失真,拉伸出不正常的现象出来。
2)启动:首先在Android的SDK的路径的tools中,你会找到一个“draw9patch.bat”,点击打开如下图所示:



导入一张png图片,然后进入操作区域,如下图所示



序列 ① :在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良 好的。 (实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的,一边来说只要色差不是太大不用考虑这个设置。) 
序列 ② :区域是导入的图片,以及可操作区域。
序列 ③ :这里zoom:的长条bar是对导入的图放大缩小操作,这里的放大缩小只是为了让使用者更方便操作,毕竟是对像素点操作比较费眼,下面的 patch scale 是序列 ④区域中的三种形态的拉伸后的一个预览操作,可以看到操作后的图片拉伸后的效果。
序列 ④: 区域这里从上到下,依次为:纵向拉伸的效果预览、横向拉伸的效果预览,以及整体拉伸的效果预览
序列 ⑤: 这里如果你勾选上,那么当你鼠标放在 ② 区域内的时候并且当前位置为不可操作区域就会出现lock的一张图,就是显示不可编辑区域 ;
序列 ⑥: 这里勾选上,那么在④ 区域中你就会看到当前操作的像素点在拉伸预览图中的相对位置和效果。
序列 ⑦: 在编辑区域显示图片拉伸的区域;
3)对图片的操作



上方和左边的黑色像素是我手动操作的地方,选择上方区域是为了横向拉伸的时候选取的像素点,左边则是纵向拉伸
4)使用“*.9.png”的好处
通过“*.9.patch”处理过的图片可以减少内存,而且还可以减少代码量,虽然手机趋向于智能了,但是毕竟手机的内存和容量有限,身为移动开发者的我们必须对此很重视,通过此方法处理过的图片就可以帮我们省去很多内存和容量
EditText组件
输入特定字符
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <EditText
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:digits="0123"//只能输入包含0、1、2、3的数
       />
    <EditText
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:password="true"//密码为隐式密码  不可见
       />
    <EditText
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:inputType="textEmailAddress"//输入邮箱或者地址
       />
    <EditText
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:inputType="number"//只能输入数字
       />
    <EditText
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:numeric="decimal|signed"//可以输入浮点型数,正数或者负数
       />
</LinearLayout>
文本框与按钮的切换(文本里点击回车切换到按钮(或者另一个组件) 点击按钮回到文本框)
public class EditTextViewActivity extends Activityimplements OnKeyListener,OnClickListener{
    Buttonbtn=null;
    EditTextet=null;
       publicvoid onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.onkey_layout);
       findViews();
       btn.setOnClickListener(this);
    }
    public voidfindViews(){
          btn=(Button)this.findViewById(R.id.button);
          et=(EditText)this.findViewById(R.id.edit);
          et.setOnKeyListener(this);
    }
 
       publicboolean onKey(View v, int keyCode, KeyEvent event) {
              if(keyCode==KeyEvent.KEYCODE_ENTER){
                     btn.setText(et.getText());
                     et.setVisibility(View.GONE);
                     btn.setVisibility(View.VISIBLE);
              }
              returntrue;
       }
       @Override
       publicvoid onClick(View v) {
              btn.setText(et.getText());
              et.setVisibility(View.VISIBLE);
              btn.setVisibility(View.INVISIBLE);
       }
   
}
其中INVISIBLE是不显示
VISIBLE是显示
GONE是跳转且不显示
其他的都很熟悉了;
自动完成输入内容的组件
AutoCompleteTextView单个组件

MultiCompleteTextView批量组件

public classAutoCompleteActivity extends Activity {

       AutoCompleteTextView autoTx = null;

       MultiAutoCompleteTextView mautoTx = null;

       protected void onCreate(BundlesavedInstanceState) {

              super.onCreate(savedInstanceState);

              setContentView(R.layout.auto_complete);

              findViews();

              String[] str = { "abc","add", "axy", "aaaa", "bcd","bbbd", "bdcc" };

              ArrayAdapter adapter = newArrayAdapter(this,

                            android.R.layout.simple_dropdown_item_1line,str);

              autoTx.setAdapter(adapter);

              //-------MulitAutoCompleteTextView

              mautoTx.setAdapter(adapter);

              mautoTx.setTokenizer(newMultiAutoCompleteTextView.CommaTokenizer());

             

       }

 

       private void findViews() {

              autoTx = (AutoCompleteTextView)findViewById(R.id.autoTx);

              mautoTx =(MultiAutoCompleteTextView) findViewById(R.id.mautoTx);

       }

}

 
 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息