Learn from RxAndroid, Retrofit, and OkHttp and use them to build an MVVM-based project. Use Android Jetpack components Databinding, ViewModel, LiveData, Lifecycle. Learn how to build a project using these frameworks.

Github address: MVVM Demo

Here we begin to enter the topic, this article to obtain the public number list data display as an example. Article catalog according to Demo project from data to business logic processing finally to the interface display.

The preparatory work

  • Add dependencies The versions of dependencies must match, otherwise there will be some messy problems. See my previous Blog integration error for details

    Because new features of JDK8 were used in Retrofit2, support was added in addition to dependencies.

// Support new features of JDK1.8 compileOptions {sourceCompatibility JavUncomfortable.VERSION_1_8 targetCompatibility Javon_1_8} // Android JetPack, Can also add respectively using specific dependence on a component implementation 'androidx. Lifecycle: lifecycle - extensions: 2.2.0' / / okHttp 3.14 implementation 'com. Squareup. Okhttp3: okhttp: 3.14.9' / / Retrofit 2.9 implementation 'com. Squareup. Retrofit2: Retrofit: 2.9.0' / / Convert Google Json (Convert the result to the Model) implementation 'com. Squareup. Retrofit2: converter - gson: 2.3.0' / / Retrofit CallAdapter convert to RxJava implementation 'com. Squareup. Retrofit2: adapter - rxjava3:2.9.0' / / RxAndroid 3.0 Implementation 'IO. Reactivex. Rxjava3: rxandroid: 3.0.0'Copy the code
  • Declare permissions
    <uses-permission android:name="android.permission.INTERNET" />
Copy the code

  • Project directory

    Once the catalog is set up, we can start work.

The request data

This example uses Android as the data source.

We use OkHttp for web requests, Retrofit for callbacks in the form of interfaces, and RxAndroid for better business and presentation work.

  1. First, create an interface for the public list data, mpservice.java, and declare this geListData().
@GET("wxarticle/chapters/json") Observable<BaseData<List<MpBean>>> getListData(); /** * Request Buyer Data for GET * @param id dateId * @return Buyer Data */ @get (" Buyer /date/ GET ") Observable<BaseData<Map<String, Map<String, String>>>> getBuyerData(@Query("dateId") String id); /** * Request Buyer Data for POST * @param dateId dateId * @return buyer data */ @FormUrlEncoded @POST("buyer/date/get")  Observable<BaseData<Map<String, Map<String, String>>>> postBuyerData(@Field("dateId") String dateId);Copy the code
  1. Instead of using the proxy object directly, we need to get the proxy object and pass in the interface via Retrofit’s Create method in MainModel.java. Of course, we’ll start by creating a Retrofit object
private Retrofit retrofit = new Retrofit.Builder(). baseUrl(HttpConfig.BASE_URL) .addConverterFactory(GsonConverterFactory.create()) .addCallAdapterFactory(RxJava3CallAdapterFactory.create()) .build();  // Get the proxy object retrofit.create(mpserivce.class)Copy the code
  1. Our interface returns an Observable, so we need to pass in an Observer and establish a subscription. GetListData gets an Observable, subscribe establishes a subscription, and specifies a worker thread.
	/**
     * get the proxy object of MpService
     * get the observable of proxy object
     * build a subscription relationship
     * @param observer observer
     */
    public void subscribe(Observer<BaseData<List<MpBean>>> observer) {
        retrofit.create(MpSerivce.class).getListData()
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(observer);
    }
Copy the code

Processing logic

Create the ViewModel, Adapter, and Adapter layout file.

  1. Create an Observer to respond to the event
Observer<BaseData<List<MpBean>>> observer = new Observer<BaseData<List<MpBean>>>() { @Override public void onSubscribe(@io.reactivex.rxjava3.annotations.NonNull Disposable d) { } @Override public void onNext(@io.reactivex.rxjava3.annotations.NonNull BaseData<List<MpBean>> listBaseData) { if (listBaseData.getErrorCode() == 0) { mainAdapter.setList(listBaseData.getData()); } } @Override public void onError(@io.reactivex.rxjava3.annotations.NonNull Throwable e) { // error } @Override public void onComplete() { Toast.makeText(mContext, "get data completed.", Toast.LENGTH_SHORT).show(); }}; // build subscription relationship mainModel.subscribe(observer);Copy the code
  1. Create Adapter handling
@NonNull @Override public MainAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { AdapterMainBinding adapterMainBinding = DataBindingUtil.inflate(inflater, R.layout.adapter_main, parent, false); return new ViewHolder(adapterMainBinding); } @override public void onBindViewHolder(@nonnull mainAdapter.viewholder holder, int position) { Bind MpBean with DataBinding data bean = list.get(position); if (bean ! = null) { holder.binding.setMp(bean); } } class ViewHolder extends RecyclerView.ViewHolder { private AdapterMainBinding binding; // We don't need to use itemView for findViewById, Instead, use DataBinding ViewHolder(@nonnull AdapterMainBinding binding) {super(binding.getroot ()); this.binding = binding; }}Copy the code

The interface display

Call it from the View Model in MainActivity.

	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        mainViewModel = new ViewModelProvider(this).get(MainViewModel.class);
        mainViewModel.getMpData();
        mainBinding.rvMain.setAdapter(mainViewModel.mainAdapter);
    }
Copy the code

Results show

supplement

If we want to use LiveData, Lifecycle, we can follow these three steps.

  1. Creating LiveData Obviously, we need to create LiveData in the ViewModel
	public class NameViewModel extends ViewModel {

    // Create a LiveData with a String
    private MutableLiveData<String> currentName;

        public MutableLiveData<String> getCurrentName() {
            if (currentName == null) {
                currentName = new MutableLiveData<String>();
            }
            return currentName;
        }

    // Rest of the ViewModel...
    }
Copy the code
  1. Observe LiveData By creating an observer to observe changes to LiveData
public class NameActivity extends AppCompatActivity { private NameViewModel model; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Other code to setup the activity... // Get the ViewModel. model = new ViewModelProvider(this).get(NameViewModel.class); // Create the observer which updates the UI.final observer <String> nameObserver = new Observer<String>() { @Override public void onChanged(@Nullable final String newName) { // Update the UI, in this case, a TextView. nameTextView.setText(newName); }}; // Observe the LiveData, passing in this activity as the LifecycleOwner and the observer. model.getCurrentName().observe(this, nameObserver); }}Copy the code
  1. Update LiveData and then we can update LiveData. There are setValue and postValue. The difference is that setValue is used in the main thread, while postValue is updated in the worker thread.
button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { String anotherName = "John Doe"; // Update LiveData Model.getCurrentName ().setValue(anotherName); }});Copy the code

This is the use of LiveData and Lifecycle and there is more documentation available on the Android developer platform. You can dig into that.

The end of the

That’s pretty much the end of this Blog. Leave a comment or look at the code used in this article if you have any errors or are confused. Github address: MVVM Demo feel helpful to you, you can readily Star, thank you.

Do you really use Retrofit? Android MVVM building project basic Version Android developer official