登录界面androiddemo

2017-09-01 13:47:26 wenzhi20102321 阅读数 43446

Android登录界面设计
这是之前项目的一个界面,现在抽出来給大家看看。

界面:

1

功能:

(1)基本的判断,输入的是否为空

这里没有判断网络情况,实际项目中是必须要判断的

(2)核心知识:sharePreference的使用

本地保存数据,用户名和密码,还有下面复选框的状态都要保存。
这里我自己封装了一个工具栏。

(3)密码可见和不可见

默认密码不可见,单击图标后可见,再次点击后不可见。
点击右边的图标时,对EditText设置代码即可:

  if (iv_see_password.isSelected()) {
            iv_see_password.setSelected(false);
            //密码不可见
            et_password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

        } else {
            iv_see_password.setSelected(true);
            //密码可见
            et_password.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
        }

(4)登录后会显示链接服务器的对话框

这里有一个自定义的对话框,也是可以自己修改对话框的样式和显示的文字

(5)这里密码保存到本地经过了base64的加密

这里创建了一个加密工具类,base64加密过的字符串,会很容易就被解密出来。
但是我发现一个字符串可以加密N次,解密也是要N次,就可以得到原来的字符串。
所以我在工具类里面设置了N的数值,别人就很难知道我的base64怎么解密了!
值得注意的是:多次解密过程有可能会給字符串添加空格,所有每次要对字符串去空格!
加密解密的次数太大,也是要耗时间的,不建议N的数值大于20.

动态效果:

2
如果勾选了自动登录,下次进入登录界面,会自动请求服务器登录。如下图所示:
3

这里分享一下主要的代码:

登录页面的xml布局代码:


<?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:background="#fff"
        android:orientation="vertical">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="登录界面"
            android:gravity="center"
            android:textSize="30sp"
            />
    <View android:layout_width="match_parent" android:layout_height="@dimen/dp_1"
          android:background="@color/orange_main"
            />

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/item_height_normal"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            android:layout_marginTop="@dimen/dp_120">

        <ImageView
                android:id="@+id/img_account"
                android:layout_width="@dimen/dp_19"
                android:layout_height="@dimen/dp_20"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="@dimen/margin_tiny"
                android:layout_marginLeft="@dimen/margin_tiny"
                android:scaleType="fitXY"
                android:src="@drawable/icon_login_account"/>

        <EditText
                android:id="@+id/et_account"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_gravity="center"
                android:layout_marginBottom="@dimen/margin_tiny"
                android:layout_marginLeft="@dimen/margin_normal"
                android:layout_toRightOf="@+id/img_account"
                android:background="@null"
                android:hint="@string/account"
                android:maxLines="1"
                android:textColor="@android:color/black"
                android:textColorHint="@color/tv_gray_deep"
                android:textSize="@dimen/text_size_normal"/>

        <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/line_height"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="@dimen/margin_normal"
                android:layout_toRightOf="@+id/img_account"
                android:background="@color/orange_light"/>
    </RelativeLayout>

    <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/item_height_normal"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large">

        <ImageView
                android:id="@+id/img_pw"
                android:layout_width="@dimen/dp_18"
                android:layout_height="@dimen/dp_20"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="@dimen/margin_tiny"
                android:layout_marginLeft="@dimen/margin_tiny"
                android:scaleType="fitXY"
                android:src="@drawable/icon_login_pw"/>

        <EditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_gravity="center"
                android:layout_marginBottom="@dimen/margin_tiny"
                android:layout_marginLeft="@dimen/margin_normal"
                android:layout_toRightOf="@+id/img_pw"
                android:background="@null"
                android:hint="@string/password"
                android:inputType="textPassword"
                android:maxLines="1"
                android:textColor="@android:color/black"
                android:textColorHint="@color/tv_gray_deep"
                android:textSize="@dimen/text_size_normal"/>
        <ImageView
                android:id="@+id/iv_see_password"
                android:layout_width="@dimen/image_height_litter"
                android:layout_height="@dimen/image_height_litter"
                android:src="@drawable/image_password_bg"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:scaleType="fitXY"
                />
        <View
                android:layout_width="match_parent"
                android:layout_height="@dimen/line_height"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="@dimen/margin_normal"
                android:layout_toRightOf="@+id/img_pw"
                android:background="@color/orange_light"/>
    </RelativeLayout>
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            android:layout_marginTop="@dimen/margin_small"
            android:paddingBottom="@dimen/margin_small"
            android:paddingTop="@dimen/margin_small"
            android:orientation="horizontal"
            android:gravity="center"
            >
        <CheckBox
                android:id="@+id/checkBox_password"
                android:padding="@dimen/dp_10"
                android:textSize="@dimen/text_size_normal"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="@string/check_password"
                android:textColor="@color/top_bar_normal_bg" android:checked="false"/>
        <CheckBox
                android:id="@+id/checkBox_login"
                android:padding="@dimen/dp_10"
                android:textSize="@dimen/text_size_normal"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="@string/check_login"
                android:textColor="@color/top_bar_normal_bg" android:checked="false"/>

    </LinearLayout>
    <Button
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/margin_large"
            android:layout_marginRight="@dimen/margin_large"
            android:layout_marginTop="@dimen/margin_huge"
            android:paddingBottom="@dimen/margin_small"
            android:paddingTop="@dimen/margin_small"
            android:text="@string/login"
            android:background="@drawable/btn_orange_selector"
            android:textColor="@android:color/white"
            android:textSize="@dimen/text_size_normal"/>


