1. 程式人生 > >MVP框架解析資料瀑布流展示列表

MVP框架解析資料瀑布流展示列表

1.先把MVP框架搭建一下
2.分一下包 分成三個 ui包,di包,data包
3.在這ui包中在分三個包,分別是: activity包,fragent包,adapter包
4.在di包中在分三個包,分別是:presenter包,model包,contract包
5.contract包是個契約包,裡面是MVP所需要的介面,先把MVP需要的介面給寫一下吧

這就是MVP所需要的介面

import javax.security.auth.callback.Callback;

public interface Logincontract {
    //V層
    public interface Loginview {
        //回顯資料
        public void shapeData();
    }

    //P層
    public interface Loginpresenter<Loginview> {
        //繫結服務
        public void attachview(Logincontract.Loginview loginview);

        //解綁服務
        public void detachview(Logincontract.Loginview loginview);

        //獲取資料
        public void resquesData();
    }

    //M層
    public interface Loginmodel {
        //請求資料
        public void cantainData(Callback callback);

        //介面回撥
        public interface Callback {
            public void onCallback();
        }

    }
}

然後再presenter包中建立個presenter類繼承一下contract介面中的資料

import java.lang.ref.SoftReference;

import gsp.com.day8.di.contract.Logincontract;
import gsp.com.day8.di.model.Loginmode;

public class Loginpresenter implements Logincontract.Loginpresenter {
    Logincontract.Loginview loginview;
    private SoftReference<Logincontract.Loginview> softReference;
    private Loginmode loginmode;

    @Override
    public void attachview(Logincontract.Loginview loginview) {
        this.loginview=loginview;

        //建立軟引用
        softReference = new SoftReference<>(loginview);

        //建立M層
        loginmode = new Loginmode();
    }

    @Override
    public void detachview(Logincontract.Loginview loginview) {
        //解除繫結
        softReference.clear();
    }

    @Override
    public void resquesData() {
        loginmode.cantainData(new Logincontract.Loginmodel.Callback() {
            @Override
            public void onCallback() {
                loginview.shapeData();
            }
        });
    }
}

然後再model包中建立個model類繼承一下contract介面中的資料

import gsp.com.day8.di.contract.Logincontract;

public class Loginmode implements Logincontract.Loginmodel {
    @Override
    public void cantainData(Callback callback) {
        callback.onCallback();
    }
}

MVP的框架差不多就搭建完了,現在開始解析資料並且用瀑布流展示資料,下面的圖片是要求做的功能點


在這裡插入圖片描述

下面開始寫一下點選按鈕切換頁面的佈局,我用的Fragment的方法寫的

<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"
    tools:context=".ui.activity.LoginActivity">

    <FrameLayout
        android:id="@+id/fram"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"></FrameLayout>

    <RadioGroup
        android:id="@+id/group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="首頁"
            android:textSize="25dp" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="|"
            android:textSize="25dp" />

        <RadioButton
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:text="我的"
            android:textSize="25dp" />
    </RadioGroup>


</LinearLayout>

然後寫一下呼叫元件id並且實現效果 切記不要忘了建立Fragment的頁面

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.widget.FrameLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import butterknife.BindView;
import butterknife.ButterKnife;
import gsp.com.day8.R;
import gsp.com.day8.ui.fragment.Homeactivity;
import gsp.com.day8.ui.fragment.Myactivity;

public class LoginActivity extends FragmentActivity {

    @BindView(R.id.fram)
    FrameLayout fram;
    @BindView(R.id.button1)
    RadioButton button1;
    @BindView(R.id.button2)
    RadioButton button2;
    @BindView(R.id.group)
    RadioGroup group;
    private FragmentManager manager;
    private FragmentTransaction transaction;
    private Homeactivity homeactivity;
    private Myactivity myactivity;

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

        manager = getSupportFragmentManager();
        transaction = manager.beginTransaction();

        homeactivity = new Homeactivity();
        myactivity = new Myactivity();

        transaction.add(R.id.fram, homeactivity);
        transaction.add(R.id.fram, myactivity);
        transaction.show(homeactivity).hide(myactivity);
        transaction.commit();

        group.check(group.getChildAt(0).getId());
        group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                FragmentTransaction fragmentTransaction = manager.beginTransaction();
                switch (checkedId){
                    case R.id.button1:
                        fragmentTransaction.show(homeactivity).hide(myactivity).commit();
                        break;
                    case R.id.button2:
                        fragmentTransaction.show(myactivity).hide(homeactivity).commit();
                        break;
                }
            }
        });
    }
}

