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

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

先来看看效果：

底部弹出框是一个设置界面，通过它可以改变上面的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参数。

这是一个比较吊的框架，google出品。

参考地址：https://github.com/rakshakhegde/stepper-indicator