Closed ilya-raevskiy closed 4 years ago
@ilya-raevskiy , thanks for the question. It's not possible and I don't actually want to add this functionality because I think this won't be good in terms of UI/UX. A similar issue #15 was created a long ago. I explained my position there, please read.
Hey @ilya-raevskiy , i know it's a bit late but I managed to make both the labels permanent, I modified the below-mentioned file.
rn-range-slider\android\src\main\java\com\ashideas\rnrangeslider\RangeSlider.java
you need to modify the onDraw function as mentioned below. Note: I am neither an android developer nor a java developer, so please forgive me if you see some bad coding here.
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (minValue == Long.MIN_VALUE || maxValue == Long.MAX_VALUE) { //Values are not set yet, don't draw anything
return;
}
float labelTextHeight = getLabelTextHeight();
float labelHeight = labelStyle == LabelStyle.NONE ? 0 : 2 * labelBorderWidth + labelTailHeight + labelTextHeight + 2 * labelPadding;
float labelAndGapHeight = labelStyle == LabelStyle.NONE ? 0 : labelHeight + labelGapHeight;
float drawingHeight = labelAndGapHeight + 2 * thumbRadius;
float height = getHeight();
if (height > drawingHeight) {
if (gravity == Gravity.BOTTOM) {
canvas.translate(0, height - drawingHeight);
} else if (gravity == Gravity.CENTER) {
canvas.translate(0, (height - drawingHeight) / 2);
}
}
float cy = labelAndGapHeight + thumbRadius;
float width = getWidth();
float availableWidth = width - 2 * thumbRadius;
// Draw the blank line
canvas.drawLine(thumbRadius, cy, width - thumbRadius, cy, blankPaint);
float lowX = thumbRadius + availableWidth * (lowValue - minValue) / (maxValue - minValue);
float highX = thumbRadius + availableWidth * (highValue - minValue) / (maxValue - minValue);
// Draw the selected line
if (rangeEnabled) {
canvas.drawLine(lowX, cy, highX, cy, selectionPaint);
} else {
canvas.drawLine(thumbRadius, cy, lowX, cy, selectionPaint);
}
drawThumb(canvas, lowX, cy);
drawThumb(canvas, highX, cy);
// if (thumbRadius > 0) {
// drawThumb(canvas, lowX, cy);
// if (rangeEnabled) {
// drawThumb(canvas, highX, cy);
// }
// }
if (labelStyle == LabelStyle.NONE ) {
return;
}
// if (labelStyle == LabelStyle.NONE || activeThumb == THUMB_NONE) {
// return;
// }
String text = formatLabelText(lowValue);
float labelTextWidth = labelTextPaint.measureText(text);
float labelWidth = labelTextWidth + 2 * labelPadding + 2 * labelBorderWidth;
float cx = lowX;
if (labelWidth < labelTailHeight / SQRT_3_2) {
labelWidth = labelTailHeight / SQRT_3_2;
}
float y = labelHeight;
// Bounds of outer rectangular part
float top = 0;
float left = cx - labelWidth / 2;
float right = left + labelWidth;
float bottom = top + labelHeight - labelTailHeight;
float overflowOffset = 0;
if (left < 0) {
overflowOffset = -left;
} else if (right > width) {
overflowOffset = width - right;
}
left += overflowOffset;
right += overflowOffset;
preparePath(cx, y, left, top, right, bottom, labelTailHeight);
canvas.drawPath(labelPath, labelBorderPaint);
labelPath.reset();
y = 2 * labelPadding + labelTextHeight + labelTailHeight;
// Bounds of inner rectangular part
top = labelBorderWidth;
left = cx - labelTextWidth / 2 - labelPadding + overflowOffset;
right = left + labelTextWidth + 2 * labelPadding;
bottom = labelBorderWidth + 2 * labelPadding + labelTextHeight;
preparePath(cx, y, left, top, right, bottom, labelTailHeight - labelBorderWidth);
canvas.drawPath(labelPath, labelPaint);
canvas.drawText(text, cx - labelTextWidth / 2 + overflowOffset, labelBorderWidth + labelPadding - labelTextPaint.ascent(), labelTextPaint);
text = formatLabelText(highValue);
labelTextWidth = labelTextPaint.measureText(text);
labelWidth = labelTextWidth + 2 * labelPadding + 2 * labelBorderWidth;
cx = highX;
if (labelWidth < labelTailHeight / SQRT_3_2) {
labelWidth = labelTailHeight / SQRT_3_2;
}
y = labelHeight;
// Bounds of outer rectangular part
top = 0;
left = cx - labelWidth / 2;
right = left + labelWidth;
bottom = top + labelHeight - labelTailHeight;
overflowOffset = 0;
if (left < 0) {
overflowOffset = -left;
} else if (right > width) {
overflowOffset = width - right;
}
left += overflowOffset;
right += overflowOffset;
preparePath(cx, y, left, top, right, bottom, labelTailHeight);
canvas.drawPath(labelPath, labelBorderPaint);
labelPath.reset();
y = 2 * labelPadding + labelTextHeight + labelTailHeight;
// Bounds of inner rectangular part
top = labelBorderWidth;
left = cx - labelTextWidth / 2 - labelPadding + overflowOffset;
right = left + labelTextWidth + 2 * labelPadding;
bottom = labelBorderWidth + 2 * labelPadding + labelTextHeight;
preparePath(cx, y, left, top, right, bottom, labelTailHeight - labelBorderWidth);
canvas.drawPath(labelPath, labelPaint);
canvas.drawText(text, cx - labelTextWidth / 2 + overflowOffset, labelBorderWidth + labelPadding - labelTextPaint.ascent(), labelTextPaint);
}
Is it possible to do so