将子视图保留在ConstraintLayout中的布局内 [英] Keep child view inside layout in ConstraintLayout
问题描述
我一直在尝试使用ConstraintLayout实现显示进度数据的栏.问题是，当准则在条的左边或右边时，我的TextView超出了布局范围.
I have been trying to implement a bar showing progress data with ConstraintLayout. The problem is my TextView goes out of the layout bound when the Guideline is too left or too right of the bar.
我尝试将TextView的约束条件从连接到"@ id/guideline"的约束更改为"parent"，并添加horizontalBias，但是TextView的定位将变得不准确(稍微移至右侧/左侧)取决于黄条的长度)
I have tried to change the constraints of the TextView from connected to the "@id/guideline" into "parent", and add horizontalBias instead, but then the TextView will become inaccurately positioned (a little shifted to right/left side depends on the yellow bar length)
以下是当前结果的图像:
Here is the image of current result:
这是布局代码:
<android.support.constraint.ConstraintLayout
android:id="@+id/layoutConstraint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:paddingLeft="16dp"
android:paddingTop="100dp"
android:paddingRight="16dp"
android:paddingBottom="16dp">
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".01" />
<TextView
android:id="@+id/textProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="12dp"
android:textColor="@color/black"
android:textSize="12sp"
app:layout_constraintEnd_toEndOf="@id/guideline"
app:layout_constraintStart_toStartOf="@id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="current value" />
<View
android:id="@+id/layoutProgress"
android:layout_width="0dp"
android:layout_height="8dp"
android:background="@drawable/background_rounded_corner_light_grey"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/textProgress" />
<View
android:id="@+id/currentProgress"
android:layout_width="0dp"
android:layout_height="8dp"
android:background="@drawable/background_rounded_corner_yellow"
app:layout_constraintEnd_toStartOf="@id/guideline"
app:layout_constraintStart_toStartOf="@id/layoutProgress"
app:layout_constraintTop_toBottomOf="@id/textProgress" />
</android.support.constraint.ConstraintLayout>
推荐答案
您似乎想将文本当前值"保持在进度条末尾的居中位置；但是，如果此位置导致文本在左侧或右侧被截断，则文本应与ConstraintLayout的一侧对齐，以使其保持完全可见.
It looks like you want to keep the text "current value" centered on the end of the progress bar; however, if this placement causes the text to be cutoff on either the left side or the right, the text should be aligned to the side of the ConstraintLayout so that it remains entirely visible.
您的TextView以您以编程方式定位在0％和100％(我认为是)之间的百分比准则为中心.
Your TextView is centered on the percentage guideline that you position programmatically between 0% and 100% (I assume.)
我建议您根据像素(dp或px)将准则更改为一个，并将TextView定位在新准则的中心.而不是将指南的位置从零更改为100％，而是计算了一个新范围:
I suggest that you change the guideline to one based upon pixels (dp or px) and position your TextView that is centered on the new guideline. Instead of varying the guideline position from zero to 100%, calculated a new range:
范围的低端= TextView宽度的1/2加任何边距.
Low end of range = 1/2 the width of TextView plus whatever margin.
范围的上限= ConstraintLayout的宽度-TextView的1/2宽度减去任何边距.
High end of range = width of the ConstraintLayout - 1/2 width of the TextView minus whatever margin.
边距将保持在范围的低端，而进度下降到低端的左侧.当进度越过低端时，指南将在进度条的当前位置(低端)的右侧向右移动.随着进度继续达到100％，该准则将停止在高端.
The margin will remain at the low end of the range while progress falls to the left of the low end. As the progress goes past the low end, the guideline will move to the right by the current location of the progress bar - the low end. The guideline will stop at the high end as progress continues on to 100%.
如果您要遵守百分比准则，请按照上述方法计算下限和上限.然后，您可以根据容器的宽度计算低百分比和高百分比.
If you want to stick with the percentage guideline, compute the low and high ends as outlined above. You can then compute the low and high percentages based upon the width of the container.
这是一个简短的演示，它使用一个简单的块进行进度:
Here is a short demo that uses a simple block for progress:
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ConstraintLayout mLayout;
private View mProgress;
private int mProgressPosition;
private int mGuidelineMin;
private int mGuidelineMax;
private Guideline mGuideline;
private int mIncrement;
private Handler mHandler = new Handler();
private int mMargin;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mLayout = findViewById(R.id.layout);
mGuideline = findViewById(R.id.guideline);
mProgress = findViewById(R.id.progress);
mMargin = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 16,
getResources().getDisplayMetrics()
);
mLayout.post(new Runnable() {
private int mLoopCount = 100;
@Override
public void run() {
int textWidth = findViewById(R.id.textView).getWidth();
mGuidelineMin = textWidth / 2 + mMargin;
mGuidelineMax = mLayout.getWidth() - textWidth / 2 - mMargin;
mGuideline.setGuidelineBegin(mGuidelineMin);
mIncrement = (mLayout.getWidth() - mProgress.getWidth()) / mLoopCount;
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
mProgressPosition += mIncrement;
mProgress.setTranslationX(mProgressPosition);
int guidelinePosition =
Math.max(mGuidelineMin, mProgressPosition + mProgress.getWidth() / 2);
if (guidelinePosition > mGuidelineMax) {
guidelinePosition = mGuidelineMax;
}
mGuideline.setGuidelineBegin(guidelinePosition);
if (--mLoopCount > 0) {
mHandler.postDelayed(this, 100);
}
}
}, 100);
}
});
}
}
activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="@+id/progress"
android:layout_width="15dp"
android:layout_height="15dp"
android:background="@android:color/holo_red_light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.17" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Current value"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.07999998" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="140dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
这篇关于将子视图保留在ConstraintLayout中的布局内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
