Android：水平线，中间有文字

Question

我想知道如何用中间的文字做这个水平线，看看这个截图：

有人有想法在Android上这样做吗？我找到了如何做一个水平线，但从来没有用文字。

谢谢！

Answer 1

只需更改颜色即可与图像上的颜色相匹配。我还建议你使用渐变作为那些虚拟视图的背景，如果你花一点时间，它看起来比屏幕截图好很多。

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true">

        <TextView
            android:id="@+id/tvText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="lala"
            android:textColor="#FFFFFF"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="16dp"
            android:layout_toLeftOf="@id/tvText"
            android:background="#FF0000"
            />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_centerVertical="true"
            android:layout_marginRight="16dp"
            android:layout_toRightOf="@id/tvText"
            android:background="#FF0000"
            />

    </RelativeLayout>

Answer 2

public class CenterLineTextView extends android.support.v7.widget.AppCompatTextView {

private final Rect mBounds = new Rect();
private final Paint mPaint = new Paint();
private int mPadding;
private int mStroke;

public CenterLineTextView(Context context) {
    super(context);
    init();
}

public CenterLineTextView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
}

public CenterLineTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    if (isInEditMode()) {
        return;
    }
    setGravity(Gravity.CENTER);
    mStroke = getContext().getResources().getDimensionPixelSize(R.dimen.divider);
    mPadding = getContext().getResources().getDimensionPixelSize(R.dimen.login_or_padding);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setStrokeWidth(mStroke);
    mPaint.setColor(getPaint().getColor());
    getPaint().getTextBounds(getText().toString(), 0, getText().length(), mBounds);
    canvas.drawLine(0, getHeight() / 2, (getWidth() - mBounds.right) / 2 - mPadding, getHeight() / 2, mPaint);
    canvas.drawLine(mPadding + (getWidth() + mBounds.right) / 2, getHeight() / 2, getWidth(), getHeight() / 2, mPaint);
}
}

Answer 3

您只能使用一行的View和文本的TextView来实现。只需在TextView的XML中添加android:layout_centerHorizontal="true"。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_margin="12dp"
            android:background="@android:color/black" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:background="@android:color/white"
            android:layout_centerHorizontal="true"
            android:text="or" />
    </RelativeLayout>

seperator line with text in middle

Answer 4

在 xml

中

android:layout_width="fill_parent"
android:layout_height="2dip"
android:background="#FF00FF00" />

或代码 -

View ruler = new View(myContext); ruler.setBackgroundColor(0xFF00FF00);
theParent.addView(ruler,
new ViewGroup.LayoutParams( ViewGroup.LayoutParams.FILL_PARENT, 2));

Answer 5

试试这个

相应地设置视图的宽度

 <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">


            <View
            android:id="@+id/topDivider"
            android:layout_width="50dp"
            android:layout_height="1dp"
            android:layout_below="@id/internal"
            android:background="@color/bright_blue"/>

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Middle text here"
            android:layout_gravity="center_horizontal"
            android:id="@+id/lv_shopName" />


            <View
            android:id="@+id/topDivider"
            android:layout_width="50dp"
            android:layout_height="1dp"
            android:layout_below="@id/internal"
            android:background="@color/bright_blue"/>


            </LinearLayout>

Answer 6

<LinearLayout 
    android:id="@+id/linerlayout"
     xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <View
        android:layout_marginRight="2dp"
        android:id="@+id/divider"
        android:layout_width="wrap conent"
        android:layout_height="1dp"

        android:background="#00000000" />

    <TextView
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        Text="abc"/>

 <View
        android:layout_marginLeft="2dp"
        android:id="@+id/divider"
        android:layout_width="wrap conent"
        android:layout_height="1dp"

        android:background="#00000000" />