Android 安卓中的标题边框
我想在Android中创建一个组件。组件应该是一个标题类似于Android 安卓中的标题边框,android,user-interface,kotlin,material-design,android-textinputlayout,Android,User Interface,Kotlin,Material Design,Android Textinputlayout,我想在Android中创建一个组件。组件应该是一个标题类似于TextInputLayout的边框,可以包含任何布局 我在中找到了一个解决方案,但我想知道是否有人可以共享另一个解决方案。我认为那一个很粗糙 布局包括两个线性布局,第一个是带有标题的顶部边框线,第二个是带有左、右和底部边框的内容 你觉得怎么样 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr
TextInputLayout
的边框,可以包含任何布局
我在中找到了一个解决方案,但我想知道是否有人可以共享另一个解决方案。我认为那一个很粗糙
布局包括两个线性布局,第一个是带有标题的顶部边框线,第二个是带有左、右和底部边框的内容
你觉得怎么样
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp">
<LinearLayout
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="20dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:weightSum="2">
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:layout_weight="1"
android:background="#2ebadc"/>
<TextView
android:gravity="bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Hello World" />
<View
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginRight="5dp"
android:background="#2ebadc"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp"
android:padding="10dp"
android:background="@drawable/topless_border">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is a border with title"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="The top inset of the border is set to -3 to make it disappear and then it's covered with a line with text in the middle by using LinearLayout with two Views and one TextView"/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
提前感谢。我了解了它是如何在材质组件库中实现的。他们用这个。遗憾的是,它不能直接使用,因为构造函数是包私有的。但是可以直接将这个类导入到项目中 为了获得想要的效果,我将向一个
ConstraintLayout
添加两个视图,一个用于标签,另一个用于内容。该解决方案还可以与任何其他父布局一起定位视图,但使用ConstraintLayout
可以根据需要轻松定位视图:
还可以通过调整标签TextView的填充来调整文本和行之间的间距
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-3dp">
<shape>
<solid android:color="@android:color/transparent" />
<stroke android:width="2dp" android:color="#2ebadc" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
// configuration of the shape for the outline
val shape = ShapeAppearanceModel.Builder()
.setAllCorners(RoundedCornerTreatment())
.setAllCornerSizes(16f)
.build()
// configuration of the CutOutDrawable - replace with themed values instead of hard coded colors
val drawable = CutoutDrawable(shape).apply {
setStroke(4f, Color.BLACK)
fillColor = ColorStateList.valueOf(Color.WHITE)
}
// content is the view with @+id/content
content.background = drawable
// label is the view with @+id/label
label.addOnLayoutChangeListener { _, left, top, right, bottom, _, _, _, _ ->
// offset the position by the margin of the content view
val realLeft = left - content.left
val realTop = top - content.top
val realRigth = right - content.left
val realBottom = bottom - content.top
// update the cutout part of the drawable
drawable.setCutout(
realLeft.toFloat(),
realTop.toFloat(),
realRigth.toFloat(),
realBottom.toFloat()
)
}