</LinearLayout>

sharePreference工具类代码:

package com.lwz.login_demo.util;

import android.content.Context;
import android.content.SharedPreferences;

/**
 * 这是一个SharePreference的根据类,使用它可以更方便的数据进行简单存储
 * 这里只要知道基本调用方法就可以了
 * 1.通过构造方法来传入上下文和文件名
 * 2.通过putValue方法传入一个或多个自定义的ContentValue对象,进行数据存储
 * 3.通过get方法来获取数据
 * 4.通过clear方法来清除这个文件的数据
 * 这里没有提供清除单个key的数据,是因为存入相同的数据会自动覆盖,没有必要去理会
 */
public class SharedPreferencesUtils {
    //定义一个SharePreference对象
    SharedPreferences sharedPreferences;
    //定义一个上下文对象

    //创建SharePreference对象时要上下文和存储的模式
    //通过构造方法传入一个上下文
    public SharedPreferencesUtils(Context context, String fileName) {
        //实例化SharePreference对象,使用的是get方法,而不是new创建
        //第一个参数是文件的名字
        //第二个参数是存储的模式,一般都是使用私有方式:Context.MODE_PRIVATE
        sharedPreferences = context.getSharedPreferences(fileName, Context.MODE_PRIVATE);
    }

    /**
     * 存储数据
     * 这里要对存储的数据进行判断在存储
     * 只能存储简单的几种数据
     * 这里使用的是自定义的ContentValue类,来进行对多个数据的处理
     */
    //创建一个内部类使用,里面有key和value这两个值
    public static class ContentValue {
        String key;
        Object value;

        //通过构造方法来传入key和value
        public ContentValue(String key, Object value) {
            this.key = key;
            this.value = value;
        }
    }

    //一次可以传入多个ContentValue对象的值
    public void putValues(ContentValue... contentValues) {
        //获取SharePreference对象的编辑对象,才能进行数据的存储
        SharedPreferences.Editor editor = sharedPreferences.edit();
        //数据分类和存储
        for (ContentValue contentValue : contentValues) {
            //如果是字符型类型
            if (contentValue.value instanceof String) {
                editor.putString(contentValue.key, contentValue.value.toString()).commit();
            }
            //如果是int类型
            if (contentValue.value instanceof Integer) {
                editor.putInt(contentValue.key, Integer.parseInt(contentValue.value.toString())).commit();
            }
            //如果是Long类型
            if (contentValue.value instanceof Long) {
                editor.putLong(contentValue.key, Long.parseLong(contentValue.value.toString())).commit();
            }
            //如果是布尔类型
            if (contentValue.value instanceof Boolean) {
                editor.putBoolean(contentValue.key, Boolean.parseBoolean(contentValue.value.toString())).commit();
            }

        }
    }


    //获取数据的方法
    public String getString(String key) {
        return sharedPreferences.getString(key, null);
    }

    public boolean getBoolean(String key, Boolean b) {
        return sharedPreferences.getBoolean(key, b);
    }

    public int getInt(String key) {
        return sharedPreferences.getInt(key, -1);
    }

    public long getLong(String key) {
        return sharedPreferences.getLong(key, -1);
    }

    //清除当前文件的所有的数据
    public void clear() {
        sharedPreferences.edit().clear().commit();
    }

}

登录页面的java逻辑代码:

package com.lwz.login_demo.activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.text.InputType;
import android.view.View;
import android.widget.*;
import com.lwz.login_demo.R;
import com.lwz.login_demo.util.Base64Utils;
import com.lwz.login_demo.util.SharedPreferencesUtils;
import com.lwz.login_demo.widget.LoadingDialog;

