【问题标题】:Android Drawing Separator/Divider Line in Layout?布局中的Android绘图分隔符/分隔线?
【发布时间】:2011-06-30 07:24:13
【问题描述】:

我想在布局的中间画一条线,并将其用作其他项目(如 TextView)的分隔符。有没有一个很好的小部件。我真的不想使用图像,因为很难将其他组件与之匹配。我也希望它相对定位。谢谢

【问题讨论】:

    标签: android layout draw


    【解决方案1】:

    我通常使用这段代码添加水平线:

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

    要添加垂直分隔符,请切换 layout_widthlayout_height

    【讨论】:

    • 也适合我。也可以加上android:layout_marginTop="2dp" (等)在顶部和底部添加空格。
    • 这非常适合简单的水平线。但是,如果您希望在末端褪色,请使用此处的其他方法之一。
    • 或者更好,使用layout_height="2dp" and android:background="?android:attr/listDivider"
    • 您应该使用 px 而不是 dp 作为分隔线。除非您真的希望分隔线大小发生变化,并且可能会降至 1/2 像素以下。 :)
    【解决方案2】:

    改进Alex KucherenkoDan Dar3提供的答案

    我将此添加到我的样式中:

    <style name="Divider">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item>
        <item name="android:background">?android:attr/listDivider</item>
    </style>
    

    然后在我的布局中代码更少,更易于阅读。

    <View style="@style/Divider"/>
    

    【讨论】:

    • 这很棒,恕我直言,这是最好的解决方案!这样您就不必手动设置颜色,因此当您拥有多个主题(我使用 Theme.Sherlock 和 Theme.Sherlock.Light)时,一致性会更容易。
    • +1 - 一个很好的替代我目前使用的 9 行 解决方案。非常...时尚
    • 这似乎是最干净的解决方案。谢谢!
    • 这似乎可行,但在使用 API 21 的 Android Studio 预览版中没有显示...我无法测试这是否只是预览的问题,还是在真实设备上...
    • 我以为Android Studio预览中也没有显示,但是放大预览后,我可以看到显示的微弱线条。
    【解决方案3】:

    将此添加到您想要分隔线的布局中(修改属性以满足您的需要):

    <ImageView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@android:drawable/divider_horizontal_dark"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingBottom="2dp"
        android:paddingTop="2dp" />
    

    【讨论】:

    • 谢谢,为我工作。在 DrawerLayout 中看起来特别好
    • @Ahmed 我想当你有白色活动背景时你不能使用它,在这种情况下使用 android:src="@android:drawable/divider_horizo​​ntal_bright" 代替。
    【解决方案4】:

    您可以在LinearLayout 中使用它:

    android:divider="?android:dividerHorizontal"
    android:showDividers="middle"
    

    例如:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="?android:dividerHorizontal"
        android:showDividers="middle"
        android:orientation="vertical" >            
    
            <TextView 
             android:layout_height="wrap_content"
             android:layout_width="wrap_content"
             android:text="abcd gttff hthjj ssrt guj"/>
    
            <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="abcd"/>
            <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="abcd gttff hthjj ssrt guj"/>
    
            <TextView 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="abcd"/>
    
    </LinearLayout>
    

    【讨论】:

    • 请注意,这仅适用于 API 级别 11
    • 不幸的是,这种方法没有用粗体突出分隔线。
    • 越少越好!谢谢
    • 或 android:showDividers="beginning|middle|end"> 在顶部和底部也显示分隔线
    【解决方案5】:

    最简单的方法:

    垂直分隔线:

    &lt;View style="@style/Divider.Vertical"/&gt;

    水平分隔线:

    &lt;View style="@style/Divider.Horizontal"/&gt;

    就是这样!

    把这个放到res&gt;values&gt;styles.xml

    <style name="Divider">
        <item name="android:background">?android:attr/listDivider</item> //you can give your color here. that will change all divider color in your app.
    </style>
    
    <style name="Divider.Horizontal" parent="Divider">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1dp</item> // You can change thickness here.
    
    </style>
    
    <style name="Divider.Vertical" parent="Divider">
        <item name="android:layout_width">1dp</item>
        <item name="android:layout_height">match_parent</item>
    </style>
    

    【讨论】:

    • 这将整个事物与一个视图重叠。
    【解决方案6】:
    <TextView
        android:id="@+id/line"
        style="?android:attr/listSeparatorTextViewStyle"
        android:paddingTop="5dip"
        android:gravity="center_horizontal"
        android:layout_below="@+id/connect_help"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000" />
    

    【讨论】:

    • 我会比其他人更捍卫这种方法,因为它使用了已经存在的样式,但它可能不会让所有人满意。
    • 这种方法的缺点是,糟糕的 Android 并不能保证现有的风格。
    【解决方案7】:

    使用此代码。会有帮助的

    <LinearLayout
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:divider="?android:dividerHorizontal"
        android:gravity="center"
        android:orientation="vertical"
        android:showDividers="middle" >
    

    【讨论】:

      【解决方案8】:
      <View
                  android:layout_width="2dp"
                  android:layout_height="match_parent"
                  android:layout_marginTop="4dp"
                  android:background="@android:color/darker_gray" />
      

      在两个Layouts之间放这段代码得到Divider。

      【讨论】:

      • 结果相同,与其他答案相比,代码更少。谢谢
      【解决方案9】:

      就这样写吧:

       android:divider="?android:dividerHorizontal"
       android:showDividers="middle"
      

      完整示例:

      <LinearLayout
              android:id="@+id/llTipInformation"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:layout_below="@+id/tvServiceRating"
              android:orientation="horizontal"
              android:divider="?android:dividerHorizontal"
              android:layout_marginTop="@dimen/activity_horizontal_margin"
              android:showDividers="middle">
      
              <TextView
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:gravity="center"
                  android:text="@string/main.msg.tippercent"
                  android:textAppearance="?android:attr/textAppearanceMedium"
                  android:textColor="@color/colorWhite"
                  android:layout_marginTop="@dimen/activity_vertical_margin"/>
              <TextView
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:gravity="center"
                  android:text="@string/main.msg.tiptotal"
                  android:textAppearance="?android:attr/textAppearanceMedium"
                  android:textColor="@color/colorWhite"
                  android:layout_marginTop="@dimen/activity_vertical_margin"/>
      
      </LinearLayout>
      

      【讨论】:

      • 这应该被接受,因为它是向LinearLayout添加分隔符的最正确方法
      • 这将适用于布局中的所有元素 ,, corrent ?
      【解决方案10】:

      如果您使用 actionBarSherlock,您可以使用 com.actionbarsherlock.internal.widget.IcsLinearLayout 类来支持分隔线并在视图之间显示它们。

      使用示例:

      <com.actionbarsherlock.internal.widget.IcsLinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:divider="@drawable/divider"
          android:dividerPadding="10dp"
          android:orientation="vertical"
          android:showDividers="beginning|middle|end" >
      ... children...
      

      res/drawable/divider.xml:

      <?xml version="1.0" encoding="utf-8"?>
      <shape xmlns:android="http://schemas.android.com/apk/res/android" >
      
          <size android:height="2dip" />
      
          <solid android:color="#FFff0000" />
      
      </shape>
      

      请注意,出于某种原因,图形设计器中的预览显示为“android.graphics.bitmap_delegate.nativeRecycle(I)Z”。不知道这意味着什么,但可以忽略它,因为它在新版本的 android 和旧版本上都可以正常工作(在 android 4.2 和 2.3 上测试)。

      似乎只有在为图形设计器使用 API17 时才会显示该错误。

      【讨论】:

        【解决方案11】:

        添加此视图;在您的textviews 之间画一个分隔符

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

        【讨论】:

          【解决方案12】:

          它非常简单。只需创建一个具有黑色背景颜色的视图。

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

          这将创建一条带有背景颜色的水平线。您还可以像任何其他视图一样添加其他属性,例如边距、填充等。

          【讨论】:

            【解决方案13】:

            您可以在第一个 TextView 之后使用此 &lt;View&gt; 元素。

             <View
                     android:layout_marginTop="@dimen/d10dp"
                     android:id="@+id/view1"
                     android:layout_width="fill_parent"
                     android:layout_height="1dp"
                     android:background="#c0c0c0"/>
            

            【讨论】:

              【解决方案14】:

              这是您的答案..这是在控件之间画线的示例...

              <TextView
                          android:id="@+id/textView1"
                          style="@style/behindMenuItemLabel1"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:layout_marginTop="1dp"
                          android:text="FaceBook Feeds" />
              
                       <View
                           android:layout_width="fill_parent"
                           android:layout_height="2dp"
                           android:background="#d13033"/>
              
                       <ListView
                          android:id="@+id/list1"
                          android:layout_width="350dp"
                          android:layout_height="50dp" />
              

              这段代码在两个控件之间画线...

              【讨论】:

                【解决方案15】:

                它将水平分隔线添加到布局中的任何位置。

                    <TextView
                       style="?android:listSeparatorTextViewStyle"
                       android:layout_width="fill_parent"
                       android:layout_height="wrap_content"/>
                

                【讨论】:

                • 该行仅在 Textview 下方。
                【解决方案16】:

                运行时版本:

                View dividerView = new View(getContext());
                LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.FILL_PARENT, UIUtils.dpToPix(getContext(), 1));
                dividerView.setLayoutParams(lp);
                
                TypedArray array = getContext().getTheme()
                    .obtainStyledAttributes(new int[] {android.R.attr.listDivider});
                Drawable draw = array.getDrawable(0);       
                array.recycle();
                
                dividerView.setBackgroundDrawable(draw);
                mParentLayout.addView(dividerView);
                

                【讨论】:

                  【解决方案17】:

                  使用此xml代码添加垂直线

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

                  使用此xml代码添加水平线

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

                  【讨论】:

                    【解决方案18】:
                    //for vertical line:
                    
                    <View
                       android:layout_width="1dp"
                       android:layout_height="fill_parent"
                       android:background="#00000000" />
                    
                    
                    
                    
                    //for horizontal line: 
                    
                    <View
                       android:layout_width="fill_parent"
                       android:layout_height="1dp"
                       android:background="#00000000" />
                    //it works like a charm
                    

                    【讨论】:

                      【解决方案19】:

                      在使用android:layout_weight 属性为布局组件分配可用屏幕空间的情况下,例如

                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:orientation="horizontal">
                      
                          <LinearLayout
                              android:layout_width="0dp"
                              android:layout_weight="1"
                              android:layout_height="match_parent"
                              android:orientation="vertical">
                              ...
                              ...
                          </LinearLayout>
                      
                           /* And we want to add a verical separator here */
                      
                          <LinearLayout
                              android:layout_width="0dp"
                              android:layout_weight="1"
                              android:layout_height="match_parent"
                              android:orientation="vertical">
                              ...
                              ...
                           </LinearLayout>
                      
                      </LinearLayout>
                      

                      要在已经占据整个屏幕空间的现有两个布局之间添加分隔符,我们不能只添加另一个带有 android:weight:"1" 的 LinearLayout,因为这会产生三个我们不想要的等宽列。相反,我们将减少为这个新布局提供的空间量。 最终代码如下所示:

                      <LinearLayout
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:orientation="horizontal">
                      
                          <LinearLayout
                              android:layout_width="0dp"
                              android:layout_weight="1"
                              android:layout_height="match_parent"
                              android:orientation="vertical">
                              ...
                              ...
                          </LinearLayout>
                      
                                          /* *************** ********************** */
                      
                          /* Add another LinearLayout with android:layout_weight="0.01" and 
                             android:background="#your_choice" */
                          <LinearLayout
                              android:layout_width="0dp"
                              android:layout_height="match_parent"
                              android:layout_weight="0.01"
                              android:background="@android:color/darker_gray"
                           />
                      
                          /* Or View can be used */
                          <View
                              android:layout_width="1dp"
                              android:layout_height="match_parent"
                              android:layout_marginTop="16dp"
                              android:background="@android:color/darker_gray"
                           />
                      
                                           /* *************** ********************** */
                      
                          <LinearLayout
                              android:layout_width="0dp"
                              android:layout_weight="1"
                              android:layout_height="match_parent"
                              android:orientation="vertical">
                              ...
                              ...
                          </LinearLayout>
                      
                      </LinearLayout>
                      

                      【讨论】:

                        【解决方案20】:

                        如果你要经常使用它,最好的办法是

                        styles.xml:

                        <style name="Seperator">
                                <item name="android:layout_width">match_parent</item>
                                <item name="android:layout_height">1dp</item>
                                <item name="android:background">@color/light_color</item>
                            </style>
                        

                        现在在您的布局中,只需像这样添加它:

                        <View style="@style/Seperator" />
                        

                        【讨论】:

                          【解决方案21】:

                          要完成 Camille Sévigny 的回答,您还可以定义自己的线条形状,例如自定义线条颜色。

                          在可绘制目录中定义一个 xml 形状。 line_horizo​​ntal.xml:

                          <?xml version="1.0" encoding="utf-8"?>
                          <shape xmlns:android="http://schemas.android.com/apk/res/android"
                              xmlns:app="http://schemas.android.com/apk/res-auto" android:shape="line">
                              <stroke android:width="2dp" android:color="@android:color/holo_blue_dark" />
                              <size android:width="5dp" />
                          </shape>
                          

                          在您的布局中使用此行与希望的属性:

                              <ImageView
                                  android:layout_width="fill_parent"
                                  android:layout_height="wrap_content"
                                  android:paddingBottom="2dp"
                                  android:paddingLeft="5dp"
                                  android:paddingRight="5dp"
                                  android:paddingTop="2dp"
                                  android:src="@drawable/line_horizontal" />
                          

                          【讨论】:

                            【解决方案22】:
                            <ImageView
                                android:layout_width="fill_parent"
                                android:layout_height="wrap_content"
                                android:paddingBottom="2dp"
                                android:paddingLeft="5dp"
                                android:paddingRight="5dp"
                                android:paddingTop="2dp"
                                android:scaleType="fitXY"
                                android:src="?android:attr/listDivider" />
                            

                            【讨论】:

                            • 不使用 android:src="?android:attr/listDivider" .... 只需添加 android:background="#FFFFFF"
                            【解决方案23】:

                            使用这个添加一条水平黑线:

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="1dp"
                                android:background="#000000"
                                android:layout_marginTop="10dp"/>
                            

                            【讨论】:

                              【解决方案24】:

                              我通常使用这个代码:

                              <ImageView
                                  android:id="@+id/imageView2"
                                  android:layout_width="match_parent"
                                  android:layout_height="1dp"
                                  android:layout_alignParentLeft="true"
                                  android:layout_marginLeft="10dp"
                                  android:layout_marginRight="10dp"
                                  android:layout_marginTop="10dp"
                                  android:background="#aa000000" />
                              

                              如果你的布局中有一个对象,并且你想在 ImageView 中使用这个属性设置下面的行:

                              android:layout_below="@+id/textBox1"
                              

                              【讨论】:

                                【解决方案25】:
                                <layer-list xmlns:android="http://schemas.android.com/apk/res/android"
                                android:shape="rectangle">
                                <item
                                    android:bottom="0dp"
                                    android:left="-2dp"
                                    android:right="-2dp"
                                    android:top="-2dp">
                                    <shape android:shape="rectangle">
                                        <stroke
                                            android:width="1dp"
                                            android:color="@color/divider" />
                                    </shape>
                                </item>
                                

                                【讨论】:

                                  【解决方案26】:

                                  这将帮助您解决此问题。 这里创建了一个小视图,用一条黑线作为两个视图之间的分隔符。

                                   <View
                                          android:layout_width="3dp"
                                          android:layout_height="wrap_content"
                                          android:background="@android:color/black"
                                           />
                                  

                                  【讨论】:

                                    【解决方案27】:

                                    这里是代码“两个文本视图之间的水平分隔线”。 试试这个

                                        <TextView
                                            android:id="@id/textView"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:textSize="5dp"
                                            android:inputType="textPersonName"
                                            android:text:"address" />
                                    
                                    
                                        <View
                                            android:layout_width="match_parent"
                                            android:layout_height="1dp"
                                            android:background="@android:color/black"/>
                                    
                                    
                                        <TextView
                                            android:id="@id/textView7"
                                            android:layout_width="match_parent"
                                            android:layout_height="wrap_content"
                                            android:inputType="textPersonName" 
                                            android:text:"Upload File" />/>
                                    

                                    【讨论】:

                                      【解决方案28】:

                                      将空间分成两等份:

                                      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                          android:layout_width="match_parent"
                                          android:layout_height="match_parent"
                                          android:orientation="vertical">
                                      
                                          <LinearLayout
                                              android:layout_width="match_parent"
                                              android:layout_height="0dp"
                                              android:layout_weight="1"
                                              android:divider="?android:dividerHorizontal"
                                              android:showDividers="end"></LinearLayout>
                                      
                                          <LinearLayout
                                              android:layout_width="match_parent"
                                              android:layout_height="0dp"
                                              android:layout_weight="1"></LinearLayout>
                                      
                                      </LinearLayout>
                                      

                                      请注意,一个部分的末尾包含一个分隔符

                                      【讨论】:

                                        【解决方案29】:

                                        简单的解决方案

                                        只需将此代码添加到您的布局中,并将 'Id_of__view_present_above' 替换为视图的 id,在其下方您需要分隔线。
                                        <TextView
                                          android:layout_width="match_parent"
                                          android:layout_height="1dp"
                                          android:background="#c0c0c0"
                                          android:id="@+id/your_id"
                                          android:layout_marginTop="16dp" 
                                          android:layout_below="@+id/Id_of__view_present_above"
                                        />
                                        

                                        【讨论】:

                                        【解决方案30】:

                                        例如,如果您将 recyclerView 用于您的项目:

                                        在 build.gradle 中写入:

                                        dependencies {
                                            compile 'com.yqritc:recyclerview-flexibledivider:1.4.0'
                                        

                                        如果要设置颜色、大小和边距值,可以指定如下:

                                        RecyclerView recyclerView = (RecyclerView) 
                                        findViewById(R.id.recyclerview);
                                        recyclerView.addItemDecoration(
                                                new HorizontalDividerItemDecoration.Builder(this)
                                                        .color(Color.RED)
                                                        .sizeResId(R.dimen.divider)
                                                        .marginResId(R.dimen.leftmargin, R.dimen.rightmargin)
                                                        .build());
                                        

                                        【讨论】:

                                          猜你喜欢
                                          • 1970-01-01
                                          • 1970-01-01
                                          • 2014-12-18
                                          • 1970-01-01
                                          • 1970-01-01
                                          • 2018-11-15
                                          • 1970-01-01
                                          • 2012-08-20
                                          • 1970-01-01
                                          相关资源
                                          最近更新 更多