【问题标题】:TextViews with dividers in between themTextViews 之间有分隔线
【发布时间】:2013-08-26 13:07:03
【问题描述】:

我正在尝试在 android studio 中重新创建以下布局:

因为我对 android 的东西很陌生,所以我首先尝试了 LinearLayout,并认为这可能无法使用它。现在我正在尝试使用 RelativeLayout 我已经用颜色创建了这个块:

        <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="80dp"
                android:background="@color/red_top">
        </RelativeLayout>

现在我想问我如何划分它,就像它在相同布局中显示在顶部的图像 1 条和底部的 2 条一样,我如何放置相同的边框?

【问题讨论】:

  • 他说他特别需要它们在同一个布局中; bakriOnFire 建议的 TableLayout 也很棒。
  • 它在同一个父布局(线性)中,在它里面,布局嵌套就完成了。
  • 啊,是的,你是对的。我很抱歉。
  • 没关系...!!!不用道歉。

标签: android android-layout android-linearlayout


【解决方案1】:

您可以使用以下 xml 代码来做到这一点:

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#CD96CD"
        android:text="TEXT" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000000" />

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#CD96CD"
            android:text="TEXT" />

        <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:background="#CD96CD"
            android:text="TEXT" />
    </LinearLayout>

</LinearLayout>

【讨论】:

  • 我怎样才能添加另一个带有底线的文本视图,这样我就可以拥有像 Text1 Text2 | Text3 Text4 如果我尝试添加另一个文本视图,它会在屏幕右侧展开。
  • 现在我有 2 个文本视图。如何在左侧添加 2 个我喜欢的内容:Wins:0(2 个文本视图),在右侧 Lost:0(2 个文本视图)?
  • 看看你可以通过 settext 设置文本,比如 textview.settext("Wins: "+ no.of wins) ,这将保存一个额外的文本视图,否则你可以通过我发布的代码来完成下面。
【解决方案2】:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout 
    android:id="@+id/FirstLinearLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/FirstTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_ONE" />
</LinearLayout>
<LinearLayout
    android:id="@+id/SecondLinearLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/FirstLinearLayout"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/SecondTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_TWO" />

    <TextView
        android:id="@+id/ThirdTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_Three" />
</LinearLayout>

首先,您需要一个容器来容纳所有组件;在我的示例中,我正在谈论的容器是RelativeLayout。相对布局允许他们的孩子使用相应的 ID 放置在他们的位置。看看我是如何使用android:layout_below="@+id/FirstLinearLayout" 定位另外两个LinearLayouts 的。

如果你真的坚持让它们在同一个布局中,请使用相对布局并将TextViews 定位如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >


    <TextView
        android:id="@+id/FirstTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TEXT_ONE" />


    <TextView
        android:id="@+id/SecondTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/FirstTextView"
        android:text="TEXT_TWO" />

    <TextView
        android:id="@+id/ThirdTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/FirstTextView"
        android:layout_toRightOf="@+id/SecondTextView"
        android:text="TEXT_Three" />


</RelativeLayout>

希望对你有所帮助。

【讨论】:

    【解决方案3】:

    TableLayout 是满足您需求的最佳选择。

    <TableLayout>
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="2"
                android:text="Text" />
    
        </TableRow>
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text" />
    
        </TableRow>
    </TableLayout>
    

    注意第一个TextView 中使用的layout_span 属性以跨越两列。

    【讨论】:

      【解决方案4】:

      你可以试试这个来添加额外的TextViews

      <TextView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:background="#CD96CD"
          android:text="TEXT" />
      
      <View
          android:layout_width="match_parent"
          android:layout_height="1dp"
          android:background="#000000" />
      
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal" >
      
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:gravity="center"
              android:background="#CD96CD"
              android:text="TEXT" />
           <View
              android:layout_width="1dp"
              android:layout_height="fill_parent"
              android:background="#000000" />
           <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:gravity="center"
              android:background="#CD96CD"
              android:text="TEXT" />
      
          <View
              android:layout_width="1dp"
              android:layout_height="fill_parent"
              android:background="#000000" />
      
          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:gravity="center"
              android:background="#CD96CD"
              android:text="TEXT" />
           <View
              android:layout_width="1dp"
              android:layout_height="fill_parent"
              android:background="#000000" />
           <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:gravity="center"
              android:background="#CD96CD"
              android:text="TEXT" />
      </LinearLayout>
      

      【讨论】:

        【解决方案5】:

        添加此视图;在你的文本视图之间画一个分隔符

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#000000" />
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2015-02-20
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2017-02-01
          • 1970-01-01
          • 2021-12-30
          • 1970-01-01
          相关资源
          最近更新 更多