Android端：从引导页到注册（二）

（二）登陆页

下面来要做的就是登陆页面的实现了，废话不多说先上效果图。

下载.jpg

下载 (1).jpg

image.png

好了，基本上实现的就是上述的三个界面了以及实现相应的功能，
首先是布局界面界面activity_login，当然了我这里的登陆界面的启动模式我设置的是singleTop。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:orientation="vertical"
        android:paddingLeft="18dp"
        android:paddingRight="18dp"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="QQ"
            android:textSize="35sp"
            android:textColor="#FFFFFF"
            />
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="50dp"
         android:orientation="horizontal"
         >
         <EditText
             android:id="@+id/login_name"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="7"
             android:hint="请输入用户名"
             android:textColor="#FFFFFF"
             android:textColorHint="#FFFFFF"
             android:paddingLeft="10dp"
             android:textSize="18sp"
             android:background="@drawable/login_edit"
             android:layout_marginTop="15dp"
             android:inputType="number"
             android:maxLines="1"
             android:maxLength="18"
             />
          <TextView
              android:id="@+id/login_right_name_clear"
              android:layout_width="0dp"
              android:layout_height="match_parent"
              android:layout_weight="1"
              android:text="X"
              android:textColor="#FFFFFF"
              android:textSize="20sp"
              android:visibility="invisible"
              android:gravity="center_vertical|center_horizontal"
              android:paddingTop="15dp"

              />

     </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.2dp"
            android:background="#FFFFFF"

            />
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="50dp"
         android:orientation="horizontal"
         >
         <EditText
             android:id="@+id/login_pass"
             android:layout_width="0dp"
             android:layout_height="50dp"
             android:layout_weight="5"
             android:hint="请输入密码"
             android:textColor="#FFFFFF"
             android:textColorHint="#FFFFFF"
             android:paddingLeft="10sp"
             android:textSize="18sp"
             android:background="@drawable/login_edit"
             android:inputType="textPassword"
             android:maxLines="1"
             android:maxLength="18"
             />
         <TextView
             android:id="@+id/login_right_pass_clear"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:text="X"
             android:textColor="#FFFFFF"
             android:textSize="20sp"
             android:gravity="center_vertical|center_horizontal"
             android:paddingTop="15dp"
             android:visibility="invisible"
             />
         <TextView
             android:id="@+id/login_right_displaypass"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1"
             android:text="#"
             android:textColor="#FFFFFF"
             android:textSize="20sp"
             android:visibility="invisible"
             android:gravity="center_vertical|center_horizontal"
             android:paddingTop="15dp"
             />
     </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0.2dp"
            android:background="#FFFFFF"
            />

        <Button
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:text="登陆"
            android:textColor="#FFFFFF"
            android:textSize="18sp"
            android:layout_marginTop="20dp"
            android:background="@drawable/button"
            />
     <RelativeLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="10dp"
         >
         <TextView
             android:id="@+id/login_forget_pass"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="忘记密码?"
             android:textSize="16sp"
             android:textColor="#6495ED"
             />
         <TextView
             android:id="@+id/login_zc"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentRight="true"
             android:text="新用户注册"
             android:textColor="#6495ED"
             android:textSize="16sp"
             />
     </RelativeLayout>

    </LinearLayout>

父标签我这里用的是相对布局，其实这都无所谓了，父标签只不过是设置一下背景图片而已，所以线性和相对都可以。下面就是去掉输入框的边框线，在drawable目录下新建login_edit.xml 设置边框线的颜色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#00FFFFFF"/>
   <stroke android:color="#00FFFFFF" android:width="0dp"/>
</shape>

下面是主要代码。


public class LoginActivity extends BaseActivity {