/**
 * 登录界面
 */

public class LoginActivity extends Activity
        implements View.OnClickListener, CompoundButton.OnCheckedChangeListener {
    //布局内的控件
    private EditText et_name;
    private EditText et_password;
    private Button mLoginBtn;
    private CheckBox checkBox_password;
    private CheckBox checkBox_login;
    private ImageView iv_see_password;

    private LoadingDialog mLoadingDialog; //显示正在加载的对话框


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        initViews();
        setupEvents();
        initData();

    }

    private void initData() {


        //判断用户第一次登陆
        if (firstLogin()) {
            checkBox_password.setChecked(false);//取消记住密码的复选框
            checkBox_login.setChecked(false);//取消自动登录的复选框
        }
        //判断是否记住密码
        if (remenberPassword()) {
            checkBox_password.setChecked(true);//勾选记住密码
            setTextNameAndPassword();//把密码和账号输入到输入框中
        } else {
            setTextName();//把用户账号放到输入账号的输入框中
        }

        //判断是否自动登录
        if (autoLogin()) {
            checkBox_login.setChecked(true);
            login();//去登录就可以

        }
    }

    /**
     * 把本地保存的数据设置数据到输入框中
     */
    public void setTextNameAndPassword() {
        et_name.setText("" + getLocalName());
        et_password.setText("" + getLocalPassword());
    }

    /**
     * 设置数据到输入框中
     */
    public void setTextName() {
        et_name.setText("" + getLocalName());
    }


    /**
     * 获得保存在本地的用户名
     */
    public String getLocalName() {
        //获取SharedPreferences对象,使用自定义类的方法来获取对象
        SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
        String name = helper.getString("name");
        return name;
    }


    /**
     * 获得保存在本地的密码
     */
    public String getLocalPassword() {
        //获取SharedPreferences对象,使用自定义类的方法来获取对象
        SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
        String password = helper.getString("password");
        return Base64Utils.decryptBASE64(password);   //解码一下
//       return password;   //解码一下

    }

    /**
     * 判断是否自动登录
     */
    private boolean autoLogin() {
        //获取SharedPreferences对象,使用自定义类的方法来获取对象
        SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
        boolean autoLogin = helper.getBoolean("autoLogin", false);
        return autoLogin;
    }

    /**
     * 判断是否记住密码
     */
    private boolean remenberPassword() {
        //获取SharedPreferences对象,使用自定义类的方法来获取对象
        SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
        boolean remenberPassword = helper.getBoolean("remenberPassword", false);
        return remenberPassword;
    }


    private void initViews() {
        mLoginBtn = (Button) findViewById(R.id.btn_login);
        et_name = (EditText) findViewById(R.id.et_account);
        et_password = (EditText) findViewById(R.id.et_password);
        checkBox_password = (CheckBox) findViewById(R.id.checkBox_password);
        checkBox_login = (CheckBox) findViewById(R.id.checkBox_login);
        iv_see_password = (ImageView) findViewById(R.id.iv_see_password);
    }

    private void setupEvents() {
        mLoginBtn.setOnClickListener(this);
        checkBox_password.setOnCheckedChangeListener(this);
        checkBox_login.setOnCheckedChangeListener(this);
        iv_see_password.setOnClickListener(this);

    }

    /**
     * 判断是否是第一次登陆
     */
    private boolean firstLogin() {
        //获取SharedPreferences对象,使用自定义类的方法来获取对象
        SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
        boolean first = helper.getBoolean("first", true);
        if (first) {
            //创建一个ContentVa对象(自定义的)设置不是第一次登录,,并创建记住密码和自动登录是默认不选,创建账号和密码为空
            helper.putValues(new SharedPreferencesUtils.ContentValue("first", false),
                    new SharedPreferencesUtils.ContentValue("remenberPassword", false),
                    new SharedPreferencesUtils.ContentValue("autoLogin", false),
                    new SharedPreferencesUtils.ContentValue("name", ""),
                    new SharedPreferencesUtils.ContentValue("password", ""));
            return true;
        }
        return false;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_login:
                loadUserName();    //无论如何保存一下用户名
                login(); //登陆
                break;
            case R.id.iv_see_password:
                setPasswordVisibility();    //改变图片并设置输入框的文本可见或不可见
                break;

        }
    }

    /**
     * 模拟登录情况
     * 用户名csdn,密码123456,就能登录成功,否则登录失败
     */
    private void login() {

        //先做一些基本的判断,比如输入的用户命为空,密码为空,网络不可用多大情况,都不需要去链接服务器了,而是直接返回提示错误
      if (getAccount().isEmpty()){
          showToast("你输入的账号为空!");
          return;
      }

        if (getPassword().isEmpty()){
            showToast("你输入的密码为空!");
            return;
        }
        //登录一般都是请求服务器来判断密码是否正确,要请求网络,要子线程
        showLoading();//显示加载框
        Thread loginRunnable = new Thread() {

            @Override
            public void run() {
                super.run();
                setLoginBtnClickable(false);//点击登录后,设置登录按钮不可点击状态


                //睡眠3秒
                try {
                    Thread.sleep(3000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

                //判断账号和密码
                if (getAccount().equals("csdn") && getPassword().equals("123456")) {
                    showToast("登录成功");
                    loadCheckBoxState();//记录下当前用户记住密码和自动登录的状态;

                    startActivity(new Intent(LoginActivity.this, LoginAfterActivity.class));
                    finish();//关闭页面
                } else {
                    showToast("输入的登录账号或密码不正确");
                }

                setLoginBtnClickable(true);  //这里解放登录按钮,设置为可以点击
                hideLoading();//隐藏加载框
            }
        };
        loginRunnable.start();


    }


    /**
     * 保存用户账号
     */
    public void loadUserName() {
        if (!getAccount().equals("") || !getAccount().equals("请输入登录账号")) {
            SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
            helper.putValues(new SharedPreferencesUtils.ContentValue("name", getAccount()));
        }

    }

    /**
     * 设置密码可见和不可见的相互转换
     */
    private void setPasswordVisibility() {
        if (iv_see_password.isSelected()) {
            iv_see_password.setSelected(false);
            //密码不可见
            et_password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

        } else {
            iv_see_password.setSelected(true);
            //密码可见
            et_password.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
        }

    }

    /**
     * 获取账号
     */
    public String getAccount() {
        return et_name.getText().toString().trim();//去掉空格
    }

    /**
     * 获取密码
     */
    public String getPassword() {
        return et_password.getText().toString().trim();//去掉空格
    }


    /**
     * 保存用户选择“记住密码”和“自动登陆”的状态
     */
    private void loadCheckBoxState() {
        loadCheckBoxState(checkBox_password, checkBox_login);
    }

    /**
     * 保存按钮的状态值
     */
    public void loadCheckBoxState(CheckBox checkBox_password, CheckBox checkBox_login) {

        //获取SharedPreferences对象,使用自定义类的方法来获取对象
        SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");

        //如果设置自动登录
        if (checkBox_login.isChecked()) {
            //创建记住密码和自动登录是都选择,保存密码数据
            helper.putValues(
                    new SharedPreferencesUtils.ContentValue("remenberPassword", true),
                    new SharedPreferencesUtils.ContentValue("autoLogin", true),
                    new SharedPreferencesUtils.ContentValue("password", Base64Utils.encryptBASE64(getPassword())));

        } else if (!checkBox_password.isChecked()) { //如果没有保存密码,那么自动登录也是不选的
            //创建记住密码和自动登录是默认不选,密码为空
            helper.putValues(
                    new SharedPreferencesUtils.ContentValue("remenberPassword", false),
                    new SharedPreferencesUtils.ContentValue("autoLogin", false),
                    new SharedPreferencesUtils.ContentValue("password", ""));
        } else if (checkBox_password.isChecked()) {   //如果保存密码,没有自动登录
            //创建记住密码为选中和自动登录是默认不选,保存密码数据
            helper.putValues(
                    new SharedPreferencesUtils.ContentValue("remenberPassword", true),
                    new SharedPreferencesUtils.ContentValue("autoLogin", false),
                    new SharedPreferencesUtils.ContentValue("password", Base64Utils.encryptBASE64(getPassword())));
        }
    }

    /**
     * 是否可以点击登录按钮
     *
     * @param clickable
     */
    public void setLoginBtnClickable(boolean clickable) {
        mLoginBtn.setClickable(clickable);
    }


    /**
     * 显示加载的进度款
     */
    public void showLoading() {
        if (mLoadingDialog == null) {
            mLoadingDialog = new LoadingDialog(this, getString(R.string.loading), false);
        }
        mLoadingDialog.show();
    }


    /**
     * 隐藏加载的进度框
     */
    public void hideLoading() {
        if (mLoadingDialog != null) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    mLoadingDialog.hide();
                }
            });

        }
    }


    /**
     * CheckBox点击时的回调方法 ,不管是勾选还是取消勾选都会得到回调
     *
     * @param buttonView 按钮对象
     * @param isChecked  按钮的状态
     */
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (buttonView == checkBox_password) {  //记住密码选框发生改变时
            if (!isChecked) {   //如果取消“记住密码”,那么同样取消自动登陆
                checkBox_login.setChecked(false);
            }
        } else if (buttonView == checkBox_login) {   //自动登陆选框发生改变时
            if (isChecked) {   //如果选择“自动登录”,那么同样选中“记住密码”
                checkBox_password.setChecked(true);
            }
        }
    }


    /**
     * 监听回退键
     */
    @Override
    public void onBackPressed() {
        if (mLoadingDialog != null) {
            if (mLoadingDialog.isShowing()) {
                mLoadingDialog.cancel();
            } else {
                finish();
            }
        } else {
            finish();
        }

    }

    /**
     * 页面销毁前回调的方法
     */
    protected void onDestroy() {
        if (mLoadingDialog != null) {
            mLoadingDialog.cancel();
            mLoadingDialog = null;
        }
        super.onDestroy();
    }


    public void showToast(String msg) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(LoginActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
        });

    }

}


