Use Retrofit+RxJava+MVP to create a Material Design style APP

In order to get familiar with the use of some open source frameworks, I decided to use my spare time to write an APP to get familiar with the use of these frameworks. Step on the pits in advance to facilitate future use in the company's projects. The interfaces used are aggregated data and dry goods concentration camp, thank you very much.

Rendering

Mainstream frameworks used

• The home page side slide bar is implemented using DrawerLayout+NavigationView
• Using Realm database to implement local collection
• Use Retrofit+RxJava+RxAndroid to implement network requests and simply encapsulate the returned results
• Encapsulate the Adapter and ViewHolder of RecyclerView to achieve pull-up loading
• Use CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout to achieve a cool sliding animation
• Use Glide to load pictures
• Use PhotoView to achieve image zoom
• The calendar uses the open source material-calendarview
• Implemented SwipeRefreshLayout to automatically refresh for the first time

1. Use DrawerLayout+NavigationView to implement the side slide bar

 <?xml version= "1.0" encoding= "utf-8" ?><android.support.v4.widget.DrawerLayout
    xmlns:android= "http://schemas.android.com/apk/res/android"  
    xmlns:app= "http://schemas.android.com/apk/res-auto"  
    android:id= "@+id/drawerLayout"  
    android:layout_width= "match_parent"  
    android:layout_height= "match_parent" > 
 
 <LinearLayout
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:orientation= "vertical" > 
 
       <android.support.v7.widget.Toolbar
            android:id= "@+id/toolbar"  
            android:layout_width= "match_parent"  
            android:layout_height= "wrap_content"  
            app:titleTextColor= "@android:color/white" /> 
 
 <FrameLayout
            android:id= "@+id/fl_main"  
            android:layout_width= "match_parent"  
            android:layout_height= "match_parent" ></FrameLayout>
 </LinearLayout> 
 
    <android.support.design.widget.NavigationView
        android:id= "@+id/navigation"  
        android:layout_width= "match_parent"  
        android:layout_height= "match_parent"  
        android:layout_gravity= "start"  
        android:fitsSystemWindows= "true"  
        app:headerLayout= "@layout/drawer_header"  
        app:menu= "@menu/drawer_menu" >
    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

DrawerLayout is a built-in control in the Androidv4 package, which supports left and right sliding. android:layout_gravity="leftt" represents the left sliding interface (or start), android:layout_gravity="right" represents the right sliding interface (or end), and the main interface is the one without layout_gravity. You can add ActionBarDrawerToggle in the code to control the display and hiding of the side sliding bar.

 ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolBar, R.string. open , R.string. close );
 mDrawerToggle.syncState();
 mDrawer.addDrawerListener(mDrawerToggle);

NavigationView is a control launched by Google after 5.0. It is mainly used as a menu control. It is divided into upper and lower parts. The upper part is headerLayout, which can customize the layout, and the lower part is menu, which is used as the menu item of the navigation menu.

 <?xml version= "1.0" encoding= "utf-8" ?><menu xmlns:android= "http://schemas.android.com/apk/res/android" >
 <item
        android:id= "@+id/drawer_todayInHistory"  
        android:checkable= "true"  
        android:icon= "@drawable/ic_history"  
 android:title= "Today in History" />
 <item
        android:id= "@+id/drawer_gril"  
        android:checkable= "true"  
        android:icon= "@drawable/icon_gril"  
 android:title= "Girl" />
 <item
        android:id= "@+id/drawer_like"  
        android:checkable= "true"  
        android:icon= "@drawable/ic_unlike"  
 android:title= "Collection" />
 <item
        android:id= "@+id/drawer_about"  
        android:checkable= "true"  
        android:icon= "@drawable/ic_about"  
 android:title= "About" /></menu>

Click event:

 navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
 @Override
 public boolean onNavigationItemSelected(MenuItem item) {
 //Handle the item click event here
 return   true ;
 }
 });

Get the controls in the header (headerLayout):

 View headView=navigationView.getHeaderView(0);

Set the menu list icon color:

By default, the menu icon color is gray. You can set the icon color by

 app:itemIconTint= ""  

Add a dividing line:

