添加附件组件->登录界面简单实现

一、创建Android Activity
打开Java-ADT，按照下面的流程来进行操作。
File–>new–>Other–>Android–>Android Application Project–>next–>填写Application Name–>next–>next–>使用默认图片或者Browse选择本机图片–>next–>next–>Activity Name可以更改–>finish。
等待一小段时间出现如下界面：

二、界面设置
创建好一个Android Activity以后，我们可以直接在.xml文件中拖动组件来进行界面的设置。（打开.xml文件操作：找到刚刚new的文件夹–>选择res文件夹–>选择layout文件夹–>打开里面的.xml文件）
得到如下界面，默认显示“Hello World！”：（右边的palette里面的选项即是所有组件所在的位置，可以都拖到界面上看一下）

当然拖动的时候不能准确的布局。所以我们还可以在layout中自己写代码添加组件，设置位置大小等等。
打开layout代码界面指示图如下

点击之后显示界面如下：

三、登录界面
一，首先来介绍一下Android的一些组件吧。
打开.xml页面，选择切换到Graphical Layout页面。

从第一个开始看，Palette这里可以改变组件显示样式，点击右边的小三角就可以进行选择了。
在这里简要介绍几个常用的组件。
1.TextView：用来显示字符串的组件，在手机上就是显示一块文本的区域。
2.EditView:输入框，显示是一条横线，用户可以输入数字字母等。
3.Button:按钮，可点击。
4.imageView:添加图片

二，现在切换到.xml页面，没添加东西前，默认的是这个样子的，它会默认添加一块文本区域，显示hello world!

在TextView前面的一部分，<RelativeLayout…>中的东西不能删，可以先不用管它，<TextView…/>这个hello world可以删掉的，之后我们可以添加图片，输入框，按钮等等，先来做一个简单的登录界面

1.将原来的文本<TextView…/>中的内容删掉。先来添加一张图片。按下ctrl+/,选择，在/>前添加内容，代码如下：(这里的cat是我添加在res文件夹下drawable文件夹下的一张png格式的图片)，在这里100dp是自己添加的长和宽。

 <ImageView 
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/cat"
        />

2.接下来添加账号文本和输入框，代码如下：

<TextView
        android:id="@+id/zhanghao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/zhanghao" 
        android:textSize="20sp"
        />
    
    <EditText 
        android:id="@+id/zhanghao_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>

3.接下来添加密码文本和输入框，代码如下：

<TextView 
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/password"
        android:textSize="20sp" 
        />
    
    <EditText 
        android:id="@+id/password_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>

4.添加登录按钮，代码如下：

<Button 
        android:id="@+id/button_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login"
        />

5.以上只是添加了必要的组件，最终的登录界面的实现，还需要加上一些布局，这里用的是线性布局LinearLayout。以下是登录界面以及完整的登录界面的.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="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" 
    android:orientation="vertical"
    
    android:gravity="center"
    android:background="@drawable/background_second">
    
    <ImageView 
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/cat"
        />
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <TextView
        android:id="@+id/zhanghao"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/zhanghao" 
        android:textSize="20sp"
        />
    
    <EditText 
        android:id="@+id/zhanghao_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>
    </LinearLayout>
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    <TextView 
        android:id="@+id/password"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/password"
        android:textSize="20sp" 
        />
    
    <EditText 
        android:id="@+id/password_"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFAFA"/>
    </LinearLayout>
    
    <Button 
        android:id="@+id/button_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/login"
        />

</LinearLayout>

四、设置监听器
上面的操作步骤做完了之后，简单的界面已经生成了。接下来实现点击按钮可以进行验证并且显示提示消息。
为组件添加监听器需要在MainActivity.Java中编写代码进行。
打开MainActivity.Java，里面已经有了两个方法，一个是onCreate，另一个是onCreateOptionsMenu方法，先不管后面的这个方法，下面在onCreate中编写方法。

protected void onCreate(Bundle savedInstanceState) {
       //第一二两行别动
       super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //=======下面是自己添加的代码=======
        //得到本界面对象
        final Activity main = MainActivity.this;
        
        //获取输入框对象，这里的editText1是你自己在.xml界面代码中设置的组件名字（android:id="@+id/editText1"），没有设置它会自动为你设置一个名字
        final EditText username = (EditText)this.findViewById(R.id.editText1);
        
        //获取按钮对象，button1也是你的按钮组件的名字
        Button loginbtn = (Button) this.findViewById(R.id.button1);
        
      
        //为按钮设置监听器，如果按钮被点击则会执行如下的代码
        loginbtn.setOnClickListener(new OnClickListener(){
  
			@Override
			public void onClick(View v) {
				//获取输入框中的内容,用getText()方法
		        String mesg = username.getText().toString();
		        //进行简单验证
		        if(mesg.equals("admin")){
		        //下面使用的是Toast的一个方法来进行信息的提示，第一个参数放的是这个界面的对象，第二个参数是需要显示的内容，第三个参数设置的是显示提示内容的时长，这里为了方便观察使用了较长时间的显示。
		        	Toast.makeText(main, "登录成功", Toast.LENGTH_LONG).show();
		        }else{
		        	Toast.makeText(main, "输入错误！", Toast.LENGTH_LONG).show();
		        }
			}
        });
    }
    

来看一下效果：
简单界面

接着输入hello,出现如下界面，下方有提示显示“登录错误”：

现在输入正确的内容“admin”出现如下界面，显示“登录成功”：

大家多多熟悉一下各个组件，做出更为精美的登录界面；下篇我们来实现，点击按钮登录成功之后，进入另一个界面，该界面可以实现简单的画图功能。