• This is the 7th day of my participation in the August More Text Challenge.

A simple dating APP

  • The following effects are achieved:
  • Click “Contact information” below if you like it, click “Next” if you don’t like it.

1. Layout implementation

  • New project:MakeFriendsApplication
  • The following ninegirlImage copy tomediafolder

  • Have friend need pictures above material can invite: www.aliyundrive.com/s/j59dy5red…
  • Of course, you can also find it on the Internet, the picture information is as follows:

  • As you can see in the implementation above, the layout consists of: one image + three text + two buttons
  • Layout implementation:

ability_main


      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Image
        ohos:id="$+id:img"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:image_src="$media:girl1"/>

    <Text
        ohos:id="$+id:name"
        ohos:height="50vp"
        ohos:width="150vp"
        ohos:text="Name: Wang Meihua"
        ohos:text_size="20fp"/>

    <Text
        ohos:id="$+id:age"
        ohos:height="50vp"
        ohos:width="150vp"
        ohos:text="Age: 29"
        ohos:text_size="20fp"/> 

    <Text
        ohos:id="$+id:address"
        ohos:height="50vp"
        ohos:width="150vp"
        ohos:text=Address: Nanjing
        ohos:text_size="20fp"/>
    
    <Button
        ohos:id="$+id:next"
        ohos:height="50vp"
        ohos:width="150vp"
        ohos:background_element="#92D050"
        ohos:text="Next"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"/>

    <Button
        ohos:id="$+id:get"
        ohos:height="50vp"
        ohos:width="150vp"
        ohos:background_element="#92D050"
        ohos:text="Get contact information"
        ohos:text_size="20fp"
        ohos:text_color="#FFFFFF"
        ohos:top_margin="10vp"/>

</DirectionalLayout>
Copy the code
  • Run:

2. Implementation of core business logic

  • Start by finding the component object

  • Business: click the button “Next” to modify the above information, can the above information as a whole object?

There are now nine blind dates, and when you click “Next,” the information of a random blind date is displayed on the page.

  • Create a Javabean class to describe girlfriend information, with the Javabean class to create objects in code

  • indomainTo create a class named:GirlFriendWhat are the attributes in the class?
  • For example, picture, name, address, and age are all attributes in the GirlFriend class
  • Get the image in Explorer and findgirlPicture isintThe type of

  • So in JavabeansGirlFriendClass used by the image type in theinttype

  • Use the corresponding type for other attributes

  • Finally, generate a standard JavaBean
package com.xdr630.makefriendsapplication.domain;

public class GirlFriend {
    / / photo
    private int photoID;
    / / name
    private String name;
    / / age
    private int age;
    / / address
    private String address;

    // Empty parameter + full parameter: Alt + insert

    public GirlFriend(a) {}public GirlFriend(int photoID, String name, int age, String address) {
        this.photoID = photoID;
        this.name = name;
        this.age = age;
        this.address = address;
    }

    public int getPhotoID(a) {
        return photoID;
    }

    public void setPhotoID(int photoID) {
        this.photoID = photoID;
    }

    public String getName(a) {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge(a) {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getAddress(a) {
        return address;
    }

    public void setAddress(String address) {
        this.address = address; }}Copy the code
  • Once you’ve created a Javabean, you can create a collection of nine blind objects, and use the collection to store them.ArrayList, generics can be written directly to the created onesGirlFriend

  • After learning to interact with the server in the future, these data are obtained from the server, not added one by one
  • The next step is to manually add data sources
  • Create a girlfriend object (new GirlFriend) and add tolistamong
  • Instead of looking at the sorting of properties in Javabeans,Ctrl + PYou can view the parameters

  • Add to complete9An object

  • And then I’m going to add click events to both buttons, and I’m going to add”next“And”get“Button
  • Implement click events in this class

  • whennextWhen the button is clicked, it executes the classonClickmethods

  • getButtons add click events as above

  • Then, inonClickMethod to determine the click isnextA button orgetbutton
  • Because in theonClickThe button object is used in the method, so promote the button object toMember variablesIn theonClickMethod is called, which one is used, all of these components are used, so it’s calledMember variables.
  • In the followingonClickMethod to get from the collectiongirlInformation, so the set is also going to beMember variables

  • RandomObject is also placed in the member position, indicating that one is created after the program is startedonClickMethod is created once when clicked, memory redundant.

MainAbilitySlice

package com.xdr630.makefriendsapplication.slice;

import com.xdr630.makefriendsapplication.ResourceTable;
import com.xdr630.makefriendsapplication.domain.GirlFriend;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Image;
import ohos.agp.components.Text;

import java.util.ArrayList;
import java.util.Random;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {

        Image img;
        Text name;
        Text age;
        Text address;
        Button next;
        Button get;

        ArrayList<GirlFriend> list = new ArrayList<>();

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1. Find the component object
        img = (Image) findComponentById(ResourceTable.Id_img);
        name = (Text) findComponentById(ResourceTable.Id_name);
        age = (Text) findComponentById(ResourceTable.Id_age);
        address = (Text) findComponentById(ResourceTable.Id_address);
        next = (Button) findComponentById(ResourceTable.Id_next);
        get = (Button) findComponentById(ResourceTable.Id_get);
        // create a set of 9 blind date objects


        // Add 9 objects
        // After learning to interact with the server, these data are obtained from the server
        list.add(new GirlFriend(ResourceTable.Media_girl1,"Wang Meihua 1".29."Nanjing"));
        list.add(new GirlFriend(ResourceTable.Media_girl2,"Wang Meihua 2".30."Shanghai"));
        list.add(new GirlFriend(ResourceTable.Media_girl3,"Wang Mei Hua 3".31."Wuhan"));
        list.add(new GirlFriend(ResourceTable.Media_girl4,"Wang Mei Hua 4".28."Changsha"));
        list.add(new GirlFriend(ResourceTable.Media_girl5,"Wang Mei Hua 5".25."Nanchang"));
        list.add(new GirlFriend(ResourceTable.Media_girl6,"Wang Mei Hua 6".26."Hangzhou"));
        list.add(new GirlFriend(ResourceTable.Media_girl7,"Wangmeihua 7".23."Shenzhen"));
        list.add(new GirlFriend(ResourceTable.Media_girl8,"Wangmeihua 8".22."Beijing"));
        list.add(new GirlFriend(ResourceTable.Media_girl9,"Wang Meihua 9".24."Guangzhou"));

        //3. Add the click event to the button
        next.setClickedListener(this);
        get.setClickedListener(this);

    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    Random r =  new Random();

    @Override
    public void onClick(Component component) {
        if (component == next){
            // Click on the next - change a girl's information
            // Get information about a random girl from the collection

            // Get a random index
            int randomIndex = r.nextInt(list.size());
            // Get random girl information by random index
            GirlFriend girlFriend = list.get(randomIndex);
            // Set the random information into the interface
            img.setImageAndDecodeBounds(girlFriend.getPhotoID());
            name.setText("Name:" + girlFriend.getName());
            age.setText("Age:" + girlFriend.getAge());
            address.setText("Address:" + girlFriend.getAddress());


        }else if (component == get){
            // Get the contact information
            // Extension: you can jump to the interface for users to recharge, after recharge, you can see the girl information}}}Copy the code
  • Run:

  • Click next

  • When click the “next” button, the information will follow to get together, so there is demand friend can expand, when click the “next” button information is hidden, and only when click the “contact” can show the corresponding information, or can also add top-up page, when click the “contact”, will jump to top-up page, You can only see the corresponding information after the recharge.