Just divide the menu into multiple groups, set an ID for each group, and there will be a dividing line between the groups:

 <menuxmlns:android= "http://schemas.android.com/apk/res/android" >
 <groupandroid:id= "@+id/g1" >
 <item
 android:id= "@+id/favorite"  
 android:icon= "@mipmap/ic_launcher"  
 android:title= "Today in History" />
 <item
 android:id= "@+id/wallet"  
 android:icon= "@mipmap/ic_launcher"  
 android:title= "Collection" />
 </ group >
 <groupandroid:id= "@+id/g2" >
 <item
 android:id= "@+id/photo"  
 android:icon= "@mipmap/ic_launcher"  
 android:title= "Girl" />
 </ group >
 <item
 android:id= "@+id/file"  
 android:icon= "@mipmap/ic_launcher"  
 android:title= "About" />
 </menu>

2. Glide loading pictures

Setting the binding lifecycle

 Glide. with (Context context); // Bind Context
  Glide. with (Activity activity); // Bind Activity
  Glide. with (FragmentActivity activity);// Bind FragmentActivity
  Glide. with (Fragment fragment);// Bind Fragment

General usage:

 Glide. with (context)
 .load (imageUrl) //image path
 .placeholder(R.drawable.ic_launcher) //Set the loading image
 .error(R.drawable.ic_launcher) //Set the image that failed to load
 .skipMemoryCache( true ) //Set to skip memory cache
 .diskCacheStrategy(DiskCacheStrategy. ALL ) //Set cache strategy: all : cache source resources and converted resources / none: do not cache any disk resources / source: cache source resources / result: cache converted resources
 .priority(Priority.NORMAL) //Set download priority
 .animate(R.anim.item_alpha_in) //Set loading animation
 .thumbnail(0.1f) //Set thumbnail support (load thumbnails first, then load full images)
 .override(400,400) //Set loading size
 .centerCrop() //Set dynamic transformation
                . into (imageView);

Load the Git image:

 Glide. with (this). load (imageUrl).asGif(). into (imageView);

Dynamic cache cleaning:

 Glide.get(this).clearDiskCache(); //Clear the disk cache. Need to be executed in the child thread. Glide.get(this).clearMemory(); //Clear the memory cache. Can be done in the UI main thread.

Load rounded corner images or circular images:

 Glide. with (this). load (imageUrl).transform(new GlideRoundTransform(this)). into (imageView);

A custom Transform is required. Here is a Transform for rounded corners and a circle:

Round Corner Conversion:

 public class GlideRoundTransform extends BitmapTransformation { 
 
 private static   float radius = 0f; 
 
 public GlideRoundTransform(Context context) {
 this(context, 4);
 } 
 
 public GlideRoundTransform(Context context, int dp) {
 super(context);
        this.radius = Resources.getSystem().getDisplayMetrics().density * dp;
 } 
 
    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
 return roundCrop(pool, toTransform);
 } 
 
    private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
        if (source == null ) return   null ; 
 
        Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        if (result == null ) {
            result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
 } 
 
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias( true );
        RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
 return result;
 } 
 
    @Override public String getId() {
 return getClass().getName() + Math.round(radius);
 }
 }

Circular image conversion:

 public class GlideCircleTransform extends BitmapTransformation {
 public GlideCircleTransform(Context context) {
 super(context);
 } 
 
    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
 return circleCrop(pool, toTransform);
 } 
 
    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null ) return   null ; 
 
 int   size = Math. min (source.getWidth(), source.getHeight());
 int x = (source.getWidth() - size ) / 2;
 int y = (source.getHeight() - size ) / 2; 
 
        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size , size ); 
 
        Bitmap result = pool.get( size , size , Bitmap.Config.ARGB_8888);
        if (result == null ) {
            result = Bitmap.createBitmap( size , size , Bitmap.Config.ARGB_8888);
 } 
 
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias( true );
 float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
 return result;
 } 
 
    @Override public String getId() {
 return getClass().getName();
 }
 }

Get Bitmap

 Glide.with ( this)
                .load (imageUrl)
 .asBitmap()
                . into (new SimpleTarget<Bitmap>() {
 @Override
 public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                        imageView.setImageBitmap(mBitmap);
 }
 });