- 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 nine
girl
Image copy tomedia
folder
- 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
- in
domain
To create a class named:GirlFriend
What 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 find
girl
Picture isint
The type of
- So in Javabeans
GirlFriend
Class used by the image type in theint
type
- 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 tolist
among - Instead of looking at the sorting of properties in Javabeans,
Ctrl + P
You can view the parameters
- Add to complete
9
An 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
- when
next
When the button is clicked, it executes the classonClick
methods
get
Buttons add click events as above
- Then, in
onClick
Method to determine the click isnext
A button orget
button - Because in the
onClick
The button object is used in the method, so promote the button object toMember variablesIn theonClick
Method is called, which one is used, all of these components are used, so it’s calledMember variables. - In the following
onClick
Method to get from the collectiongirl
Information, so the set is also going to beMember variables
Random
Object is also placed in the member position, indicating that one is created after the program is startedonClick
Method 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.