简单安卓小程序:登录界面 图片切换&移动终端软件开发课程

补充说明一下，经常出现UI不显示自己的设计结果的情况。通过查阅文档，发现在style.xml中的parent中添加Base.即可很好的解决问题。

###1.图片切换

####应用的控件:

1. EditView
2. TextView
3. ImageView
4. Button
   ####将图片引入
   这个步骤非常简单，只需要把所需图片复制到drawable文件夹中，如图
   
   ####设计布局:
   很简单我们只需要它顺次排列，因此只需要用最简单的线性布局，因此在.xml文件中改写：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"//垂直线性排列
    tools:context=".MainActivity">

EditView部分

    <EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

####TextView部分

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/easy_text"
        android:textColor="@color/colorPrimaryDark"/>

####ImageView部分
可能是图片过大的原因，直接防止图片后会导致图片占据整个剩余空间，因此利用android:layout_weight当前剩余空间按权重平分。(具体值当然是我瞎写的啦)

       android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:src="@drawable/cat" />

####Button部分

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cat->Dog" />

####主函数部分

• 首先定义一些变量

    private Button button1;
    private EditText editText1;
    private TextView textView1;
    private ImageView imageView1;
    private boolean flag=false;//判断button

在函数protected void onCreate中初始化这些变量（必须在方法onCreate中存在一条这样的语句：super.onCreate（也就是调用Activity的onCreate方法），对于super.onCreate方法放的位置要求不是很高，只要被调用了就可以了，super.onCreate主要是加载一些组件。）

实现监听调用findViewById(int id)找到该组件：

   textView1=(TextView)findViewById(R.id.textView2);//让组件和对应的ID对应起来
   imageView1=(ImageView)findViewById(R.id.imageView1);
   button1=(Button)findViewById(R.id.button2);
   editText1 = (EditText) findViewById(R.id.editText1);

Button的点击事件监听

button1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
             if(flag){
                 imageView1.setImageResource(R.drawable.dog);
                 button1.setText("Dog->Cat");
             }
             else{
                 imageView1.setImageResource(R.drawable.cat);
                 button1.setText("Cat->Dog");
             }
             flag=!flag;

         }
     });

EditText的改变事件监听

        editText1.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

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

            }

            @Override
            public void afterTextChanged(Editable s) {
                textView1.setText(s.toString());//使文本框和对应的输入一致
                Toast.makeText(MainActivity.this, s.toString(), LENGTH_SHORT).show();//使消息提示框中内容和输入文本中的一致

            }
        });

###2.简单登录

####应用的控件:

1. EditView
2. TextView
3. CheckBox
4. Button
   ####设计布局:
   依然用最简单的线性布局！
   ####XML部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="网络空间安全与计算机学院"
        android:textColor="@color/colorPrimary"/>
    <EditText
        android:id="@+id/edittext1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="账号"
        android:singleLine="true"        />
    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="密码"
        android:inputType="textPassword"
        />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="显示密码"

        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:text="注册"
        android:textColor="@color/colorAccent"
        android:onClick="TextClick"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="ButtonClick"
        android:text="登录" />

</LinearLayout>

####主函数部分

• 变量声明

	private EditText editText2;
    private CheckBox isCheck;

• 初始化

    editText2 = (EditText) findViewById(R.id.editText2);
    isCheck = (CheckBox) findViewById(R.id.checkBox);
    isCheck.setOnClickListener(new OnClickListenerImpl());//设置监听器

• 消息框

    public void TextClick(View view) {
        Toast.makeText(this, "注册功能未实现！", Toast.LENGTH_SHORT).show();
    }

    public void ButtonClick(View view) {//在源代码中设置一个ButtonClick方法，作为该Button的点击监听方法
        Toast.makeText(this, "登陆功能未实现！", Toast.LENGTH_SHORT).show();
    }

• 设置密码的显示与隐藏
  这部分真是比较的重头戏了，搞了半天，气死了，我利用的是复选框实现的，打勾实现显示，未打勾实现隐藏。

 private class OnClickListenerImpl implements OnClickListener{//监听类
        @Override
        public void onClick(View v) {
            if (isCheck.isChecked()) {
                editText2.setTransformationMethod(HideReturnsTransformationMethod.getInstance());//百度查的啦啦啦
            }
            else {
                editText2.setTransformationMethod(PasswordTransformationMethod.getInstance());
            }
        }
    }