你也可以参考我的项目的完整代码:https://github.com/liwenzhi/LoginDemo.git

上面只是一个简单的示例,逻辑相对会有点啰嗦,因为这是我一个MVP框架程序中抠下来的代码。
请求服务器也是创建子线程来模拟实现的。登录页面可以根据实际需求再修改修改。

共勉:直面一辈子一次的人生路。

2016-12-24 17:25:00 WL_Android_HWH 阅读数 21602

距离上一次更新,两天前。

今天就从头开始来学习,当然是直接上案例了,就不扭扭捏捏的上基础知识了,基础知识是自己去学的,我直接从小的demo入手,开始新一轮的学习之路。

首先是关于界面设计(布局):
关于使用哪种布局,并没有什么特殊的要求,哪种你用得顺手就行了。
唯一的要求:尽量少的代码,和清晰的结构

示例图片
这里写图片描述

布局结构

外层:LinearLayout(线性布局);orientation:vertical(垂直属性)
内层(从上往下):
              (1)ImageView:头像
              (2)EditText:账号输入框
              (3)EditText:密码输入框
              (4)RelativeLayout(相对布局)
                   左边:CheckBox:记住密码
                   右边:CheckBox:自动登录
              (5)Button:登录按钮

实际效果

这里写图片描述

丑是丑了点,,但是不要介意

