美文网首页
Android端：从引导页到注册（二）

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

作者: 予你挚终_cc3a | 来源:发表于2018-01-22 15:25 被阅读0次

    （二）登陆页

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


    下载.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>

    相关文章

      网友评论

          本文标题：Android端：从引导页到注册（二）

          本文链接：https://www.haomeiwen.com/subject/jtxlaxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Android端：从引导页到注册（二）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！