使用Retrofit+RxJava+MVP打造一款MaterialDesign風格的APP
為了熟悉使用一些開源框架,便決定利用業余時間寫一個APP來熟悉這些框架的使用。提前踩一踩坑,方便以后在公司的項目中使用。使用的接口是聚合數據的和干貨集中營的,非常感謝。
效果圖
用到的主流框架
- 首頁側滑欄使用DrawerLayout+NavigationView實現的
- 使用Realm數據庫實現本地收藏
- 使用Retrofit+RxJava+RxAndroid實現網絡請求,并對返回結果進行了簡單的封裝
- 對RecyclerView的Adapter和ViewHolder進行封裝,實現了上拉加載
- 使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout實現了炫酷的滑動動畫
- 使用Glide實現了圖片的加載
- 使用PhotoView實現了圖片的縮放
- 日歷使用開源的material-calendarview
- 實現了SwipeRefreshLayout首次進入自動刷新
一、使用DrawerLayout+NavigationView實現側滑欄
- <?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是Androidv4包里自帶的控件,支持左滑和右滑,android:layout_gravity="leftt"代表左滑界面(或者start),android:layout_gravity="right"代碼右滑的界面(或者end),不加layout_gravity的就是主界面。代碼里可以添加ActionBarDrawerToggle控制側滑欄展示與隱藏。
- ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolBar, R.string.open, R.string.close);
- mDrawerToggle.syncState();
- mDrawer.addDrawerListener(mDrawerToggle);
NavigationView是Google在5.0之后推出的一個控件,主要作為菜單控件使用,分為上下部分,上面的部分為headerLayout,可以自定義布局,下面的部分為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="歷史上的今天" />
- <item
- android:id="@+id/drawer_gril"
- android:checkable="true"
- android:icon="@drawable/icon_gril"
- android:title="妹紙" />
- <item
- android:id="@+id/drawer_like"
- android:checkable="true"
- android:icon="@drawable/ic_unlike"
- android:title="收藏" />
- <item
- android:id="@+id/drawer_about"
- android:checkable="true"
- android:icon="@drawable/ic_about"
- android:title="關于" /></menu>
點擊事件:
- navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
- @Override
- public boolean onNavigationItemSelected(MenuItem item) {
- //在這里處理item的點擊事件
- return true;
- }
- });
獲取頭部(headerLayout)內控件:
- View headView=navigationView.getHeaderView(0);
設置菜單列表圖標顏色:
默認情況下,菜單圖標顏色為灰色,可以通過一下設置圖標顏色
- app:itemIconTint=""
添加分割線:
只需將菜單分成多個Group,每個Group設置一個Id,那么Group之間就會有分割線:
- <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="歷史上的今天"/>
- <item
- android:id="@+id/wallet"
- android:icon="@mipmap/ic_launcher"
- android:title="收藏"/>
- </group>
- <groupandroid:id="@+id/g2">
- <item
- android:id="@+id/photo"
- android:icon="@mipmap/ic_launcher"
- android:title="妹子"/>
- </group>
- <item
- android:id="@+id/file"
- android:icon="@mipmap/ic_launcher"
- android:title="關于"/>
- </menu>
二、Glide加載圖片
設置綁定生命周期
- Glide.with(Context context);// 綁定Context
- Glide.with(Activity activity);// 綁定Activity
- Glide.with(FragmentActivity activity);// 綁定FragmentActivity
- Glide.with(Fragment fragment);// 綁定Fragment
常規用法:
- Glide.with(context)
- .load(imageUrl)//圖片路徑
- .placeholder(R.drawable.ic_launcher)//設置加載中圖片
- .error(R.drawable.ic_launcher)//設置加載失敗圖片
- .skipMemoryCache(true)//設置跳過內存緩存
- .diskCacheStrategy(DiskCacheStrategy.ALL)//設置緩存策略:all:緩存源資源和轉換后的資源/none:不作任何磁盤緩存 /source:緩存源資源 /result:緩存轉換后的資源
- .priority(Priority.NORMAL)//設置下載優先級
- .animate(R.anim.item_alpha_in)//設置加載動畫
- .thumbnail(0.1f)//設置縮略圖支持(先加載縮略圖,再加載全圖)
- .override(400,400)//設置加載尺寸
- .centerCrop()//設置動態變換
- .into(imageView);
加載Git圖片:
- Glide.with(this).load(imageUrl).asGif().into(imageView);
動態緩存清理:
- Glide.get(this).clearDiskCache();//清理磁盤緩存 需要在子線程中執行 Glide.get(this).clearMemory();//清理內存緩存 可以在UI主線程中進行
加載圓角圖片或圓形圖片:
- Glide.with(this).load(imageUrl).transform(new GlideRoundTransform(this)).into(imageView);
需要自定義Transform,這里提供一個圓角和一個圓形的Transform:
圓角轉換:
- 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);
- }
- }
圓形圖片轉換:
- 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();
- }
- }
獲取Bitmap
- Glide.with(this)
- .load(imageUrl)
- .asBitmap()
- .into(new SimpleTarget<Bitmap>() {
- @Override
- public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
- imageView.setImageBitmap(mBitmap);
- }
- });