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.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

HarmonyOS — Implementing a dating APP

A simple dating APP

1. Layout implementation

2. Implementation of core business logic

HarmonyOS — Implementing a dating APP

A simple dating APP

1. Layout implementation

2. Implementation of core business logic

Related Posts

Gradle series (2), Gradle technology exploration

Interface Implements communication between fragments

【 UmENG +】 First SDK automated testing framework, to solve SDK testing pain points