Let us to make our app
根据昨天的进度,我们已经制作了我们的启动页面,有一个启动页面是不是很有正规app的那个味儿,哈哈哈哈,反正我是这么想的。在做了一个启动页面之后,我们来到了登陆页面。(我的项目编写是根据app启动的过程定的)
我们正常的app的登陆分为两个部分:登陆,注册部分,由于这需要后端方向的支持,我会编写,但是该专题是进行android方面的编写。
转入正题,我们根据需求来定方案:
- 1,我们需要一个登陆界面
- 2,我们需要一个注册界面
- 3,登陆界面需要账号密码输入框,以及跳转注册界面
- 4,注册界面需要账号密码输入框,以及跳转注册界面 5,登陆或注册成功则去进入主界面,否则则会弹出Toast信息。
根据需求,我有两套方案:
方案一:分别设有登陆界面和注册的界面的两个Activity,设置按钮进行跳转。
方案二:利用Fragment和viewPager的结合形成一个Tab实现在同一个Activity进行切换。
我们这里采取第二种方案,方案一简单不够新颖。
我们先进行主要框架的搭建(UI太过粗糙,莫怪莫怪):
我先附上效果图
现在是代码部分:
首先是fragment_login部分:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"tools:context=".Login_frag.LoginFragment"><!-- TODO: Update blank fragment layout --><EditTextandroid:id="@+id/Ex_username"android:layout_width="301dp"android:layout_height="48dp"android:hint="Username"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.852"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.095" /><EditTextandroid:id="@+id/Ex_password"android:layout_width="301dp"android:layout_height="48dp"android:layout_marginTop="36dp"android:hint="Password"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.854"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/Ex_username" /><TextViewandroid:id="@+id/textView5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="84dp"android:text="UserName"app:layout_constraintEnd_toStartOf="@+id/Ex_username"app:layout_constraintHorizontal_bias="0.465"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/textView6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="64dp"android:text="PassWord"app:layout_constraintEnd_toStartOf="@+id/Ex_password"app:layout_constraintHorizontal_bias="0.444"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/textView5" /><Buttonandroid:id="@+id/bt_login"android:layout_width="150dp"android:layout_height="wrap_content"android:layout_marginTop="58dp"android:background="@color/pink"android:text="Login"android:textColor="@color/white"android:textStyle="italic"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/Ex_password"tools:ignore="TextContrastCheck" /><TextViewandroid:id="@+id/textView7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginBottom="36dp"android:text="注意事项"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toStartOf="@+id/textView8"app:layout_constraintHorizontal_bias="0.194"app:layout_constraintStart_toStartOf="parent" /><TextViewandroid:id="@+id/textView8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginEnd="28dp"android:layout_marginBottom="36dp"android:text="用户须知"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
其次是fragment_register部分:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"tools:context=".Login_frag.RegiserFragment"><!-- TODO: Update blank fragment layout --><EditTextandroid:id="@+id/Ex_passworden"android:layout_width="301dp"android:layout_height="48dp"android:layout_marginTop="20dp"android:hint="确认密码"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.854"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/Ex_username" /><EditTextandroid:id="@+id/Ex_password"android:layout_width="301dp"android:layout_height="48dp"android:layout_marginTop="20dp"android:hint="输入密码"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.854"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/Ex_SchoolId" /><EditTextandroid:id="@+id/Ex_username"android:layout_width="301dp"android:layout_height="48dp"android:hint="输入用户名"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.854"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.092" /><EditTextandroid:id="@+id/Ex_SchoolId"android:layout_width="301dp"android:layout_height="48dp"android:hint="输入学号"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.854"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/Ex_passworden"app:layout_constraintVertical_bias="0.029" /><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="76dp"android:text="TextView"app:layout_constraintEnd_toStartOf="@+id/Ex_username"app:layout_constraintHorizontal_bias="0.444"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="44dp"android:text="TextView"app:layout_constraintEnd_toStartOf="@+id/Ex_passworden"app:layout_constraintHorizontal_bias="0.472"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/textView" /><Buttonandroid:id="@+id/bt_Register"android:layout_width="150dp"android:layout_height="wrap_content"android:layout_marginTop="52dp"android:background="@color/pink"android:text="Register"android:textColor="@color/white"android:textStyle="italic"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.498"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/Ex_password" /><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="44dp"android:layout_marginEnd="20dp"android:text="TextView"app:layout_constraintEnd_toStartOf="@+id/Ex_SchoolId"app:layout_constraintHorizontal_bias="1.0"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/textView2" /><TextViewandroid:id="@+id/textView4"android:layout_width="60dp"android:layout_height="16dp"android:layout_marginTop="48dp"android:text="TextView"app:layout_constraintEnd_toStartOf="@+id/Ex_password"app:layout_constraintHorizontal_bias="0.441"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
再就是LoginMainActivity的java文件和xml文件代码:
package com.example.campus_talk;import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;import com.example.campus_talk.Login_frag.LoginFragment;
import com.example.campus_talk.Login_frag.RegiserFragment;
import com.example.campus_talk.menu.MenuActivity;
import com.google.android.material.tabs.TabLayout;import java.util.ArrayList;
import java.util.List;public class LoginActivity extends AppCompatActivity {TabLayout tabLayout;ViewPager viewPager;EditText usernameEdtext;EditText passwordEdtext;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_login);//initView();prepareViewPager(viewPager);}private void prepareViewPager(ViewPager viewPager) {//初始化适配器MainAdapter adapter = new MainAdapter(getSupportFragmentManager());//初始化fragmentLoginFragment loginFragment = new LoginFragment();RegiserFragment regiserFragment = new RegiserFragment();//把title和Fragment绑定放入adapteradapter.addFragment(loginFragment, "Login");adapter.addFragment(regiserFragment, "Register");//viewPager添加适配器viewPager.setAdapter(adapter);//把tablayout添加到viewpagertabLayout.setupWithViewPager(viewPager);}private void initView() {tabLayout = findViewById(R.id.tab_layout);viewPager = findViewById(R.id.view_pager);}private class MainAdapter extends FragmentPagerAdapter {ArrayList<String> list = new ArrayList<>();List<Fragment> fragmentlist = new ArrayList<>();public void addFragment(Fragment fragment, String title) {//add titlelist.add(title);fragmentlist.add(fragment);}public MainAdapter(@NonNull FragmentManager fm) {super(fm);}@NonNull@Overridepublic Fragment getItem(int position) {return fragmentlist.get(position);}@Overridepublic int getCount() {//return fragment sizereturn fragmentlist.size();}@Nullable@Overridepublic CharSequence getPageTitle(int position) {//return array list positionreturn list.get(position);}}}
现在是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:orientation="vertical"tools:context=".LoginActivity">
<com.google.android.material.tabs.TabLayoutandroid:layout_marginTop="150dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/tab_layout"app:tabTextColor="@color/white"app:tabIndicatorColor="@color/white"app:tabSelectedTextColor="@color/pink"android:background="@color/purple_200"/><androidx.viewpager.widget.ViewPagerandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/view_pager"/></LinearLayout>
在Fragment中的部分代码截取:
Login部分
Register部分
以上就是今天的Campus的界面搭建分享,越努力越幸运!!!