通过登陆页面对Android的基本组件介绍

上篇文章我讲了怎么新建安卓的Activity，算是我们学习安卓的第一步，这一次我来详细介绍安卓的基本组件，包括TextView，EditText，Button，ImageButton。

1、首先是TextView。上一篇在我们新建Activity的时候，eclipse会自动给我们生成一个内容“Hello world”的TextView，下面我主要介绍关于TextView和EditText的扩展学习，一些我们可能要用到的属性：

（1）超链接样式的TextView-----------------对应的xml属性autoLink，例如我们可以把TextView的文字设置为”www.baidu.com"，也就是它的text属性，我们可以设置为“android:text="*****",****可以是直接的文字表述，但最好是放在string文件中，这样修改起来比较方便，并且可在多个地方调用。把文字设置完后运行，当我们点击该TextView就会直接跳转到百度首页。

（2）默认文本的EditText-----------------对应的xml属性为hint，比如在登录界面，我们常常在密码框里面写一个“请输入密码”。但密码通常使是用点来代替字符，所以我们可以使用到属性password，将它设为true就可以了，和他相类似的，比如我们要求只能输入号码，对应的属性就说phoneNumber，将它也设为true就可以了。

（3)有的时候我们在规定的行数内不能把内容显示完全，比如很多时候我们必须限制在1行展示，也就比如说属性singleLine为true时，可以使用属性ellipse，在开头，中间，结尾，以及以跑马灯的形式省略。

(4)Button,顾名思义，他就是按钮，我们在一个App中通常会看到各种按钮，或实现页面的跳转，或可以弹出一个提示框等等。关于Button，我觉得首先最吸引大家的就是它的变色，因为我们会希望他正常的时候是一种颜色，而点击的时候是另外一种颜色，这时候其实就是对他的背景设置的问题，同时我们要求把他的背景设置为一张可变化的图片。比如说我们可以做两张不同颜色的Button图片，然后把它们写成一个“.xml”格式的图片。还有一个属性是我在实习的时候发现的，觉得他很好用，那就是drawableTop(Top也可以根据用户所想要显示的方位定为Bottom/Left/Right），这其实就是让我们在某些布局（比如QQ中的返回按钮“<返回”）表达时，非要先写个Button又写个TextView。

下面是我写的登录界面的demo的部分代码：

public class LoginActivity extends Activity implements OnClickListener {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		EditText etName = (EditText) findViewById(R.id.et_name);
		EditText etPwd = (EditText) findViewById(R.id.et_pwd);
		EditText etPhone = (EditText) findViewById(R.id.et_phonenum);
		TextView tvWeb = (TextView) findViewById(R.id.tv_baidu);
		ImageButton ibtnBack = (ImageButton) findViewById(R.id.ibtn_back);
		Button btnRestiger = (Button) findViewById(R.id.btn_restiger);
		Button btnLogin = (Button) findViewById(R.id.btn_login);
		Button btnCancel = (Button) findViewById(R.id.btn_cancel);
		ibtnBack.setOnClickListener(this);
		btnRestiger.setOnClickListener(this);
		btnLogin.setOnClickListener(this);
		btnCancel.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.ibtn_back:
			finish();
			break;
			
		case R.id.btn_restiger:
		    Intent intent = new Intent(LoginActivity.this, RestigerActivity.class);
		    startActivity(intent);
		    break;
        
		case R.id.btn_login:
			Toast.makeText(getApplicationContext(), "点击登录", 0).show();
			break;
			
		case R.id.btn_cancel:
			Toast.makeText(getApplicationContext(), "点击取消", 0).show();
		    break;
		}
	}

而上面的activity_main这个布局的主要代码如下：

    android:orientation="vertical" >


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/holo_blue_bright" >


        <Button
            android:id="@+id/ibtn_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableLeft="@drawable/back"
            android:minWidth="35dp"
            android:layout_marginLeft="10dp"
            android:text="@string/btn_back"
            android:textColor="@color/white" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center_horizontal"
            android:text="@string/tv_login"
            android:textColor="@color/holo_red_light" 
            android:textSize="30sp"/>


        <Button android:id="@+id/btn_restiger"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_centerVertical="true"
            android:background="@null"
            android:text="@string/btn_restiger"
            android:textColor="@color/white"
            android:minWidth="35dp" />
        
    </RelativeLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:paddingLeft="10dp"
            android:text="@string/tv_name" />


        <EditText
            android:id="@+id/et_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLength="20"
            android:layout_marginLeft="20dp"
            android:singleLine="true" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:paddingLeft="10dp"
            android:text="@string/tv_pwd" />


        <EditText
            android:id="@+id/et_pwd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_weight="1"
            android:singleLine="true"
            android:password="true"
            android:maxLength="20"
            android:hint="@string/put_your_pwd"
             />
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="20dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:orientation="horizontal" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:paddingLeft="10dp"
            android:text="@string/tv_phonenum" />


        <EditText
            android:id="@+id/et_phonenum"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:maxLength="11"
            android:hint="@string/put_your_phonenum"
            android:singleLine="true"
            android:phoneNumber="true" />
    </LinearLayout>


    <TextView
        android:id="@+id/tv_baidu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:autoLink="web"
        android:paddingLeft="10dp"
        android:text="@string/tv_baidu" />
        
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="40dp"
        android:gravity="center_horizontal">
        
        <Button android:id="@+id/btn_login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_change_color"
            android:text="@string/btn_login"
            android:textColor="@color/holo_blue_bright"/>
        
        <Button android:id="@+id/btn_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_change_color"
            android:text="@string/btn_cancel"
            android:layout_marginLeft="40dp"
            android:textColor="@color/holo_blue_bright"/>
    </LinearLayout>

Button的点击变色效果（点击时背景为红色，正常背景为灰色），这里我让登录和注册按钮都实现了这种变色，用以和其他按钮进行区别，下面是图片名称为“btn_change_color"d的主要代码：

<pre name="code" class="html"><selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:state_pressed="true" android:drawable="@color/holo_red_light" />
    <item android:state_pressed="false" android:drawable="@android:color/darker_gray" />
    
</selector>

由于图片的显示不全，所以就不贴图了，大家可以自己在手机上调试查看当我们点击标题左侧，也就是一个“<返回”时，会退回到首页。这是因为我们对这个Button做了点击事件处理，也就是通过它的setOnClickListener()方法来进行监听，同样地，点击标题右侧的文字按钮“注册”后，会跳转到注册页面，也就是另外一个Activity，这个我会在后面的blog中详细讲解。对于登录和取消两个按钮，就在变色的时候做了简单的弹出框提示。