布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    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="wlhwh.example.com.study20161224login_example.MainActivity"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/login_avatar"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/avatar"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="48dp"/>

    <EditText
        android:id="@+id/login_id"
        android:layout_width="320dp"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="48dp"
        android:paddingLeft="8dp"
        android:background="@color/colorLoginEditText"
        android:hint="@string/textlogin_id"/>
    <EditText
        android:id="@+id/login_password"
        android:layout_width="320dp"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="16dp"
        android:paddingLeft="8dp"
        android:background="@color/colorLoginEditText"
        android:hint="@string/textlogin_password"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="16dp">

        <CheckBox
            android:id="@+id/login_rememberpassword"
            android:layout_width="100dp"
            android:layout_height="32dp"
            android:text="@string/rememberpassword"/>
        <CheckBox
            android:id="@+id/login_autologin"
            android:layout_width="100dp"
            android:layout_height="32dp"
            android:text="@string/autologin"
            android:layout_alignParentRight="true"/>
    </RelativeLayout>

    <Button
        android:id="@+id/login_button"
        android:layout_width="320dp"
        android:layout_height="60dp"
        android:background="@drawable/shape"
        android:text="@string/text_loginbutton"
        android:textSize="20dp"
        android:textColor="@color/colorlogin_text"/>
</LinearLayout>

代码就不必多说了,唯一要注意的是Button

    <Button
        android:id="@+id/login_button"
        android:layout_width="320dp"
        android:layout_height="60dp"
        android:background="@drawable/shape"
        android:text="@string/text_loginbutton"
        android:textSize="20dp"
        android:textColor="@color/colorlogin_text"/>

Button里面有一个background属性,在drawable里面的shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    //设置圆角
    <corners android:radius="10dp" />
     //设置button的颜色
    <solid android:color="@color/colorlogin_button"/>
     //设置button的大小
    <size
        android:height="60dp"
        android:width="320dp" />
    //设置button的内边距
    <padding android:left="5dp"
        android:right="5dp"
        android:top="5dp"
        android:bottom="5dp"/>

</shape>

布局就差不多了,下面接着来看业务代码

MainActivity.java

