Вертикальна лінія, що використовує XML, що малюється


162

Я намагаюся розібратися, як визначити вертикальну лінію (товщиною 1dp), яку слід використовувати як графічну.

Щоб зробити горизонтальний, це досить просто:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="1dp" android:color="#0000FF"/>
    <size android:height="50dp" />     
</shape>

Питання в тому, як зробити цю лінію вертикальною?

Так, є обхідні шляхи, такі як малювання прямокутника форми товщиною 1 пікселя, але це ускладнює малюнок XML, якщо він складається з декількох <item>елементів.

Хтось мав з цим шанс?

ОНОВЛЕННЯ

Справа досі не вирішена. Однак для всіх, хто перебуває на хрестовому поході документації на Android - це може бути корисним: Відсутній посібник з Android XML

ОНОВЛЕННЯ

Я не знайшов іншого способу, крім того, який я позначив правильним. Це трюк, хоча відчуває себе трохи "важким", тому, якщо вам трапляється знати, відповідь не забудьте поділитися;)

Відповіді:


394

Замість форми ви можете спробувати View:

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

Я використовував це лише для горизонтальних ліній, але я думаю, що це буде працювати і для вертикальних ліній.

Використання:

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

для горизонтальної лінії.


4
дякую Марку :)! Я усвідомлюю, що можу використовувати думку, щоб досягти цього. Річ у тому, що я складаю трохи складніший вигляд, який я хочу використовувати як малюнок для фону комірки таблиці. Існують різні типи форм / градієнтів / ліній. Використання перегляду БУДЕ РЕШЕННЯ, однак я повинен був би вкласти його в інший малюнок "шар", і це потенційно може стріляти собі в ногу, коли я наткнусь на зміну розміру і т. Д. Мені цікаво, чому немає документації на " форма "xmls, може хтось із google міг нас просвітити? :)
Каспа

1
Використання marginRight / Start та Left / End також іноді цікаво, щоб отримати місце з боків.
Джордж

108

Ви можете вкласти свою форму всередину обертової мітки.

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape 
        android:shape="line">
        <stroke
            android:width="1dp"
            android:color="#ff00ff"
            android:dashWidth="1dp"
            android:dashGap="2dp" />
    </shape>
</rotate>

Однак єдиною проблемою є те, що параметри компонування, визначені у вашому макеті, xml - це розміри, які використовуються для малювання оригінальної форми. Значить, якщо ви хочете, щоб ваша лінія була заввишки 30dp, вам потрібно визначити layout_width в 30dp у своєму макеті xml. Але кінцева ширина також буде 30dp у тому випадку, що, ймовірно, небажано для більшості ситуацій. Це по суті означає, що і ширина, і висота повинні бути однаковими, значення потрібної довжини для лінії. Я не міг зрозуміти, як це виправити.

Це, здається, є "андроїдним способом" рішення, але, якщо не існує певного виправлення чи вирішення проблеми з розмірами, про яку я згадую, тоді це, швидше за все, не спрацює для більшості людей. Нам дійсно потрібен атрибут орієнтації у <form /> або <stroke />.

Ви також можете спробувати посилатися на інший рисунок у атрибутах поворотного тегу, наприклад:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90"
    android:drawable="@drawable/horizontal_line" />

Однак я не перевіряв цього і очікую, що це матиме ті ж самі проблеми.

- EDIT -

О, я насправді з’ясував виправлення. Ви можете використовувати негативний запас у макеті xml, щоб позбутися від небажаного додаткового простору. Як от:

<ImageView
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginLeft="-15dp"
    android:layout_marginRight="-15dp"
    android:src="@drawable/dashed_vertical_line" />

4
тоді як негативний запас буде працювати на 99% пристроїв .... просто знайте, є пристрої, які змусять закрити, якщо ви це зробите. На деяких пристроях виникають проблеми із завищенням від’ємної норми
Кент Андерсен

2
@cephus Я використовую ваш перший код, але мені потрібен рядок у верхній частині подання. Це в центрі мого погляду. Як я можу встановити для неї гравітацію (у файлі xml форми)?
Бехзад

20

Ви можете використовувати атрибут обертання

 <item>
    <rotate
        android:fromDegrees="90"
        android:toDegrees="90"
        android:pivotX="50%"
        android:pivotY="50%" >
        <shape
            android:shape="line"
            android:top="1dip" >
            <stroke
                android:width="1dip"
                 />
        </shape>
    </rotate>
</item>

6
Це, безумовно, краща (або найкраща) відповідь, оскільки, хоча @ commonsware відповіді достатньо для нормальних вертикальних ліній. Якщо ми не хочемо створювати пунктирні лінії (скажімо, наприклад), це єдина відповідь, яка б працювала належним чином.
Субін Себастьян

16
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >
    <stroke android:width="1dp" android:color="@color/white" />
    <size android:width="2dp" />
</shape>

Робота для мене. Розмістіть його як фон перегляду з плоскою прозорістю або фіксованим розміром у висоті dp


11

Я придумав інше рішення. Ідея полягає в тому, щоб спочатку заповнити малюнок кольором, який вам подобається, щоб бути лінією, а потім знову заповнити всю область кольором фону, використовуючи накладки ліворуч або праворуч. Очевидно, що це працює лише для вертикальної лінії в крайній лівій або правій частині області малювання.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/divider_color" />
    <item android:left="6dp" android:drawable="@color/background_color" />
</layer-list>

Мені знадобився фон з рамками зліва, справа, знизу, і це працювало для мене, дякую!
Андрій Черненко

