MdRr,一个结合Material Design+RxJava+Retrofit的小demo

本文出自 “阿敏其人” 简书博客,转载或引用请注明出处。

一个简单的小综合demo,分别演示:

  • Material Design
  • RxJava
  • Retrofit
  • RxJava+Retrofit
Paste_Image.png

一、简单的小架子

Paste_Image.png

布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mDrawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    tools:context="com.am.mdrr.MainActivity">

    <!--抽屉分两部分 一部分内容, 一部分导航-->

    <!--抽屉的 内容部分-->
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/mCoordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/mAppbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
            <android.support.v7.widget.Toolbar
                android:id="@+id/mToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:id="@+id/mFrameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/appbar"
            android:scrollbars="none"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>

    <!--抽屉  导航部分
    分为 导航头部和导航主菜单
    可以通过 headerLayout 设置抽出方向-->
    <android.support.design.widget.NavigationView
        android:id="@+id/mNavigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_head"
        app:menu="@menu/nav_main_part"
        />
</android.support.v4.widget.DrawerLayout>

设置抽屉导航的 头部 和 菜单
.
.
MainActivity

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    private Toolbar mToolbar;
    private NavigationView mNavigationView;
    private FragmentManager supportFragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.mToolbar);
        setSupportActionBar(mToolbar);

        supportFragmentManager = getSupportFragmentManager();

        // 抽屉整体的一些设置,toggle同步,添加toggle同步  没卵用但是一定要加
        mDrawerLayout = (DrawerLayout) findViewById(R.id.mDrawerLayout);
        mActionBarDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open,
                R.string.close);
        mActionBarDrawerToggle.syncState();
        mDrawerLayout.addDrawerListener(mActionBarDrawerToggle);

        // 菜单的头部
        mNavigationView = (NavigationView) findViewById(R.id.mNavigation);
        View headerView = mNavigationView.getHeaderView(0); // 得到菜单 的头部
        if(headerView!=null){
            headerView.findViewById(R.id.mIvPic).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    switchToRx();
                    mDrawerLayout.closeDrawers();
                    mNavigationView.getMenu().getItem(1).setChecked(true);
                }
            });
        }

        // 菜单的正式部分
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    case R.id.nav_item_rx:
                        switchToRx();
                        break;
                    case R.id.nav_item_re:
                        switchToRe();
                        break;
                    case R.id.nav_item_rxre:
                        switchToRxRe();
                        break;
                    case R.id.nav_item_md:
                        switchToMd();
                        break;
                    case R.id.nav_item_about:
                        switchToAbout();
                        break;
                }
                menuItem.setChecked(true); // 把当前菜单的item置为选中状态
                mDrawerLayout.closeDrawers(); // 抽屉合起来,隐藏菜单

                // 默认返回flase,自己实现逻辑需要返回true
                return true;
            }
        });

    }

    private void switchToRx() {
        supportFragmentManager.beginTransaction().replace(R.id.mFrameLayout, new RxFragment()).commit();
        mToolbar.setTitle("RxJava");
    }

    private void switchToRe() {
        supportFragmentManager.beginTransaction().replace(R.id.mFrameLayout, new ReFragment()).commit();
        mToolbar.setTitle("Retrofit");
    }

    private void switchToRxRe() {
        supportFragmentManager.beginTransaction().replace(R.id.mFrameLayout, new RxReFragment()).commit();
        mToolbar.setTitle("RxJava Retrofit");
    }

    private void switchToMd() {
        supportFragmentManager.beginTransaction().replace(R.id.mFrameLayout, new MdFragment()).commit();
        mToolbar.setTitle("Material Design");
    }

    private void switchToAbout() {
        supportFragmentManager.beginTransaction().replace(R.id.mFrameLayout, new AboutFragment()).commit();
        mToolbar.setTitle("About");
    }
}

gif

小架子.gif

二、 Md Widget

*SnackBar

  • CardView
  • RecyclerView
  • TextInputLayput
  • FloatingActionButton
  • ToolBar
  • CoordinatorLaypout
  • CollasoingToolvarLaypout
  • NestedScrollView
  • TabLayout

简图如下

MdShow.gif

注:
关于RecyclerView没有单独开一个activity,但是其实列表本事就是RecyclerView了,想学参考可以参考这里:RecyclerView良好参考

关于md控件,可以参考这里:
MD系列2、ToolBar+DrawerLayout + NavigationView

Md系列3、CoordinatorLayout 里 Toobar和TabLayout等发生的一系列故事

三、RxJava

RxJava和Retrofit往往是一起使用的。

所以 build.gradle添加如下引入

    compile 'io.reactivex:rxjava:1.1.7'
    compile 'com.squareup.retrofit2:retrofit:2.1.0'
    compile 'com.squareup.retrofit2:converter-gson:2.1.0'
    compile 'com.squareup.retrofit2:adapter-rxjava:2.1.0'
    compile 'com.google.code.gson:gson:2.7'

分点:

  • RxJava初认识
  • Observer+Observable
  • Subscriber+Observable
  • 快捷创建事件,just
  • 快捷创建事件,from
  • 不完整回调ActionX
  • Scheduler调度器
  • Scheduler切换线程
  • 变换入门
  • 变换flatMap
  • 应用场景

gif

Rx.gif

RxJava可以参考这里:旁边那门转左看到一个RxJava

四、Retrofit

当前只做了一个示例,就是RxJava和Retrofit结合的获取天气的demo页面。

Retro.gif

关键代码

        String baseUrl = "http://apistore.baidu.com/";
        // 创建一个  retrofit ,baseUrl必须有
        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl(baseUrl)
                .addConverterFactory(GsonConverterFactory.create()) // 用到了 com.squareup.retrofit2:adapter-rxjava:2.1.0'
                .build();
        // 利用 retrofit 创建一个接口
        WeatherApi apiService = retrofit.create(WeatherApi.class);

        // 利用接口创建一个Call对象
        Call<WeatherBean> weatherBeanCall = apiService.getWeather("beijing");
        // 请求入队,回调请求成功或者失败
        weatherBeanCall.enqueue(new Callback<WeatherBean>() {
            @Override
            public void onResponse(Call<WeatherBean> call, Response<WeatherBean> response) {
                System.out.println("====请求成功:"+response.body().retData.weather);
                mTvData.setText(response.body().retData.weather);
            }
            @Override
            public void onFailure(Call<WeatherBean> call, Throwable t) {
                System.out.println("====请求失败");
                mTvData.setText(t.getMessage());
            }
        });

Retrofit可以参考这里:
Retrofit应用小记

五、RxJava + Retrofit

简单的demo,获取文本笑话

    compile 'com.squareup.okhttp3:logging-interceptor:3.3.1'
    compile 'com.squareup.okhttp3:okhttp:3.3.1'
    compile 'com.squareup.okhttp3:okhttp:3.3.1'
    compile 'io.reactivex:rxandroid:1.2.1'
Re加Rx.gif

项目地址

先这样,没事再完善。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容