Campus Talking 小记(2)

于 2022-04-10 21:35:41 发布
阅读量871 收藏 2
点赞数 2
分类专栏： Campus Talking 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46097862/article/details/124073498
版权
本文介绍了如何在Android应用中使用Fragment和ViewPager实现登录和注册界面的切换，包括界面布局和代码片段，展示了从启动页到登录注册功能的开发过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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 -->

    <EditText
        android: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" />

    <EditText
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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" />


    <Button
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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 -->

    <EditText
        android: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" />

    <EditText
        android: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" />

    <EditText
        android: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" />

    <EditText
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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" />

    <Button
        android: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" />

    <TextView
        android: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" />

    <TextView
        android: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;

    @Override
    protected 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());
        //初始化fragment
        LoginFragment loginFragment = new LoginFragment();
        RegiserFragment regiserFragment = new RegiserFragment();

        //把title和Fragment绑定放入adapter
        adapter.addFragment(loginFragment, "Login");
        adapter.addFragment(regiserFragment, "Register");

        //viewPager添加适配器
        viewPager.setAdapter(adapter);

        //把tablayout添加到viewpager
        tabLayout.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 title
            list.add(title);
            fragmentlist.add(fragment);
        }


        public MainAdapter(@NonNull FragmentManager fm) {
            super(fm);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            return fragmentlist.get(position);
        }

        @Override
        public int getCount() {
            //return fragment size
            return fragmentlist.size();
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            //return array list position
            return 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.TabLayout
    android: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.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/view_pager"
        />

</LinearLayout>

在Fragment中的部分代码截取：

Login部分

请添加图片描述

Register部分

请添加图片描述
以上就是今天的Campus的界面搭建分享，越努力越幸运！！！

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值