Чудово, завдяки цьому мені вдалося створити акуратні роздільники в моєму LinearLayout ( showDividers="middle"). Щоб отримати роздільник 2dp, мені потрібно було вказати android:left="3dp"тут.
Джонік

Порада: щоб зробити цей малюнок кориснішим загалом, використовуйте @android:color/transparentзамість жорсткого кодування @color/background_color.
Джонік

Насправді для моїх потреб у вертикальному розділювачі це рішення ще простіше . :)
Jonik

@Jonik Звичайно, але це працює лише з видом фіксованої висоти, а не з wrap_content.
Ерік Кок

10

Я думаю, що це найпростіше рішення:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:gravity="center">
        <shape android:shape="rectangle">
            <size android:width="1dp" />
            <solid android:color="#0000FF" />
        </shape>
    </item>

</layer-list>

Чудовий. Додати android:heightдо , sizeякщо ви хочете контролювати також , що вимір.
Джуліо Піанкастеллі

4

Мені потрібно було додавати свої погляди динамічно / програмно, тому додавання додаткового перегляду було б громіздким. Моя висота перегляду була WRAP_CONTENT, тому я не міг використати рішення прямокутника. Я знайшов записи блогу тут про розширення TextView, перекриваючи OnDraw () і живопису в лінії, так що я здійснив це , і це добре працює. Дивіться мій код нижче:

public class NoteTextView extends TextView {
    public NoteTextView(Context context) {
       super(context);
    }
    private Paint paint = new Paint();
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setColor(Color.parseColor("#F00000FF"));
        paint.setStrokeWidth(0);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawLine(0, 0, 0, getHeight(), paint);
    }
}

Мені знадобилася вертикальна лінія зліва, але параметри промальовування такі, drawLine(startX, startY, stopX, stopY, paint)щоб ви могли намалювати будь-яку пряму лінію в будь-якому напрямку попереду. Тоді у своїй діяльності я NoteTextView note = new NoteTextView(this); сподіваюся, що це допомагає.


3

дуже просто ... додати вертикальну лінію в Android XML ...

<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:rotation="90"
android:background="@android:color/darker_gray"/>

Це чудово працює, коли ви не можете використовувати fill_parent для висоти, оскільки для батьківської висоти встановлено значення wrap_content.
Сергій Алдухов

2

Залежить, де ви хочете мати вертикальну лінію, але якщо ви хочете, наприклад, вертикальної межі, ви можете мати батьківський вигляд мати фоновий малюнок. А потім можна визначити рисункове так:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="1dp" android:color="#000000" />
            <solid android:color="#00ffffff" />

        </shape>
    </item>

    <item android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#00ffffff" />
        </shape>
    </item>

</layer-list>

Цей приклад створить 1dp тонку чорну лінію в правій частині подання, яка буде мати цю схему як фон.


2
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-3dp"
        android:left="-3dp"
        android:top="-3dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <stroke
                android:width="2dp"
                android:color="#1fc78c" />
        </shape>

    </item>

</layer-list>

2

Схоже, ніхто не згадував про цей варіант:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/white" android:width="1dp"/>
</layer-list>

1

Ви можете використовувати фігуру, але замість лінії зробити її прямокутною.

android:shape="rectangle">
<stroke
    android:width="5dp"
    android:color="#ff000000"
    android:dashGap="10px"
    android:dashWidth="30px" />

і у своєму макеті скористайтеся цим ...

<ImageView
    android:layout_width="7dp"
    android:layout_height="match_parent"
    android:src="@drawable/dashline"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layerType="software"/>

Можливо, вам доведеться пограти з шириною, залежно від розміру тире, щоб звести її в єдиний рядок.

Сподіваюсь, це допомагає ура


1
add this in your styles.xml

        <style name="Divider">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:background">@color/divider_color</item>
        </style>

        <style name="Divider_invisible">
            <item name="android:layout_width">1dip</item>
            <item name="android:layout_height">match_parent</item>
        </style>

then wrap this style in a linear layout where you want the vertical line, I used the vertical line as a column divider in my table. 

     <TableLayout
                android:id="@+id/table"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:stretchColumns="*" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    android:background="#92C94A" >

                    <TextView
                        android:id="@+id/textView11"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp" />
    //...................................................................    

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

                        <View style="@style/Divider_invisible" />
                    </LinearLayout>
        //...................................................................
                    <TextView
                        android:id="@+id/textView12"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/main_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
  //...............................................................  
                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

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

    //...................................................................
                    <TextView
                        android:id="@+id/textView13"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/side_wo_colon"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

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

                    <TextView
                        android:id="@+id/textView14"
                        android:paddingBottom="10dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingTop="10dp"
                        android:text="@string/total"
                        android:textColor="@color/white"
                        android:textSize="16sp" />
                </TableRow>

                <!-- display this button in 3rd column via layout_column(zero based) -->

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="#6F9C33" >

                    <TextView
                        android:id="@+id/textView21"
                        android:padding="5dp"
                        android:text="@string/servings"
                        android:textColor="@color/white"
                        android:textSize="16sp" />

                    <LinearLayout
                        android:layout_width="1dp"
                        android:layout_height="match_parent" >

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

    ..........
    .......
    ......

0

Щоб зробити вертикальну лінію, просто використовуйте прямокутник шириною 1dp:

<shape>
    <size
        android:width="1dp"
        android:height="16dp" />
    <solid
        android:color="#c8cdd2" />
</shape>

Не використовуйте stroke, використовуйте solid(який є кольором "заливки"), щоб вказати колір рядка.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.