package wlhwh.example.com.study20161224login_example;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {

    private EditText id_login;
    private EditText password_login;
    private ImageView avatar_login;
    private CheckBox rememberpassword_login;
    private CheckBox auto_login;
    private Button button_login;
    private SharedPreferences sp;
    private String idvalue;
    private String passwordvalue;
    private static final int PASSWORD_MIWEN = 0x81;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        sp = this.getSharedPreferences("userInfo", Context.MODE_WORLD_READABLE);
        //找到相应的布局及控件
        setContentView(R.layout.activity_main);
        id_login=(EditText) findViewById(R.id.login_id);
        password_login=(EditText) findViewById(R.id.login_password);
        avatar_login=(ImageView) findViewById(R.id.login_avatar);
        rememberpassword_login=(CheckBox) findViewById(R.id.login_rememberpassword);
        auto_login=(CheckBox) findViewById(R.id.login_autologin);
        button_login=(Button) findViewById(R.id.login_button);

        if (sp.getBoolean("ischeck",false)){
            rememberpassword_login.setChecked(true);
            id_login.setText(sp.getString("PHONEEDIT",""));
            password_login.setText(sp.getString("PASSWORD",""));
            //密文密码
            password_login.setInputType(PASSWORD_MIWEN);
            if (sp.getBoolean("auto_ischeck",false)){
                auto_login.setChecked(true);
                Intent intent = new Intent(MainActivity.this,SecondActivity.class);
                startActivity(intent);
            }
        }

        button_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                id_login.getPaint().setFlags(0);
                idvalue=id_login.getText().toString();
                password_login.getPaint().setFlags(0);
                passwordvalue=password_login.getText().toString();


                if (idvalue.equals("18428377130")&&passwordvalue.equals("1234567890")){
                    if (rememberpassword_login.isChecked()){
                        SharedPreferences.Editor editor=sp.edit();
                        editor.putString("PHONEEDIT",idvalue);
                        editor.putString("PASSWORD",passwordvalue);
                        editor.commit();
                    }
                    Intent intent = new Intent(MainActivity.this,SecondActivity.class);
                    startActivity(intent);
                    finish();
                }else{
                    Toast.makeText(MainActivity.this, "手机号码或密码错误,请重新登录", Toast.LENGTH_SHORT).show();
                }
            }
        });

        rememberpassword_login.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (rememberpassword_login.isChecked()){
                    System.out.println("记住密码已选中");
                    sp.edit().putBoolean("ischeck",true).commit();
                }
                else {
                    System.out.println("记住密码没有选中");
                    sp.edit().putBoolean("ischeck",false).commit();
                }
            }
        });

        auto_login.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (auto_login.isChecked()){
                    System.out.println("自动登录已选中");
                    sp.edit().putBoolean("auto_ischeck",true).commit();
                }else {
                    System.out.println("自动登录没有选中");
                    sp.edit().putBoolean("auto_ischeck",false).commit();
                }
            }
        });
    }

}

最后是效果图

这里写图片描述

这里写图片描述

接受指正,谢谢

2017-09-29 16:41:29 iwanghang 阅读数 7254
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/78135304

觉得博文有用,请点赞,请评论,请关注,谢谢!~


这篇文章是个笔记~~


老规矩,先上GIF动态图,看个效果,如果符合你的项目或者确定你要了解的内容,再往下看吧:



项目下载:http://download.csdn.net/download/iwanghang/10002250


工程结构:


MainActivity:

package com.wh.phonelogindemo;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    private ImageView mImg_Background;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mImg_Background = (ImageView) findViewById(R.id.de_img_backgroud);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_anim);
                mImg_Background.startAnimation(animation);
            }
        }, 200);
    }
}
translate_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator">
    <translate
        android:duration="20000"
        android:fromXDelta="-500"
        android:fromYDelta="0"
        android:repeatCount="1000"
        android:repeatMode="reverse"
        android:toXDelta="0"
        android:toYDelta="0">
    </translate>
    <alpha

        android:duration="20000"
        android:fromAlpha="1.0"
        android:repeatCount="1000"
        android:repeatMode="reverse"
        android:toAlpha="0.9" />
</set>

项目下载:http://download.csdn.net/download/iwanghang/10002250


转载请注明出处:http://blog.csdn.net/iwanghang/article/details/78135304




欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android,请与我联系
联系方式

微信:iwanghang
QQ:413711276
邮箱:iwanghang@qq.com



觉得博文有用,请点赞,请评论,请关注,谢谢!~


2019-05-20 15:41:19 Wendy__Xu 阅读数 16397

使用Android Studio 编写的第一个demo,使用布局文件—xml实现用户登录界面