寫完Fragment點選切換頁面後,我們寫一下用MVP框架解析資料並在列表展示資料
先寫契約介面,在契約接口裡面寫presenter介面,model介面

import gsp.com.day8.data.bean.Gridebean;
import gsp.com.day8.data.bean.Listbean;

public interface Homecontract {
    //V層
    public interface Homeview {
        //回顯資料gride
        public void shapeData(Gridebean resqonsData);
        //回顯資料list
        public void shapeData(Listbean resqonsData);
    }

    //P層
    public interface Homepresenter<Loginview> {
        //繫結服務
        public void attachview(Homecontract.Homeview homeview);

        //解綁服務
        public void detachview(Homecontract.Homeview homeview);

        //獲取資料
        public void resquesData();
    }

    //M層
    public interface Homemodel {
        //請求資料
        public void cantainData(Callback callback);

        //介面回撥
        public interface Callback {
             void onCallback(Gridebean resqonsData);
            void onCallback(Listbean resqonsData);
        }

    }
}

寫完契約介面後
然後在presenter包中建立個類並且繼承契約類裡面的presenter介面

import java.lang.ref.SoftReference;

import gsp.com.day8.data.bean.Gridebean;
import gsp.com.day8.data.bean.Listbean;
import gsp.com.day8.di.contract.Homecontract;
import gsp.com.day8.di.contract.Logincontract;
import gsp.com.day8.di.model.Homemode;
import gsp.com.day8.di.model.Loginmode;

public class Homepresenter implements Homecontract.Homepresenter<Homecontract.Homeview> {
    Homecontract.Homeview homeview;

    private SoftReference<Homecontract.Homeview> softReference;
    private Homemode homemode;

    @Override
    public void attachview(Homecontract.Homeview homeview) {
        //建立軟引用
        softReference = new SoftReference<>(homeview);
        this.homeview=homeview;
        //建立M層
        homemode = new Homemode();

    }

    @Override
    public void detachview(Homecontract.Homeview homeview) {
        softReference.clear();
    }

    @Override
    public void resquesData() {
        homemode.cantainData(new Homecontract.Homemodel.Callback() {
            @Override
            public void onCallback(Gridebean resqonsData) {
                homeview.shapeData(resqonsData);
            }

            @Override
            public void onCallback(Listbean resqonsData) {
                homeview.shapeData(resqonsData);
            }
        });
    }
}

然後在model包中建立個類並且繼承契約類裡面的model介面
在model類中進行Gson資料解析並且進行回傳資料

import com.google.gson.Gson;
import com.lzy.okgo.OkGo;
import com.lzy.okgo.callback.StringCallback;
import com.lzy.okgo.model.Response;

import gsp.com.day8.data.Contain;
import gsp.com.day8.data.bean.Gridebean;
import gsp.com.day8.data.bean.Listbean;
import gsp.com.day8.di.contract.Homecontract;

public class Homemode implements Homecontract.Homemodel {

    @Override
    public void cantainData(final Callback callback) {
        OkGo.<String>get(Contain.GRIDEURL).execute(new StringCallback() {
            @Override
            public void onSuccess(Response<String> response) {
                //響應資料
                String responsedata = response.body().toString();
                //解析資料
                Gson gson = new Gson();
                //
                Gridebean gridebean = gson.fromJson(responsedata, Gridebean.class);
                //響應玩資料回撥
               callback.onCallback(gridebean);

            }
        });
        OkGo.<String>get(Contain.LISTURL).execute(new StringCallback() {
            @Override
            public void onSuccess(Response<String> response) {
                //響應資料
                String responsedata = response.body().toString();
                //解析資料
                Gson gson = new Gson();
                //
                //Gridebean gridebean = gson.fromJson(responsedata, Gridebean.class);
                Listbean listbean = gson.fromJson(responsedata, Listbean.class);
                //響應玩資料回撥
                callback.onCallback(listbean);

            }
        });
    }
}

這是要展示頁面所需要的佈局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="10dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/sao" />

        <android.support.v7.widget.SearchView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="8" />

        <ImageView
            android:layout_width="10dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/dan" />

    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:layout_weight="3" />


    <android.support.v7.widget.RecyclerView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:layout_weight="8"></android.support.v7.widget.RecyclerView>


</LinearLayout>

最後展示在相對應的Fragment的頁面上
關於Fragment的介面卡我給寫到了這個頁面的下面,如果需要,可以去看看

