摘要:今天是团队项目KeepRunning-APP正式开始的第一天,作为团队的一员,当然少不了为团队分担任务,第一阶段我分配到的任务是完成APP启动页(通过滑动图片的形式展示),还有就是用户的登录注册。其中注册需要完成用户自定义头像的功能(可以从本地获取,或者直接拍照)。今天主要完成了启动页的设计,以及登录注册的UI设计,启动页比较容易实现,但是在做UI设计的时候由于追求美观程度,所以浪费了很多时间,由于涉及的xml布局文件较多,所以下面主要展示效果图和部分代码。
一、启动页
主要通过PagerAdapter适配器实现

package com.begin; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.viewpager.widget.PagerAdapter; import java.util.ArrayList; import java.util.List; public class MyPager extends PagerAdapter { //定义一个视图列表 private List<View> viewList = new ArrayList<View>(); //构造方法 public MyPager() { } public MyPager(List<View> viewList) { this.viewList = viewList; } //初始化指定位置的页面 @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { //将页面加入到容器中 container.addView(viewList.get(position)); return viewList.get(position); } //销毁指定位置的页面 @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView(viewList.get(position)); } //显示多少个页面 @Override public int getCount() { return viewList.size(); } //判断返回的view是否为object @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view == object; } }

package com.begin; import android.content.Intent; import android.os.Bundle; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.widget.Button; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import com.example.keeprunning1.R; import com.login.LoginActivity; import com.register.RegisterActivity; import java.util.ArrayList; import java.util.List; public class BeginActivity extends AppCompatActivity { //定义相关属性 private ViewPager myview; private View view1, view2, view3; private Button btn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.begin); //获取viewpager对象 myview = (ViewPager) findViewById(R.id.my_view); //获取3个启动页面 //layoutInflater将布局文件.xml转换成view对象 LayoutInflater layoutInflater = getLayoutInflater(); view1 = layoutInflater.inflate(R.layout.begin_one, null); view2 = layoutInflater.inflate(R.layout.begin_two, null); view3 = layoutInflater.inflate(R.layout.begin_three, null); //创建视图列表 List<View> viewList = new ArrayList<View>(); viewList.add(view1); viewList.add(view2); viewList.add(view3); //创建适配器 MyPager myPager = new MyPager(viewList); //设置适配器 myview.setAdapter(myPager); //获得view3中的button btn = view3.findViewById(R.id.button); btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String n = "111"; Log.d("volley", n); Intent intent = new Intent(BeginActivity.this, RegisterActivity.class); startActivity(intent); finish(); } }); } }
图片仅供测试,后期会根据APP特点设计图片
二、页面布局

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.login.LoginActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/bg_login" android:orientation="vertical"> <!-- <!– 顶部–>--> <!-- <include--> <!-- android:id="@+id/login_top"--> <!-- layout="@layout/login_top" />--> <!-- logo--> <ImageView android:id="@+id/login_logo" android:layout_width="150dp" android:layout_height="150dp" android:layout_gravity="center_horizontal" android:layout_marginTop="50dp" android:background="@mipmap/logo" android:contentDescription="@null" android:scaleType="centerInside" /> <!--用户输入登录信息--> <LinearLayout android:id="@+id/l_login_username" android:layout_width="match_parent" android:layout_height="52dp" android:layout_marginLeft="24dp" android:layout_marginTop="32dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_input_ok" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/iv_login_username_icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="14dp" android:layout_marginRight="14dp" app:srcCompat="@mipmap/ic_login_username" /> <View android:layout_width="1px" android:layout_height="22dp" android:background="#dededf" /> <EditText android:id="@+id/et_login_username" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_weight="1" android:background="@null" android:ems="15" android:focusable="true" android:hint="用户名" android:imeOptions="actionDone" android:inputType="textPhonetic" android:lines="1" android:maxLines="1" android:minLines="1" android:paddingLeft="4dp" android:paddingRight="4dp" android:textColor="#FFFFFF" android:textColorHint="#dededf" android:textCursorDrawable="@null" android:textSize="16dp" /> <ImageView android:id="@+id/iv_login_username_del" android:layout_width="40dp" android:layout_height="20dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:contentDescription="@null" android:scaleType="fitCenter" android:visibility="gone" app:srcCompat="@mipmap/ic_clear" /> </LinearLayout> <LinearLayout android:id="@+id/ll_login_pwd" android:layout_width="match_parent" android:layout_height="52dp" android:layout_marginLeft="24dp" android:layout_marginTop="16dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_input_ok" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/iv_login_pwd_icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="14dp" android:layout_marginRight="14dp" android:contentDescription="@null" app:srcCompat="@mipmap/ic_login_password" /> <View android:layout_width="1px" android:layout_height="22dp" android:background="#dededf" /> <EditText android:id="@+id/et_login_pwd" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_weight="1" android:background="@null" android:hint="密码" android:inputType="textPassword" android:maxLines="1" android:minLines="1" android:paddingLeft="4dp" android:paddingRight="4dp" android:textColor="#FFFFFF" android:textColorHint="#dededf" android:textCursorDrawable="@null" android:textSize="16dp" /> <ImageView android:id="@+id/iv_login_pwd_del" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:contentDescription="@null" android:scaleType="fitCenter" android:visibility="gone" app:srcCompat="@mipmap/ic_clear" /> </LinearLayout> <!--提交按钮--> <Button android:id="@+id/bt_login_submit" android:layout_width="match_parent" android:layout_height="48dp" android:layout_marginLeft="24dp" android:layout_marginTop="20dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_submit" android:elevation="0dp" android:outlineProvider="none" android:text="登录" android:textColor="#FFFFFF" android:textSize="18dp" tools:targetApi="lollipop" /> <Button android:id="@+id/bt_login_register" android:layout_width="match_parent" android:layout_height="48dp" android:layout_marginLeft="24dp" android:layout_marginTop="16dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_register" android:elevation="0dp" android:outlineProvider="none" android:text="注册" android:textColor="#FFFFFF" android:textSize="18dp" android:translationZ="0dp" tools:targetApi="lollipop" /> <!--是否记住密码--> <LinearLayout android:layout_width="match_parent" android:layout_height="48dp" android:layout_marginLeft="24dp" android:layout_marginTop="12dp" android:layout_marginRight="24dp" android:gravity="center_vertical" android:orientation="horizontal"> <!-- android:button="@drawable/ic_selector_checkbox" 设置checkbox样式--> <CheckBox android:id="@+id/cb_remember_login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:contentDescription="@null" tools:visibility="visible" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="记住密码" android:textColor="#FFFFFF" android:textSize="16sp" android:visibility="visible" /> <TextView android:id="@+id/tv_login_forget_pwd" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:paddingLeft="4dp" android:paddingTop="4dp" android:paddingBottom="4dp" android:text="忘记密码" android:textColor="#FFFFFF" android:textSize="16sp" tools:ignore="RtlSymmetry" /> </LinearLayout> <Space android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="3" /> </LinearLayout> </LinearLayout>

<?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:id="@+id/lay_register_two_container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/bg_login" android:fitsSystemWindows="true" android:orientation="vertical" tools:context="com.register.RegisterActivity"> <include android:id="@+id/ly_register_bar" layout="@layout/login_top" /> <LinearLayout android:layout_width="match_parent" android:layout_height="150dp" android:orientation="horizontal"> <ImageView android:id="@+id/user_picture" android:layout_width="100dp" android:layout_height="100dp" android:layout_marginLeft="20dp" android:layout_marginTop="40dp" android:scaleType="fitXY" android:src="@mipmap/mjl" /> <Button android:id="@+id/choose_from_album" android:layout_width="120dp" android:layout_height="48dp" android:layout_marginLeft="24dp" android:layout_marginTop="80dp" android:background="@drawable/bg_login_submit_lock" android:elevation="0dp" android:outlineProvider="none" android:text="选择头像" android:textColor="#FF68997C" android:textSize="18dp" android:translationZ="0dp" tools:targetApi="lollipop" /> </LinearLayout> <LinearLayout android:id="@+id/ll_register_two_username" android:layout_width="match_parent" android:layout_height="56dp" android:layout_marginLeft="24dp" android:layout_marginTop="48dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_input_ok" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/iv_register_username_icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="14dp" android:contentDescription="@null" app:srcCompat="@mipmap/ic_login_username" tools:ignore="RtlHardcoded" /> <View android:layout_width="1px" android:layout_height="24dp" android:layout_marginLeft="14dp" android:layout_marginRight="14dp" android:background="#dededf" /> <EditText android:id="@+id/et_register_username" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@null" android:hint="用户名" android:inputType="text" android:maxLines="1" android:minLines="1" android:paddingLeft="4dp" android:paddingRight="4dp" android:textColor="#FFFFFF" android:textColorHint="#dededf" android:textCursorDrawable="@null" android:textSize="16dp" /> <ImageView android:id="@+id/iv_register_username_del" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:contentDescription="@null" android:scaleType="fitCenter" android:visibility="gone" app:srcCompat="@mipmap/ic_clear" /> </LinearLayout> <LinearLayout android:id="@+id/ll_register_two_pwd" android:layout_width="match_parent" android:layout_height="56dp" android:layout_marginLeft="24dp" android:layout_marginTop="28dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_input_ok" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/iv_register_pwd_icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="14dp" android:layout_marginRight="14dp" android:contentDescription="@null" app:srcCompat="@mipmap/ic_login_password" /> <View android:layout_width="1px" android:layout_height="24dp" android:background="#dededf" /> <EditText android:id="@+id/et_register_pwd_input" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_weight="1" android:background="@null" android:hint="请输入至少六位数密码" android:inputType="textPassword" android:maxLines="1" android:minLines="1" android:paddingLeft="4dp" android:paddingRight="4dp" android:textColor="#FFFFFF" android:textColorHint="#dededf" android:textCursorDrawable="@null" android:textSize="16dp" /> <ImageView android:id="@+id/iv_register_pwd_del" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:contentDescription="@null" android:scaleType="fitCenter" android:visibility="gone" app:srcCompat="@mipmap/ic_clear" /> </LinearLayout> <LinearLayout android:id="@+id/ll_register_three_pwd" android:layout_width="match_parent" android:layout_height="56dp" android:layout_marginLeft="24dp" android:layout_marginTop="28dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_input_ok" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/iv_register_pwds_icon" android:layout_width="24dp" android:layout_height="24dp" android:layout_marginLeft="14dp" android:layout_marginRight="14dp" android:contentDescription="@null" app:srcCompat="@mipmap/ic_login_password" /> <View android:layout_width="1px" android:layout_height="24dp" android:background="#dededf" /> <EditText android:id="@+id/et_register_pwds_input" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_weight="1" android:background="@null" android:hint="确认密码" android:inputType="textPassword" android:maxLines="1" android:minLines="1" android:paddingLeft="4dp" android:paddingRight="4dp" android:textColor="#FFFFFF" android:textColorHint="#dededf" android:textCursorDrawable="@null" android:textSize="16dp" /> <ImageView android:id="@+id/iv_register_pwds_del" android:layout_width="20dp" android:layout_height="20dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:contentDescription="@null" android:scaleType="fitCenter" android:visibility="gone" app:srcCompat="@mipmap/ic_clear" /> </LinearLayout> <Button android:id="@+id/bt_register_submit" android:layout_width="match_parent" android:layout_height="48dp" android:layout_marginLeft="24dp" android:layout_marginTop="50dp" android:layout_marginRight="24dp" android:background="@drawable/bg_login_submit_lock" android:elevation="0dp" android:outlineProvider="none" android:text="确认" android:textColor="#FF68997C" android:textSize="18dp" android:translationZ="0dp" tools:targetApi="lollipop" /> </LinearLayout>
之后可能会加入第三方登录,如QQ,微信
今天就完成这么多,明天会继续完成注册登录功能