Android は qq ログイン登録とフレンド リスト インターフェイスを実装します

Androidを習い始めて1ヶ月以上、先生が宿題を残してQQログイン登録とフレンドリストの実装をしました。

1. ログイン インターフェイス、登録インターフェイス、友達リスト インターフェイスを設計します。
2. ログイン インターフェイスでユーザー名「admin 」とパスワード「abc123 」を入力した後、ユーザー名とパスワードが正しいかどうかを確認します。

1. ユーザー名またはパスワードが間違っている場合、対応するプロンプトが表示されます: 「ユーザー名またはパスワードが正しくありません!」;
2. ユーザー名またはパスワードが空の場合、「ユーザー名またはパスワードを空にすることはできません!」というプロンプトが表示されます。
3. ユーザー名とパスワードが正しければ、ログインボタンをクリックして「友達リストインターフェース」に入ります。

1. 「登録」をクリックして登録インターフェースに入り、「登録インターフェース効果画像」に示すように、登録情報を入力した後、「登録」ボタンをクリックし、Toast を使用して登録情報を入力します。
2. 各インターフェイスに必要なコントロールが欠落していないことが求められます.これに基づいて、美化効果を追加したり、入力形式の検証を改善したりできます.

私はさらに乱れ、断続的な叩きを経てようやく完成しました。

まずはレンダリングです

 宿題を完成させるという考えは、おそらく最初に各ページのデザインを完成させ、次にログイン インターフェイスを介して 3 つのページを接続し、次に必要なアクティビティを最初に作成することです。最初のメインアクティビティに加えて、登録インターフェイス用の register とフレンド リスト インターフェイス用のフレンドリストを作成しました。

1つ目はログインページのデザインで、具体的なコードは以下の通り

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <ImageView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="80dp"
            android:src="@drawable/head2"></ImageView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:layout_width="62dp"
                android:text="姓名" />

            <EditText
                android:id="@+id/etName"
                android:layout_width="341dp"
                android:layout_height="78dp">

            </EditText>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="86dp"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:layout_width="64dp"
                android:layout_height="33dp"
                android:text="密码" />

            <EditText
                android:id="@+id/etPwd"
                android:layout_width="378dp"
                android:layout_height="70dp">

            </EditText>

        </LinearLayout>

        <Button
            android:id="@+id/bt_enter"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="@null"
            android:gravity="center"
            android:text="登录"
            android:textColor="@android:color/black"
            android:textSize="18sp"></Button>

        <Button
            android:id="@+id/bt_submit"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="@null"
            android:gravity="right"
            android:text="没有账号？点击注册"
            android:textColor="@android:color/black"
            android:textSize="18sp"></Button>


    </LinearLayout>
</RelativeLayout>

 ジャンプを実現し、名前やパスワードなどの要件を確認するために、Java コードの設計は次のようになります。

package com.example.firstwork1;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private EditText etName, etPwd;
    private Button bt_enter,bt_submit;
    private String Name, Pwd;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        etName = findViewById(R.id.etName);
        etPwd = findViewById(R.id.etPwd);
        bt_enter= findViewById(R.id.bt_enter);
        bt_submit = findViewById(R.id.bt_submit);
        bt_enter.setOnClickListener(this);
        bt_submit.setOnClickListener(this);


    }

    private void getData() {
        Name = etName.getText().toString().trim();
        Pwd = etPwd.getText().toString().trim();
    }


    @Override
    public void onClick(View v) {
        String username="admin";
        String userpassword="abc123";
        switch (v.getId()) {
            case R.id.bt_enter:
                getData();
                if (TextUtils.isEmpty(Name)) {
                    Toast.makeText(MainActivity.this, "请输入名字",
                            Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(Pwd)) {
                    Toast.makeText(MainActivity.this, "请输入密码",
                            Toast.LENGTH_SHORT).show();
                } else if (etName.getText().toString().trim().equals(username)){
                    if (etPwd.getText().toString().trim().equals(userpassword)){
                        Intent intent = new Intent(MainActivity.this, friendlist.class);
                        startActivity(intent);
                    }else {
                        Toast.makeText(MainActivity.this,"密码有误，请重新输入",
                            Toast.LENGTH_SHORT).show();
                    }

                } else {
                    Toast.makeText(MainActivity.this,"用户名有误，请重新输入",
                        Toast.LENGTH_SHORT).show();
                }
                break;
            case R.id.bt_submit:
                Intent intent = new Intent(MainActivity.this, register.class);
                startActivity(intent);
        }

    }
}

 最初に必要な変数を定義してカプセル化し、次にインターフェイス コントロールを取得してイベント リスナーを設定します。

getData 関数は、入力情報を取得するために使用されます

次は2つのボタン機能の書き込みです。

ユーザー名とパスワードの比較を実現するために、ここでは str 型の 2 つの変数をユーザー名とパスワードとして定義します。