    private TextView login_zc;
    private EditText login_name;
    private EditText login_pass;
    private TextView login_right_name_clear;
    private TextView login_right_pass_clear;
    private TextView login_right_displaypass;
    private TextView login_forget_pass;
    private Dialog dialog;
    private View inflate;
    private TextView forgetPass;
    private TextView dxLogin;
    private TextView seting_bottom_ok;
    Boolean passNew=true;
    Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    String name = login_name.getText().toString();
                    if (name.equals("")||name==null){

                        login_right_name_clear.setVisibility(View.INVISIBLE);
                    }else{
                        login_right_name_clear.setVisibility(View.VISIBLE);
                    }
                    break;
                case 1:
                    String pass = login_pass.getText().toString();
                    if (pass.equals("")||pass==null){

                        login_right_pass_clear.setVisibility(View.INVISIBLE);
                    }else{
                        login_right_pass_clear.setVisibility(View.VISIBLE);
                    }
                    break;
            }
        }
    };

    Timer timerName;
    TimerTask taskName;

    Timer timerPass;
    TimerTask taskPass;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        init();
    }

    public void init(){
        //注册按钮
        login_zc = (TextView)findViewById(R.id.login_zc);
        //用户名输入框
        login_name = (EditText)findViewById(R.id.login_name);
        //密码输入框
        login_pass = (EditText)findViewById(R.id.login_pass);
        //用户名右边清除输入内容按钮
        login_right_name_clear = (TextView)findViewById(R.id.login_right_name_clear);
        //密码右边清除输入内容按钮
        login_right_pass_clear = (TextView)findViewById(R.id.login_right_pass_clear);
        //密码右边显示与隐藏密文按钮
        login_right_displaypass = (TextView)findViewById(R.id.login_right_displaypass);
        //忘记密码
        login_forget_pass = (TextView)findViewById(R.id.login_forget_pass);

        login_zc.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(LoginActivity.this,NewUserActivity.class);
                startActivity(intent);
            }
        });
        //用户名获得焦点事件
        login_name.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus){
                      timerName = new Timer();
                      taskName = new TimerTask() {
                        @Override
                        public void run() {
                            Message msg = new Message();
                            msg.what=0;
                            handler.sendMessage(msg);
                        }
                    };
                    login_right_name_clear.setVisibility(View.INVISIBLE);
                    timerName.schedule(taskName,0,100);
                }else{
                    timerName.cancel();
                    login_right_name_clear.setVisibility(View.INVISIBLE);
                }
            }
        });
        //密码输入框获得焦点事件
        login_pass.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus){
                      timerPass = new Timer();
                      taskPass = new TimerTask() {
                        @Override
                        public void run() {
                            Message msg = new Message();
                            msg.what=1;
                            handler.sendMessage(msg);
                        }
                    };
                    login_right_displaypass.setVisibility(View.VISIBLE);
                    login_right_pass_clear.setVisibility(View.INVISIBLE);
                    timerPass.schedule(taskPass,0,100);
                }else{
                    timerPass.cancel();
                    login_right_pass_clear.setVisibility(View.INVISIBLE);
                    login_right_displaypass.setVisibility(View.INVISIBLE);
                }
            }
        });
        //用户名输入框右边按钮点击事件清除输入框里面的内容
        login_right_name_clear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                login_name.setText("");
            }
        });
        //密码输入框右边按钮点击事件清除输入框里面的内容
        login_right_pass_clear.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                login_pass.setText("");
            }
        });
        login_right_displaypass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (passNew==true){
                    login_pass.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                    passNew=false;
                }else{
                    login_pass.setTransformationMethod(PasswordTransformationMethod.getInstance());
                    passNew=true;
                }
            }
        });

        login_forget_pass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showDialog();
            }
        });

    }

    private void showDialog() {
        dialog = new Dialog(this, R.style.ActionSheetDialogStyle);
        //填充对话框的布局
        inflate = LayoutInflater.from(this).inflate(R.layout.forget_pass_dailog, null);

        //将布局设置给Dialog
        dialog.setContentView(inflate);
        //获取当前Activity所在的窗体
        Window dialogWindow = dialog.getWindow();
        //设置Dialog从窗体底部弹出
        dialogWindow.setGravity(Gravity.BOTTOM);
        //获得窗体的属性
        WindowManager.LayoutParams lp = dialogWindow.getAttributes();
        lp.y = 20;//设置Dialog距离底部的距离
//       将属性设置给窗体
        dialogWindow.setAttributes(lp);
        dialog.show();//显示对话框
        setbtnOk();

    }
    private void setbtnOk() {
        forgetPass = (TextView) inflate.findViewById(R.id.forget_pass);
        dxLogin = (TextView) inflate.findViewById(R.id.dxLogin);
        seting_bottom_ok = (TextView) inflate.findViewById(R.id.seting_bottom_ok);
        forgetPass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String name = login_name.getText().toString();
                Intent intent = new Intent(LoginActivity.this,Forget_Pass_Activity.class);
                intent.putExtra("Loginphone",name);
                startActivity(intent);
                dialog.dismiss();

            }
        });

        dxLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(LoginActivity.this,"我是短信验证登陆",Toast.LENGTH_SHORT).show();
                dialog.dismiss();
            }
        });

        seting_bottom_ok.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        timerName.cancel();
        timerPass.cancel();
    }
}

点击忘记密码时，弹出的底部弹框，需要在styles.xml文件下添加如下代码

