MVP structure in Android

MVP là viết tắt của model-view-presenter. Là một kiến trúc phần mềm ra đời từ những năm 1990 tại công ty Taligent ở mỹ. Taligent là một công ty bao gồm sự hợp tác của 3 đại gia công nghệ lớn là Apple, IBM và Hewlett-Packard. MVP ban đầu là kiến trúc cơ bản để phát triển ứng dụng trong môi trường CommonPoint dựa trên C++ và sau đó chuyển sang Java. Đến năm 1998 thì Taligent giải thể.

Cấu trúc MVP gồm có 3 thành phần:

  • View: chính là tần giao diện của ứng dụng
  • Presenter: Thành phần trung gian giao tiếp giữa View và Model có vai trò như thông dịch viên vậy (nói vậy cho bạn dễ hiểu)
  • Model: Thành phần thể hiện của data, đối tượng,... ví dụ table nhân viên có những cột nào thì trong class này cũng sẽ có những trường tương ứng với cả tên thể hiện và kiểu dữ liệu.
Để bạn dễ hình dung thì nhìn ảnh sau:



Từ hình trên bạn sẽ thấy Model không bao giờ nói chuyện với View mà không có Presenter. Nếu chúng nó nói chuyện với nhau thì thành MVC mất rồi (bạn tìm hiểu thêm về MVC).

 

Step 1: Tạo class model

public class MainModel {
private String value;

public String getValue() {
return value;
}

public void setValue(String value) {
this.value = value;
}

public MainModel() {
}

@Override
public String toString(){
return value;
}
}


Step 2: Tạo một interface View

public interface MainView {
void setDataToTextView(String data);
void nextScreen();
}

Step 3: Tạo một Presenter

public class MainPresenter {
private MainModel model;
private MainView view;

public MainPresenter(MainView abView){
this.view = abView;
this.model = new MainModel();
}

public void setValue(String value){
this.view.setDataToTextView(value);
this.model.setValue(value);
}

public void nextScreen(){
this.view.nextScreen();
}
}

Step 4: Thiết kế giao diện cho màn hình chính

<?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:background="#393939"
android:orientation="vertical"
tools:context=".MainActivity">

<TextView
android:id="@+id/txt_show_infor"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:layout_width="match_parent"
android:layout_height="50dp"
android:textColor="#000000"
android:layout_margin="8dp"
android:background="#dbdbdb"/>

<EditText
android:id="@+id/edt_input_data"
android:hint="Type somethings here...."
android:layout_width="match_parent"
android:paddingLeft="10dp"
android:layout_height="50dp"
android:singleLine="true"
android:layout_margin="8dp"
android:background="#ebebeb"/>

<Button
android:id="@+id/btn_next_screen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#008000"
android:text="Next to screen"
android:textColor="#ffffff"
android:textStyle="bold"
android:layout_margin="8dp" />

</LinearLayout>

Step 5: Sử dụng MVP 

public class MainActivity extends AppCompatActivity implements MainView{

private EditText editText;
private TextView textView;
private Button btnNext;

private MainPresenter presenter;

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

initView();

// init presenter
presenter = new MainPresenter(this);

// handle on text change event
editText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { }

@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
presenter.setValue(charSequence.toString());
}

@Override
public void afterTextChanged(Editable editable) { }
});

//btnNext.setOnClickListener(view -> {presenter.nextScreen();});
btnNext.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
presenter.nextScreen();
}
});
}

private void initView(){
editText = findViewById(R.id.edt_input_data);
textView = findViewById(R.id.txt_show_infor);
btnNext = findViewById(R.id.btn_next_screen);
}

// show text on TextView
@Override
public void setDataToTextView(String data) {
textView.setText(data);
}

// switch to next sreen
@Override
public void nextScreen() {
// todo some thing before switch to next screen
// transfer to next screen
Intent intent = new Intent(this, NextActivity.class);
startActivity(intent);
}
}

Step 6: Tạo một màn hình gọi là NextActivity


public class NextActivity extends AppCompatActivity {

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

Step 7: Thưởng thức thành quả




Đăng nhận xét

Mới hơn Cũ hơn