switch ステートメントの 2 つのケースは、それぞれログイン ボタンと登録ボタンのクリック イベントに対応します。

1 つ目は、まずデータを取得し、取得したデータが空かどうかを判断し、空の場合は対応するプロンプトを表示し、そうでない場合は、事前に入力されたユーザー名とパスワードと比較します。ここのデータ型はすべて str 型です。単純な || や && and! は使用できません。= 比較するには、ここで equals を使用して 2 つの値を比較します。同じ結果が 1 の場合、合格した場合はそれが返され、すべて合格した後、インテントを介してページにジャンプできます

2番目は直接ジャンプします

この時点で、プログラムを実行し、ボタンをクリックしてジャンプしますが、ジャンプ後のページは空です。登録とフレンドリストのインターフェイスは以下のように設計されています

友達リストのインターフェース

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bg2">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:text="好友列表"
        android:textColor="#FFFFFF"
        android:background="#FF8F03"
        android:gravity="center"
        ></TextView>


    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"></ListView>


</RelativeLayout>

ここでは ListView コントロールが使用されており、レイアウト コードは次のようになっているため、非常に短いです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="120dp"
        android:layout_height="90dp"
        android:layout_centerVertical="true"
        ></ImageView>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/iv"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="芭芭拉"
            android:textColor="#FF8F03"
            android:textSize="20dp"></TextView>

        <TextView
            android:id="@+id/introduce"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/name"
            android:layout_marginTop="10dp"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="芭芭拉闪亮登场"
            android:textColor="#FF716C6D"
            android:textSize="16dp"></TextView>

    </RelativeLayout>

アダプターのコードは次のとおりです。

package com.example.firstwork1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class friendlist extends AppCompatActivity {
    private ListView mListView;
    private String[] names = {"芭芭拉","琴","刻晴","胡桃","香菱","影","可莉"};
    private String[] introduces = {"芭芭拉闪亮登场","以剑为誓","剑光如我，斩尽芜杂","吃好喝好，一路走好","救命啊，食材打人了","我要把你砌进神像里","蹦蹦炸弹"};
    private int[] icons = {R.drawable.babala,R.drawable.qin,R.drawable.keqing,R.drawable.hutao,R.drawable.xianglin,R.drawable.ying,R.drawable.keli};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_friendlist);
        mListView = findViewById(R.id.lv);
        MyBaseAdapter mAdapter = new MyBaseAdapter();
        mListView.setAdapter(mAdapter);
    }
    class MyBaseAdapter extends BaseAdapter {
        @Override
        public int getCount(){
            return names.length;
        }
        @Override
        public Object getItem(int position){
            return names[position];
        }
        @Override
        public long getItemId(int position){
            return  position;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent){
            View view = View.inflate(friendlist.this,R.layout.list_friend,null);
            TextView name = view.findViewById(R.id.name);
            TextView introduce = view.findViewById(R.id.introduce);
            ImageView iv = view.findViewById(R.id.iv);
            name.setText(names[position]);
            introduce.setText(introduces[position]);
            iv.setBackgroundResource(icons[position]);
            return view;
        }

    }

}

アダプターは、名前、紹介、および写真を格納するために使用される名前の紹介とアイコンの 3 つの配列を定義します。

ListView のデータアダプタとして setAdapter メソッドを使用し、BaseAdapter を継承する MyBaseAdapter クラスを作成します。inflate メソッドがリスト項目のレイアウト ファイルをロードし、findViewByid メソッドを介してリスト項目のコントロールを取得し、最後に setText() および setBackground メソッドを介してテキストおよび画像情報を設定する、親クラスのメソッドをオーバーライドします。

ListView コントロールにアイテムが多すぎてすぐにフリーズする場合は、最適化する必要がありますが、ここのデータは小さく、最適化されていません。

