Android

Android学习笔记---MVP架构系列0x02

上一次我们将MVP的基本架构都搭建起来了,这次我们先来完成UI界面的部分.

布局文件

我们的项目界面是采用RecyclerView作为列表的控件,所以我们需要先将布局文件设计好.

  1. item_movie.xml 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
       <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp">
        <ImageView
            android:scaleType="centerCrop"
            android:id="@+id/im_iv_movie"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:src="@drawable/pictures_no" />
        <TextView
            android:layout_below="@id/im_iv_movie"
            android:id="@+id/im_tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Re"
            android:textStyle="bold" />
    </RelativeLayout>

我们这次使用的是Fragment作为我们的View模块,所以我们也定义好Fragment的布局文件

  1. movie_frag.xml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
       <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.SwipeRefreshLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mf_srl"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/mf_rv_list"
            android:layout_height="match_parent">

        </android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.SwipeRefreshLayout>

    下面的就是我们的Activity的布局文件了

  2. activity_main.xml 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
       <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.source.kevin.doubantop250.MainActivity">
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             />
    </RelativeLayout>

UI界面实现

首先我们在loadmovie包下新建一个MovieAdapter类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
   /**
 * Movie列表的Adapter
 */
public class MovieAdapter extends RecyclerView.Adapter<MovieVH>{

    Context mContext;

    public MovieAdapter(Context context) {
        this.mContext = context;
    }

    @Override
    public MovieVH onCreateViewHolder(ViewGroup parent, int viewType) {
        return new MovieVH(LayoutInflater.from(mContext).inflate(R.layout.item_movie,null));
    }

    @Override
    public void onBindViewHolder(MovieVH holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 20;
    }

}

class MovieVH extends RecyclerView.ViewHolder{
    @BindView(R.id.im_iv_movie) ImageView iv_movie;
    @BindView(R.id.im_tv_title) TextView tv_title;
    public MovieVH(View itemView) {
        super(itemView);
        ButterKnife.bind(this,itemView);
    }
}

为了便于测试,在MovieAdapter类中使用了临时的数据.有了填充数据的Adapter我们就可以来编写我们的Fragment了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class MovieFragment extends Fragment implements MovieContract.View{

    //持有Presenter的实例
    MoviePresenter mPresenter;

    MovieAdapter mAdapter;
    @BindView(R.id.mf_rv_list)
    RecyclerView rv_list;
    public static MovieFragment newInstance(){
        return new MovieFragment();
    }
    public MovieFragment(){

    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.movie_frag,container,false);
        ButterKnife.bind(this,root);
        mAdapter = new MovieAdapter(getActivity());
        rv_list.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));
        rv_list.setAdapter(mAdapter);
        return root;
    }
    @Override
    public void setPresenter(MovieContract.Presenter presenter) {
        mPresenter = (MoviePresenter) presenter;
    }
}

接下来只要把Fragment添加到Activity中就完成的简单的界面了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        addFragment(R.id.content_frame,MovieFragment.newInstance());

    }

    private void addFragment(int id, Fragment fragment) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(id, fragment);
        transaction.commit();
    }

}

最后我们可以先运行一下看一下效果:
UI效果
我们完成了简单的UI界面后,下一次我们将会完成数据获取与展现的部分,也是MVP实现中最重要的部分.