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

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

Android端：从引导页到注册（二）
Android端：从引导页到注册（三）
Android端:从引导页到注册（一）
Android:从引导页到注册（四）
设计精美的移动端Axure【登录页-注册页-弹出页-引导页】&【
以码会友 - 新闻客户端的实现（移动端）
Flutter调用Android Native（一）
Android 引导页
APP完整特效记录(可以忽视)
升级功能改进中的思考

（二）登陆页

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

下载.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端：从引导页到注册（二）
（二）登陆页下面来要做的就是登陆页面的实现了，废话不多说先上效果图。好了，基本上实现的就是上述的三个界面了以及...
Android端：从引导页到注册（三）
（三）城市列表排序今天要实现的功能是城市列表排序的功能，先上一张效果图。基本上就是上面那样，点击城市地区将会跳...
Android端:从引导页到注册（一）
前言最近公司的项目不是太紧张所以也闲的无聊，只能自己找事做。所以自己就想做一个App算是学习新知识。想来想去最后...
Android:从引导页到注册（四）
（四）短信验证码短信验证码基本上是每个App必备的一个功能了，所以说今天就来记录一下这个功能的实现，这里短信验证...
设计精美的移动端Axure【登录页-注册页-弹出页-引导页】&【
设计精美的移动端Axure【登录页-注册页-弹出页-引导页】&【个人中心页-浏览页-聊天页-列表页】作品类型：移...
以码会友 - 新闻客户端的实现（移动端）
新闻客户端的实现引导页（至少 3 页，推荐 Fragment）注册功能用户名称长度大于等于 3 位，不可含空格...
Flutter调用Android Native（一）
Flutter调用Android原生方法理解 Android端创建渠道和方法完成注册一.Android端代码 ...
Android 引导页
引导页思路1.判断当前系统版本号2.如果与保存版本号不相同启动引导页跳转主页面如果相同等待指定时间跳转启动页创...
APP完整特效记录(可以忽视)
引导页：# Ramotion/paper-onboarding-android 登录页：# fanrunqi/Ma...
升级功能改进中的思考
一、从强制升级到升级引导自家的产品目前iPhone端新版本的覆盖率不错，但Android略低。为了提高后续...

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

（二）登陆页

相关文章

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

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

Android端:从引导页到注册（一）

Android:从引导页到注册（四）

设计精美的移动端Axure【登录页-注册页-弹出页-引导页】&【

以码会友 - 新闻客户端的实现（移动端）

Flutter调用Android Native（一）

Android 引导页

APP完整特效记录(可以忽视)

升级功能改进中的思考

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读