Remixer-谷歌的UI参数动态修改框架

泡在网上的日子 / 文 发表于2017-09-11 23:55 次阅读

在medium上看到这篇文章Make your Android Project pop with Remixer by Google,里面介绍了一个比较有意思的库Remixer。

Remixer是谷歌material-foundation中的一个UI框架,通过注解的方式快速修改UI变量,从而更新UI。无需重新编译,无需重启app。猜测这个库的目的本来是供UI调试用的。

先来看看效果:

1-HsOVsvNMXmrGuRFc6sQjgg.gif

底部弹出框是一个设置界面,通过它可以改变上面的Stepper Indicator的参数,动态的改变UI效果。 如果自己去实现图中所示的功能的话,你需要实现slider,开关,颜色选择等控件,还是比较麻烦的。但是这里只需要为设置UI的方法添加几个注解就可以了,界面自动就可以生成。并且这里设置的UI参数是自动保存到了SharedPreferences中的,所以下次打开还是相同的样子。

前面提到了这个库应该是UI调试用的,但是也可以用于实现app的功能,比如文章页面的字体设置这些。不过鉴于这个库比较大,如果app中这样的设置不是很多,还是建议自己实现。如果项目赶进度,或者老板急着看效果,用它来应急还是非常不错的。

如何使用

添加依赖:

compile 'com.github.material-foundation.material-remixer-android:remixer:1.0'
annotationProcessor 'com.github.material-foundation.material-remixer-android:remixer_annotation:1.0'

初始化

RemixerInitialization.initRemixer(getApplication());
Remixer.getInstance().setSynchronizationMechanism(new LocalStorage(getApplicationContext()));

RemixerBinder.bind(this); // pass an Activity instance

final FloatingActionButton remixerButton = findViewById(R.id.remixerButton);
RemixerFragment.newInstance().attachToFab(this, remixerButton);

最后一行代码表示点击了remixerButton这个fab之后就弹出设置界面。

然后在修改UI的方法上增加注解:

   @RangeVariableMethod(minValue = 6, maxValue = 70, initialValue = 20)
    public void setLabelSize(Float fontSize) {
        indicator.setLabelSize(fontSize);
    }

    @BooleanVariableMethod(initialValue = true)
    public void showLabels(Boolean showLabels) {
        indicator.showLabels(showLabels);
    }

    @BooleanVariableMethod
    public void showStepNumberInstead(Boolean showStepNumberInstead) {
        indicator.showStepNumberInstead(showStepNumberInstead);
    }

    @BooleanVariableMethod
    public void useBottomIndicator(Boolean useBottomIndicator) {
        indicator.useBottomIndicator(useBottomIndicator);
    }

    @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setIndicatorColor(Integer indicatorColor) {
        indicator.setIndicatorColor(indicatorColor);
    }

    @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setLineDoneColor(Integer lineDoneColor) {
        indicator.setLineDoneColor(lineDoneColor);
    }

    @ColorListVariableMethod(limitedToValues = {Color.BLACK, Color.WHITE, 0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setLabelColor(Integer labelColor) {
        indicator.setLabelColor(labelColor);
    }

其中RangeVariableMethod注解生成的是一个silder控件,后面的你都可以通过名称猜测对应的是什么控件。

这就是所有代码了,是不是非常简单?

下面把完整的代码贴出来:

public class MainActivity extends AppCompatActivity {

    StepperIndicator indicator;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ViewPager pager = findViewById(R.id.pager);
        assert pager != null;
        pager.setAdapter(new PagerAdapter(getSupportFragmentManager()));

        indicator = findViewById(R.id.stepper_indicator);
        // We keep last page for a "finishing" page
        indicator.setViewPager(pager, true);

        indicator.addOnStepClickListener(new StepperIndicator.OnStepClickListener() {
            @Override
            public void onStepClicked(int step) {
                pager.setCurrentItem(step, true);
            }
        });

        RemixerInitialization.initRemixer(getApplication());
        Remixer.getInstance().setSynchronizationMechanism(new LocalStorage(getApplicationContext()));

        RemixerBinder.bind(this);

        final FloatingActionButton remixerButton = findViewById(R.id.remixerButton);
        RemixerFragment.newInstance().attachToFab(this, remixerButton);
    }

    @RangeVariableMethod(minValue = 6, maxValue = 70, initialValue = 20)
    public void setLabelSize(Float fontSize) {
        indicator.setLabelSize(fontSize);
    }

    @BooleanVariableMethod(initialValue = true)
    public void showLabels(Boolean showLabels) {
        indicator.showLabels(showLabels);
    }

    @BooleanVariableMethod
    public void showStepNumberInstead(Boolean showStepNumberInstead) {
        indicator.showStepNumberInstead(showStepNumberInstead);
    }

    @BooleanVariableMethod
    public void useBottomIndicator(Boolean useBottomIndicator) {
        indicator.useBottomIndicator(useBottomIndicator);
    }

    @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setIndicatorColor(Integer indicatorColor) {
        indicator.setIndicatorColor(indicatorColor);
    }

    @ColorListVariableMethod(limitedToValues = {0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setLineDoneColor(Integer lineDoneColor) {
        indicator.setLineDoneColor(lineDoneColor);
    }

    @ColorListVariableMethod(limitedToValues = {Color.BLACK, Color.WHITE, 0xFF00b47c, 0xFF3f51b5, 0xFFf44336})
    public void setLabelColor(Integer labelColor) {
        indicator.setLabelColor(labelColor);
    }

}

如果你比较仔细的话会发现设置界面的title是“Remixer”,如果要用在产品中显然要不得,但是Remixer并没有提供修改title的功能。

不过幸运的是这个title是通过名为remixer_framework_name的String资源设置的,我们只要在strings.xml中覆盖这个字符串资源就是了:

   <string name="remixer_framework_name">xxxx</string>

最后提一点,这个框架还支持Firebase远程设置UI参数。

源码

文中的代码都是来自引用的外文中所提到的这个项目:

https://github.com/rakshakhegde/stepper-indicator 

收藏 赞 (3) 踩 (0)
上一篇:kotlin源码包发布jcenter实践
简介 在网上看了很多关于jcenter的教程,但对于大多数刚接触的人来说,显得有点难学。此实践旨在教你零基础配置,无脑copy。 步骤 1. 要有vpn,这里推荐 蓝灯 ,如果第一次使用,恭喜你500兆的快速流量够你用了 2. 要有bintray账号,如果没有请链接 注册地址
下一篇:SwipeMenuRecyclerView的使用,侧滑
依赖 compilecom.yanzhenjie:recyclerview-swipe:1.1.2 布局 / activity .setSwipeMenuCreator();.setSwipeMenuItemClickListener();.setLayoutManager(LinearLayoutManager());.setItemAnimator(DefaultItemAnimator());.setAdapter(); SwipeMenuCreator=Sw