使用Retrofit+RxJava+MVP打造一款MaterialDesign風格的APP

為了熟悉使用一些開源框架,便決定利用業余時間寫一個APP來熟悉這些框架的使用。提前踩一踩坑,方便以后在公司的項目中使用。使用的接口是聚合數據的和干貨集中營的,非常感謝。

4.png

6.png

3.png
  • 首頁側滑欄使用DrawerLayout+NavigationView實現的

  • 使用Realm數據庫實現本地收藏

  • 使用Retrofit+RxJava+RxAndroid實現網絡請求,并對返回結果進行了簡單的封裝

  • RecyclerView的Adapter和ViewHolder進行封裝,實現了上拉加載

  • 使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout實現了炫酷的滑動動畫

  • 使用Glide實現了圖片的加載

  • 使用PhotoView實現了圖片的縮放

  • 日歷使用開源的material-calendarview

  • 實現了SwipeRefreshLayout首次進入自動刷新

APP下載

二維碼.png

源碼

https://github.com/RaphetS/TodayInHistory

一、使用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);
                    }
                });
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,578評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,701評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,691評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,974評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,694評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,026評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,015評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,193評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,719評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,442評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,668評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,151評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,846評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,255評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,592評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,394評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380

推薦閱讀更多精彩內容