<style name="ActionSheetDialogStyle" parent="@android:style/Theme.Dialog">

        <!-- 背景透明 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <!-- 浮于Activity之上 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 边框 -->
        <item name="android:windowFrame">@null</item>
        <!-- Dialog以外的区域模糊效果 -->
        <item name="android:backgroundDimEnabled">true</item>
        <!-- 无标题 -->
        <item name="android:windowNoTitle">true</item>
        <!-- 半透明 -->
        <item name="android:windowIsTranslucent">true</item>
        <!-- Dialog进入及退出动画 -->
        <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item>
    </style>

    <style name="ActionSheetDialogAnimation" parent="android:Animation">
        <item name="@android:windowEnterAnimation">@anim/dialog_enter</item>
        <item name="@android:windowExitAnimation">@anim/dialog_exit</item>
    </style>

设置弹框的显示区域，并且还需要在res目录下新建anim目录，在此目录下新建dialog_enter.xml和dialog_exit.xml两个文件，用来设置底部弹框的显示动画。

dialog_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="200"
        android:fromYDelta="100%"
        android:toYDelta="0" />
</set>

dialog_exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="200"
        android:fromYDelta="0"
        android:toYDelta="100%" />
</set>

最后需要新建一个弹框的模板forget_pass_dailog.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/forget_pass_diolog_bk"
    android:orientation="vertical"
    >
    <TextView
        android:id="@+id/forget_pass"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="2dp"
        android:gravity="center"
        android:text="找回密码"
        android:textColor="#1E90FF"
        android:textSize="15sp"
        android:textStyle="bold" />
    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#809e9e9e"
        />
    <TextView
        android:id="@+id/dxLogin"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="2dp"
        android:gravity="center"
        android:text="短信验证登陆"
        android:textColor="#1E90FF"
        android:textSize="15sp"
        android:textStyle="bold" />
</LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        />
    <TextView
        android:id="@+id/seting_bottom_ok"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="2dp"
        android:gravity="center"
        android:text="取消"
        android:textColor="#1E90FF"
        android:textSize="15sp"
        android:background="@drawable/forget_pass_diolog_bk"
        android:textStyle="bold" />

接下来新建一个注册用户的界面命名为NewUserActivity，界面代码如下

activity_new_user.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:background="#FFFFFF"
    android:orientation="vertical"
    tools:context="com.example.mywang.qqproject.activity.NewUserActivity">
    <TextView
        android:layout_width="100dp"
        android:layout_height="5dp"
        android:background="#6495ED"
        />

        <ImageView
            android:id="@+id/new_user_return"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/rt"
            android:layout_marginTop="20dp"
            />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="输入手机号码"
            android:textSize="35sp"
            android:textColor="#000000"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="注册即代表阅读并同意"
                android:textSize="15sp"
                />
            <TextView
                android:id="@+id/newUserTK"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="使用条款"
                android:textSize="15sp"
                android:textColor="#6495ED"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="和"
                android:textSize="15sp"
                />
            <TextView
                android:id="@+id/newUserZC"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="隐私政策"
                android:textSize="15sp"
                android:textColor="#6495ED"
                />

        </LinearLayout>
        <LinearLayout
            android:id="@+id/new_user_city_list"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="15dp"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:text="城市/地区"
                android:gravity="center_vertical|right"
                android:textSize="20sp"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                />
            <TextView
                android:id="@+id/new_user_city"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="北京"
                android:layout_weight="4"
                android:gravity="center_vertical"
                android:textColor="#000000"
                android:textSize="20sp"
                />
            <ImageView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@mipmap/right_coumnty"
                />
        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#50000000"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:text="+86"
                android:textSize="20sp"
                android:gravity="center_vertical|right"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                />
            <EditText
                android:id="@+id/new_user_Phone"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="4"
                android:background="@drawable/new_user_edit"
                android:textColor="#000000"
                android:maxLines="1"
                android:textSize="20sp"
                android:inputType="number"
                android:maxLength="18"
                />
            <ImageView
                android:id="@+id/new_user_clear"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:visibility="invisible"
                android:src="@mipmap/clear_phone"
                />
        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#50000000"
            />

    </LinearLayout>

    <Button
        android:id="@+id/new_user_next_btn"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:text="下一步"
        android:enabled="false"
        android:background="@drawable/new_user_btn_gray"
        android:textSize="20sp"
        android:textColor="#A3A3A3"
        />

</LinearLayout>

还需要在drawable目录下新建一个样式文件来调节注册界面的输入手机号按钮。
new_user_edit.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke android:color="#FFFFFF" android:width="1dp"/>
    <solid android:color="#FFFFFF"/>
</shape>

最后编辑于：2018.11.22 15:58:54

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,732评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,496评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,264评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,807评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,806评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,675评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,029评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,683评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 41,704评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,666评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,773评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,413评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,016评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,204评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,083评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,503评论 2赞 343

Android端：从引导页到注册（二）

（二）登陆页

推荐阅读更多精彩内容