autojs之大柒侧滑栏详解

lbar
//       --card
ui.layout(
  <viewpager>
    {/**drawer侧边栏 */}
    <relative>
      <relative></relative>
      <frame></frame>
      <horizontal></horizontal>
    </relative>
    {/**界面 */}
    <card>
      <vertical>
        <toolbar></toolbar>
        <card></card>
      </vertical>
    </card>
  </viewpager>
);

// 全屏有两种 SYSTEM_UI_FLAG_FULLSCREEN 和 SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
// SYSTEM_UI_FLAG_FULLSCREEN: 真正的全屏
// SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN: 真正全屏的基础上, 状态栏部分被遮挡
// SYSTEM_UI_FLAG_LAYOUT_STABLE: 全屏和非全屏切换时，布局不要有大的变化
// SYSTEM_UI_FLAG_LIGHT_STATUS_BAR: 状态栏图标黑色
// 此篇文章有部分效果对比: https://blog.csdn.net/QQxiaoqiang1573/article/details/79867127
var SystemUiVisibility = (ve) => {
  var option =
    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
    (ve ? View.SYSTEM_UI_FLAG_LAYOUT_STABLE : View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
  activity.getWindow().getDecorView().setSystemUiVisibility(option);
};

const resources = context.getResources();
// 四舍五入 转化到px, 最小 1 像素
const statusBarHeight = resources.getDimensionPixelSize(
  resources.getIdentifier("status_bar_height", "dimen", "android")
);
// 密度比例
const scale = resources.getDisplayMetrics().density;
var dp2px = (dp) => {
  return Math.floor(dp * scale + 0.5);
};
var px2dp = (px) => {
  return Math.floor(px / scale + 0.5);
};

// 删除第一页左侧阴影
// 删除最后一页右侧阴影
ui.viewpager.overScrollMode = View.OVER_SCROLL_NEVER; //删除滑动到底的阴影
// viewpager序号从0开始
ui.viewpager.currentItem = 1; //跳转到1号子页面
// 添加页面改变监听
// 显示半个页面是不会触发该事件的
// 只有某个页面整个显示出来才会触发
ui.viewpager.setOnPageChangeListener({
  onPageSelected: function (index) {
    log("index = " + index);
    SystemUiVisibility(index ? false : true);
  },
});

// 删除android ScrollView边界阴影方法方法
// android:fadingEdge=”none”
// 删除ScrollView拉到尽头（顶部、底部），然后继续拉出现的阴影效果
// android:overScrollMode="never"
ui.drawerList.overScrollMode = View.OVER_SCROLL_NEVER;

ui.viewpager.setPageTransformer(true, new MyPageTransform()); //设置viewpager切换动画
/**
 * 自定义viewpager动画
 */
function MyPageTransform() {
  var mDp30 = dp2px(30);
  var mRadius = 0;
  var pageWidth;
  this.transformPage = function (view, position) {
    pageWidth = view.getWidth();
    log(util.format("view: %s, pageWidth: %s, position: %s", view, pageWidth, position));
    if (position < -1) {
      view.setAlpha(0); // 这个我觉得没啥用, 因为没有小于-1的值(也可能我理解有误)
    } else if (position <= 0) {
      // 左侧view
      // 小于0, position不是一个固定的数字, 他是一直在变化的
      view.setTranslationX(pageWidth * position);
    } else if (position <= 1) {
      // 右侧view
      // 横轴的变化保证了第1页始终能看见
      // 就算最大的偏移也只有view宽度的一半
      view.setTranslationX(pageWidth * 0.5 * -position);
      // 缩放view的宽高
      view.setScaleX(1 - 0.3 * position);
      view.setScaleY(1 - 0.3 * position);
      // if (mRadius != parseInt(mDp30 * position)) {
      //圆角切换
      ui.card.attr("cardCornerRadius", (mRadius = parseInt(mDp30 * position)) + "px");
      // }
      if (position == 1) {
        // 设置list 宽度
        // 这样你点击有反应的区域就只有屏幕宽度*0.65
        ui.drawerList.attr("w", parseInt(pageWidth * 0.65) + "px");
      }
    } else {
      view.setAlpha(0);
    }
  };
}

-1 --------------0--------------- 1

// 缩放view的宽高
view.setScaleX(1 - 0.3 * position);
view.setScaleY(1 - 0.3 * position);
// x轴偏移
view.setTranslationX(pageWidth * 0.5 * -position);

// 圆角设置
ui.card.attr("cardCornerRadius", (mRadius = parseInt(mDp30 * position)) + "px");
// 点击有反应的区域宽度设置
ui.drawerList.attr("w", parseInt(pageWidth * 0.65) + "px");