import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;
import gsp.com.day8.R;
import gsp.com.day8.data.bean.Gridebean;
import gsp.com.day8.data.bean.Listbean;
import gsp.com.day8.di.contract.Homecontract;
import gsp.com.day8.di.presenter.Homepresenter;
import gsp.com.day8.ui.adapter.Grideadapter;
import gsp.com.day8.ui.adapter.Listadapter;

public class Homeactivity extends Fragment implements Homecontract.Homeview {
    @BindView(R.id.recyclerview)
    RecyclerView recyclerview;
    Unbinder unbinder;
    @BindView(R.id.listview)
    RecyclerView listview;
    private Homepresenter homepresenter;
    private List<Gridebean.DataBean> data1;
    private Grideadapter grideadapter;
    private List<Listbean.DataBean> data2;
    private Listadapter listadapter;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = View.inflate(getActivity(), R.layout.home_layout, null);
        unbinder = ButterKnife.bind(this, view);
        //建立P層
        homepresenter = new Homepresenter();
        homepresenter.attachview(this);

        //gride
        recyclerview.setLayoutManager(new LinearLayoutManager(getActivity()));
        //觸發
        grideadapter = new Grideadapter(R.layout.gride, data1);
        //給元件id
        recyclerview.setAdapter(grideadapter);
        homepresenter.resquesData();

        //list
        listview.setLayoutManager(new LinearLayoutManager(getActivity()));
        //觸發
        listadapter = new Listadapter(R.layout.list, data2);
        //給元件id
        listview.setAdapter(listadapter);
        homepresenter.resquesData();


        return view;
    }


    @Override
    public void shapeData(Gridebean resqonsData) {
        //記得轉下型吧list轉成Arraylist
        //資料來源
        data1 = resqonsData.getData();
        grideadapter.notifyDataSetChanged();
        ArrayList<Gridebean.DataBean> data = (ArrayList<Gridebean.DataBean>) resqonsData.getData();
        //波浪型的佈局需要設定RecyclerView   其他型別的不需要設定了
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(5, StaggeredGridLayoutManager.VERTICAL);
        recyclerview.setLayoutManager(manager);
        //設定介面卡
        Grideadapter grideadapter = new Grideadapter(R.layout.gride, data);

        recyclerview.setAdapter(grideadapter);

    }

    @Override
    public void shapeData(Listbean resqonsData) {
        //記得轉下型吧list轉成Arraylist
        //資料來源
        data2 = resqonsData.getData();
        listadapter.notifyDataSetChanged();
        ArrayList<Listbean.DataBean> data = (ArrayList<Listbean.DataBean>) resqonsData.getData();
        //波浪型的佈局需要設定RecyclerView   其他型別的不需要設定了
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        listview.setLayoutManager(manager);
        //設定介面卡
        Listadapter listadapter = new Listadapter(R.layout.list, data);

        listview.setAdapter(listadapter);
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }

}

這個頁面寫解析的介面卡,因為要展示二個列表資料所以我們得寫兩個介面卡
這個介面卡是展示頂部一行5個數據信息的介面卡

import android.support.annotation.Nullable;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.List;

import gsp.com.day8.R;
import gsp.com.day8.data.bean.Gridebean;

public class Grideadapter extends BaseQuickAdapter<Gridebean.DataBean, BaseViewHolder> {
    public Grideadapter(int layoutResId, @Nullable List<Gridebean.DataBean> data) {
        super(layoutResId, data);
    }

    @Override
    protected void convert(BaseViewHolder helper, Gridebean.DataBean item) {
        //獲取文字
        helper.setText(R.id.gridetext, item.getName());
        //獲取圖片   記得強轉一下helper.getView(R.id.image)
        Glide.with(mContext).load(item.getIcon()).into((ImageView) helper.getView(R.id.grideimage));
    }
}

這個介面卡是展示底部一行2個數據信息的介面卡

import android.support.annotation.Nullable;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;

import java.util.List;

import gsp.com.day8.R;
import gsp.com.day8.data.bean.Listbean;


public class Listadapter extends BaseQuickAdapter<Listbean.DataBean, BaseViewHolder> {
    public Listadapter(int layoutResId, @Nullable List<Listbean.DataBean> data) {
        super(layoutResId, data);
    }

    @Override
    protected void convert(BaseViewHolder helper, Listbean.DataBean item) {
        //獲取文字
        helper.setText(R.id.listtext, item.getNews_title());
        //獲取圖片   記得強轉一下helper.getView(R.id.image)
        Glide.with(mContext).load(item.getPic_url()).into((ImageView) helper.getView(R.id.listimage));
    }

}

最後這是我做出的效果圖,做的不好看大家多多體諒一下
在這裡插入圖片描述
在這裡插入圖片描述