Assignment 2: App portal page design and development

1. Function
Based on the main page framework of WeChat in Assignment 1, recycleview is used to implement the list on the “Discover” page. After clicking, you can also jump to a new page.

2. Design process
1. Page design
The discovery page has many news titles that can be scrolled up and down. The news details page can display news content.
2. Functional design
Click on the news title to jump to the news details page.

3. Implementation steps and code

(1) Add a RecycleView to fragment_blank3.xml.

(2) Create an item_news.xml to display news titles on the “Discover” page

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

    <TextView
        android:id="@ + id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="title"
        android:textSize="30sp"
        />

    <TextView
        android:id="@ + id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="date"
        android:textColor="#888"
        android:layout_marginLeft="20dp"
        android:textSize="20sp" />


</LinearLayout>

(3) Create an Activity named newsdetail to receive news data and display it. There are three main contents: title, date, and content.

package com.example.oneapplication;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.Button;
import android.view.View;

public class newsdetail extends AppCompatActivity {

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

        Intent intent = getIntent();
        if (intent != null) {
            News news = (News) intent.getSerializableExtra("news");
            if (news != null) {
                TextView titleView = findViewById(R.id.title);
                titleView.setText(news.getTitle());

                TextView dateView = findViewById(R.id.date);
                dateView.setText(news.getDate());

                TextView contentView=findViewById(R.id.content);
                contentView.setText(news.getContent());
            }
        }

        Button backButton = findViewById(R.id.back_button);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish(); // Close the current activity and return to the previous interface
            }
        });
    }
}

(4) The corresponding activity_newsdetail.xml also exists

<?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"
    android:padding="16dp"
    tools:context=".newsdetail">

    <TextView
        android:id="@ + id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="8dp"
        android:text="title"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@ + id/date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="8dp"
        android:text="date"
        android:textSize="16sp" />

    <TextView
        android:id="@ + id/content"
        android:layout_width="match_parent"
        android:layout_height="567dp"
        android:text="content"
        android:textSize="18sp" />

    <Button
        android:id="@ + id/back_button"
        android:layout_width="match_parent"
        android:layout_height="66dp"
        android:text="Button" />
</LinearLayout>

(5) Create a News.java class to save news information.

package com.example.oneapplication;

import java.io.Serializable;
public class News implements Serializable{
    private String title;
    private String date;
    private String content;
    public News(String title, String date,String content) {
        this.title = title;
        this.date = date;
        this.content=content;
    }
    public String getTitle() {
        return title;
    }
    public String getDate() {
        return date;
    }
    public String getContent(){return content;}
}

(6) Rewrite BlankFragment3 to store news information.

package com.example.oneapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.content.Intent;

import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.fragment.app.Fragment;

import java.util.List;
import java.util.ArrayList;
public class BlankFragment3 extends Fragment implements Myadapter2.OnItemClickListener{
    private RecyclerView recyclerView;
    private Myadapter2 myadapter;
    private List<News> data = new ArrayList<>();

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_blank3, container, false);
        recyclerView = view.findViewById(R.id.news_list);
        myadapter = new Myadapter2(getActivity(), data);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager = new LinearLayoutManager(getContext());
        recyclerView.setLayoutManager(manager);
        myadapter.setOnItemClickListener(this);
        data.add(new News("Apple", "2023/10/31", "Details"));
        data.add(new News("Huawei", "2023/9/3", "Huawei Mate 60 Pro"));
        data.add(new News("Xiaomi", "2023/10/1", "Xiaomi 14 pro"));
        data.add(new News("Title 4", "Time 4", "Content 4"));
        data.add(new News("Title 5", "Time 5", "Content 5"));
        data.add(new News("Title 6", "Time 6", "Content 6"));
        return view;
    }
    @Override
    public void onItemLongClick(View view, int pos) {
        // Your implementation for item long click goes here
        // For example, you can show a context menu or perform some other action
    }
    @Override
    public void OnItemClick(View view, int position) {
        News news = data.get(position);
        Intent intent = new Intent(getActivity(), newsdetail.class);
        intent.putExtra("news", news);
        startActivity(intent);
    }
}

(7) Create adapter Myadapter2 for transmitting data of two pages.

package com.example.oneapplication;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;
import androidx.annotation.NonNull;

import java.util.List;

public class Myadapter2 extends RecyclerView.Adapter<Myadapter2.ViewHolder> {
    private List<News> mNewsList;
    private Context mContext;
    private OnItemClickListener mListener;
    public Myadapter2(Context context, List<News> newsList) {
        this.mContext = context;
        this.mNewsList = newsList;
    }
    public void setOnItemClickListener(OnItemClickListener listener) {
        this.mListener = listener;
    }
    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView title;
        TextView date;
        ViewHolder(View view) {
            super(view);
            title = view.findViewById(R.id.title);
            date = view.findViewById(R.id.date);
        }
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { //In the onCreateViewHolder() method, a click event listener is set for each item, and when the click event occurs, use Intent to jump to the newsdetail Activity and pass the corresponding The data
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_news, parent, false);
        ViewHolder holder = new ViewHolder(view);
        view.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                if (position != RecyclerView.NO_POSITION & amp; & amp; mListener != null) {
                    mListener.OnItemClick(v, position);
                }
            }
        });
        return holder;
    }

    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        News news = mNewsList.get(position);
        holder.title.setText(news.getTitle());
        holder.date.setText(news.getDate());
    }//Use the onBindViewHolder() method to extract data from the News object and bind it to ViewHolder

    public int getItemCount() {
        return mNewsList.size();
    }//getItemCount() method, returns the number of elements in the news list

    public interface OnItemClickListener {
        void OnItemClick(View view, int position);
        void onItemLongClick(View view, int pos);
    }//OnItemClickListener interface, used to handle the click event of each item in RecyclerView
}

4. Result display

5. Source code link

CD20231110