最後に、登録インターフェース

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg3">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@android:color/white"
            android:gravity="center"
            android:text="身份注册"
            android:textColor="#000"
            android:textSize="25sp"
            android:textStyle="italic" />


        <LinearLayout
            android:layout_width="411dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:layout_width="62dp"
                android:text="姓名" />

            <EditText
                android:id="@+id/et_name"
                style="@style/etOne" />

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp" >
            <TextView
                style="@style/tvTwo"
                android:layout_width="82dp"
                android:layout_height="33dp"
                android:text="密码" />

            <EditText
                android:id="@+id/et_pwd"
                style="@style/etOne"
                android:layout_width="263dp"
                android:layout_height="35dp"
                android:inputType="textPassword" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                style="@style/tvTwo"
                android:layout_width="wrap_content"
                android:layout_height="44dp"
                android:text="性别" />

            <RadioButton
                android:id="@+id/rb_boy"
                android:layout_width="87dp"
                android:layout_height="56dp"
                android:text="男"
                android:textColor="@android:color/black"
                android:textSize="15sp"></RadioButton>

            <RadioGroup
                android:id="@+id/rg_sex"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="50dp"
                android:orientation="horizontal">

            </RadioGroup>

            <RadioButton
                android:id="@+id/rb_girl"
                style="@style/tvTwo"
                android:layout_width="98dp"

                android:layout_height="61dp"
                android:text="女"></RadioButton>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="15dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="爱好"
                android:textColor="@android:color/black"></TextView>

            <CheckBox
                android:id="@+id/cb_sing"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:text="唱歌"
                android:textColor="@android:color/black">
                ></CheckBox>

            <CheckBox
                android:id="@+id/cb_dance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:text="跳舞"
                android:textColor="@android:color/black">
                ></CheckBox>

            <CheckBox
                android:id="@+id/cb_rap"
                android:layout_width="93dp"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:text="rap"
                android:textColor="@android:color/black">
                ></CheckBox>

            <CheckBox
                android:id="@+id/cb_ball"
                android:layout_width="93dp"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:text="篮球"
                android:textColor="@android:color/black">
                >
            </CheckBox>

        </LinearLayout>
        <LinearLayout
            android:layout_width="411dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">

            <Button
                android:id="@+id/btn_submit"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_alignParentBottom="true"
                android:background="@null"
                android:gravity="center"
                android:text="注册"
                android:textColor="@android:color/black"
                android:textSize="18sp"></Button>
        </LinearLayout>






    </LinearLayout>
</RelativeLayout>

ここでは比較的単純です。さまざまなコントロールを設定するだけで済みます。これは、ログイン インターフェイスに似ています (これもコピーして変更しました)。

package com.example.firstwork1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.RadioGroup;
import android.widget.Toast;

public class register extends AppCompatActivity implements
View.OnClickListener,CompoundButton.OnCheckedChangeListener{
    private EditText et_name,et_pwd;
    private Button btn_submit,btn_enter;
    private String name,pwd,sex,hobbys;
    private RadioGroup rg_sex;
    private CheckBox cb_sing,cb_dance,cb_rap,cb_ball;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        init();
    }
    private void init(){
        et_name = findViewById(R.id.et_name);
        et_pwd = findViewById(R.id.et_pwd);
        rg_sex = findViewById(R.id.rg_sex);
        cb_sing = findViewById(R.id.cb_sing);
        cb_dance = findViewById(R.id.cb_dance);
        cb_rap = findViewById(R.id.cb_rap);
        cb_ball = findViewById(R.id.cb_ball);
        btn_submit = findViewById(R.id.btn_submit);
        btn_submit.setOnClickListener(this);

        cb_sing.setOnCheckedChangeListener(this);
        cb_dance.setOnCheckedChangeListener(this);
        cb_rap.setOnCheckedChangeListener(this);
        cb_ball.setOnCheckedChangeListener(this);

        hobbys = new String();
        rg_sex.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.rb_boy:
                        sex = "男";
                        break;
                    case  R.id.rb_girl:
                        sex = "女";
                        break;
                }
            }
        });

    }

    private void getData(){
        name = et_name.getText().toString().trim();
        pwd = et_pwd.getText().toString().trim();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_submit:
                getData();
                if (TextUtils.isEmpty(name)) {
                    Toast.makeText(register.this, "请输入名字",
                            Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(pwd)) {
                    Toast.makeText(register.this, "请输入密码",
                            Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(name)) {
                    Toast.makeText(register.this, "请选择性别",
                            Toast.LENGTH_SHORT).show();
                } else if (TextUtils.isEmpty(name)) {
                    Toast.makeText(register.this, "请选择兴趣爱好",
                            Toast.LENGTH_SHORT).show();
                }else {
                    Toast.makeText(register.this,"注册成功",
                            Toast.LENGTH_SHORT).show();
                    Log.i("MainActivity","注册的用户信息："+"名字"+name+"性别"+sex+"爱好"+hobbys);
                }
                break;
        }
    }

    public void onCheckedChanged(CompoundButton buttonView,boolean isChecked){
        String motion = buttonView.getText().toString();
        if (isChecked){
            if (!hobbys.contains(motion)){
                hobbys = hobbys + motion;
            }
        }else {
            if (hobbys.contains(motion)){
                hobbys = hobbys.replace(motion,"");
            }
        }

    }
}

また、インターフェースの一部設定については、スタイルファイルにパーツを入れています

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="etOne">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">30dp</item>
        <item name="android:background">@null</item>
        <item name="android:textColor">@android:color/black</item>

    </style>

    <style name="tvOne">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:drawablePadding">8dp</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:paddingTop">40dp</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textSize">15dp</item>
    </style>
    <style name="tvTwo">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginLeft">20px</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textSize">15dp</item>
    </style>

</resources>

以上が全ての内容です、また次回お会いしましょう