注:所建工程均为Android 6.0  所以只要是Android 6.0(包括6.0)以上的真机,模拟机都可以使用

Step1:Android Studio 开发环境的搭建:

1.安装JDK (1.8);
2.安装Android studio (3.3.1) 包含 gradle、sdk manage 、avd manage ;
3.使用sdk manage 下载安装 sdk;
4.使用avd manages 创建虚拟机

Step2: 新建工程项目Myapp2.0

在这里插入图片描述

LoginDemo

1.在res/layout/activity_main.xml中编写布局内容:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingLeft="55px"
    android:paddingRight="50px"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Hello Word!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <View
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_marginTop="16px"
        android:background="#000000" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="28dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20px"
        android:text="登陆界面" />
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <EditText
        android:id="@+id/et1"
        android:layout_width="280dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:paddingLeft="10dp"
        android:hint="请输入账号"
        android:inputType="text"/>
    <ImageView
        android:id="@+id/bt1"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_marginTop="37dp"
        android:src="@drawable/delete" />
</LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="8px">
    <EditText
        android:id="@+id/et2"
        android:layout_width="280dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="26dp"
        android:hint="请输入密码"
        android:inputType="textPassword" />
        <ImageView
            android:id="@+id/bt2"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginTop="33dp"
            android:src="@drawable/delete" />
</LinearLayout>
        <Button
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/bbutton_danger_disabled_edge"
            android:layout_marginTop="30dp"
            android:text="登  陆"
            android:textSize="30dp"
            android:textColor="@color/bbutton_danger"/>
    <Button
    android:id="@+id/bbt1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="15dp"
    android:layout_gravity="right"
    android:layout_marginTop="20px"
    android:background="@color/bbutton_danger"
    android:text="Adapter" />
    </LinearLayout> 

2.创建一个Java class —ExitTextUtils用于封装清空输入框的内容 :

/**
 * 用于实现点击叉叉时  ,  清空输入框的内容
 */

 class EditTextUtils {

    public static void clearButtonListener(final EditText et, final View view) {

        // 取得et中的文字

        String etInputString = et.getText().toString();

        // 根据et中是否有文字进行X可见或不可见的判断

        if (TextUtils.isEmpty(etInputString)) {

            view.setVisibility(View.INVISIBLE);
        } else {

            view.setVisibility(View.VISIBLE);
        }

        //点击X时使et中的内容为空

        view.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                et.setText("");
                et.requestFocusFromTouch();
            }
        });
        //对et的输入状态进行监听
        et.addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }
            @Override
            public void afterTextChanged(Editable s) {

                if (s.length() == 0) {
                    view.setVisibility(View.INVISIBLE);
                } else {
                    view.setVisibility(View.VISIBLE);
                }
            }
        });
    }
}

3.在MainActivity.java 里书写代码:

private TextView mTextMessage;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    EditText et1 = (EditText) findViewById(R.id.et1);
    EditText et2 = (EditText) findViewById(R.id.et2);
    View bt = findViewById(R.id.bt1);
    View iv = findViewById(R.id.bt2);
    EditTextUtils.clearButtonListener(et1, bt);
    EditTextUtils.clearButtonListener(et2, iv);

    Button btn1 = (Button) findViewById(R.id.bbt1);
    btn1.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            //Intent是一种运行时绑定(run-time binding)机制,它能在程序运行过程中连接两个不同的组件,在存放资源代码的文件夹下下,
            Intent i = new Intent(MainActivity.this , Main2ActivityAdapterDemo.class);
            //启动
            startActivity(i);
            }
    });

    mTextMessage = (TextView) findViewById(R.id.message);
    BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}

4.布局使用到的资源:

自己建的用于存放自定义的文件 dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="text_size_16">22dp</dimen>
    <dimen name="space_8">8</dimen>
    <dimen name="space_16">16</dimen>
    <dimen name="fab_margin">16dp</dimen>
</resources>

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="main_gray">#CCCCCC</color>
    <color name="main_black">#000000</color>
    <color name="bbutton_danger_disabled_edge">#00CC33</color>
    <color name="bbutton_danger">#FFFFFF</color>
</resources>

截图

Step3:运行程序。。。截图如下:

在这里插入图片描述

**

下载地址:[LoginDemo.zip]

**(https://download.csdn.net/download/wendy__xu/11189669)

2013-07-31 23:13:05 stephenzcl 阅读数 32138

  在网上在到一个登录界面感觉挺不错的,给大家分享一下~先看效果图:


  这个Demo除了按钮、小猫和Logo是图片素材之外,其余的UI都是通过代码实现的。


  一、背景

  背景蓝色渐变,是通过一个xml文件来设置的。代码如下:

  background_login.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<gradient 
		android:startColor="#FFACDAE5"
		android:endColor="#FF72CAE1"
		android:angle="45"
	/>
</shape>

  startColor是渐变开始的颜色值,endColor是渐变结束的颜色值,angle是渐变的角度。其中#FFACDAE5中,FF是Alpha值,AC是RGB的R值,DA是RGB的G值,E5是RGB的B值,每个值在00~FF取值,即透明度、红、绿、蓝有0~255的分值,像要设置具体的颜色,可以在PS上的取色器上查看设置。

  

  二、圆角白框

  效果图上面的并不是白框,其实框是白色的,只是设置了透明值,也是靠一个xml文件实现的。

  background_login_div.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<solid android:color="#55FFFFFF" />
	<!-- 设置圆角
	注意:	bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角-->
	<corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
		android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/>
</shape>


  三、界面的布局

  界面的布局挺简单的,就直接贴代码啦~

  login.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background_login">
    <!-- padding 内边距   layout_margin 外边距
  		android:layout_alignParentTop 布局的位置是否处于顶部 -->
  		
  	<RelativeLayout 
  	    android:id="@+id/login_div"
  	    android:layout_width="fill_parent"
  		android:layout_height="wrap_content"
  		android:padding="15dip"        
	  	android:layout_margin="15dip" 
	  	android:background="@drawable/background_login_div_bg" >
  		<!-- 账号 -->
	  	<TextView 
	  		android:id="@+id/login_user_input"
	  		android:layout_width="wrap_content"
	  		android:layout_height="wrap_content"
	  		android:layout_alignParentTop="true"
	  		android:layout_marginTop="5dp"
	  		android:text="@string/login_label_username"
	  		style="@style/normalText"/>
	  	<EditText 
	  		android:id="@+id/username_edit"
	  		android:layout_width="fill_parent"
	  		android:layout_height="wrap_content"
	  		android:hint="@string/login_username_hint"
	  		android:layout_below="@id/login_user_input"
	  		android:singleLine="true"
	  		android:inputType="text"/>
	    <!-- 密码 text -->
	    <TextView 
	    	android:id="@+id/login_password_input"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:layout_below="@id/username_edit"
	    	android:layout_marginTop="3dp"
	    	android:text="@string/login_label_password"
	    	style="@style/normalText"/>
	    <EditText 
	    	android:id="@+id/password_edit"
	    	android:layout_width="fill_parent"
	    	android:layout_height="wrap_content"
	    	android:layout_below="@id/login_password_input"
	    	android:password="true"
	    	android:singleLine="true"
	    	android:inputType="textPassword" />
	    <!-- 登录button -->
	    <Button 
	    	android:id="@+id/signin_button"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:layout_below="@id/password_edit"
	    	android:layout_alignRight="@id/password_edit"
	    	android:text="@string/login_label_signin"
	    	android:background="@drawable/blue_button" />
  	</RelativeLayout>
  
  	<RelativeLayout 
      	android:layout_width="fill_parent"
      	android:layout_height="wrap_content" >
		 <TextView  android:id="@+id/register_link"
		     android:text="@string/login_register_link"
		     android:layout_width="wrap_content"
		     android:layout_height="wrap_content"
		     android:layout_marginLeft="15dp"
		     android:textColor="#888"
		     android:textColorLink="#FF0066CC" />
		<ImageView android:id="@+id/miniTwitter_logo"
		    android:src="@drawable/cat"
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:layout_alignParentRight="true"
		    android:layout_alignParentBottom="true"
		    android:layout_marginRight="25dp"
		    android:layout_marginLeft="10dp"
		    android:layout_marginBottom="25dp" />
		<ImageView android:src="@drawable/logo"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_toLeftOf="@id/miniTwitter_logo"
			android:layout_alignBottom="@id/miniTwitter_logo"
			android:paddingBottom="8dp"/>
  	</RelativeLayout>
</LinearLayout>


  四、Java源文件

  Java源文件比较简单,只是实例化Activity,去掉标题栏。

package com.mytwitter.acitivity;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;

public class LoginActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.login);
    }
}


  在开发APP的时候,需要设计登录界面的可以以此作为参考哦!

  谢谢大家的支持!以前一直要大家留邮箱发代码实在太麻烦了,所以Shamoo把代码上传到资源。链接:点击打开链接

  需要一分资源分,大家评论一下那一分就还回来了,别恨我,哈哈~~

Android登录界面实现

阅读数 1391

最全android Demo

阅读数 6745