هل هناك طريقة سهلة لإضافة حدود إلى أعلى وأسفل منظر Android؟
https://stackoverflow.com/questions/1598119
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لديّ TextView وأرغب في إضافة حدود سوداء على طول حدودها العلوية والسفلية. حاولت إضافة android:drawableTop و android:drawableBottom إلى TextView ، لكن ذلك تسبب فقط في أن تصبح المنظر بأكمله أسود.
<TextView
android:background="@android:color/green"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableTop="@android:color/black"
android:drawableBottom="@android:color/black"
android:text="la la la" />
هل هناك طريقة لإضافة الحدود العلوية والسفلية بسهولة إلى عرض (على وجه الخصوص ، عرض نص) في Android؟
المحلول
في Android 2.2 يمكنك القيام بما يلي.
قم بإنشاء XML Drawable مثل /res/drawable/textlines.xml وتعيين هذا كخاصية خلفية TextView.
<TextView
android:text="My text with lines above and below"
android:background="@drawable/textlines"
/>
/res/drawable/textlines.xml
<?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="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item android:top="1dp" android:bottom="1dp">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
الجانب السلبي لذلك هو أنه يتعين عليك تحديد لون خلفية غير شفاف ، حيث لن تعمل الشفوية. (على الأقل اعتقدت أنهم فعلوا ذلك لكنني كنت مخطئًا). في المثال أعلاه ، يمكنك أن ترى أن اللون الصلب للشكل الأول #FFDDDDD يتم نسخه في لون السكتة الدماغية في الأشكال الثانية.
نصائح أخرى
لقد استخدمت خدعة بحيث يتم عرض الحدود خارج الحاوية. مع هذه الخدعة ، يتم رسم خط فقط بحيث يتم عرض الخلفية من العرض الأساسي.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="1dp"
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#FF000000" />
<solid android:color="#00FFFFFF" />
<padding android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp" />
</shape>
</item>
</layer-list>
الخيار 1: شكل رسم
هذا هو أبسط خيار إذا كنت تريد حدود حول تخطيط أو عرض يمكنك فيه تعيين الخلفية. إنشاء ملف XML في drawable المجلد الذي يبدو مثل هذا:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#8fff93" />
<stroke
android:width="1px"
android:color="#000" />
</shape>
يمكنك إزالة solid إذا كنت لا تريد ملء. مجموعة background="@drawable/your_shape_drawable" على التصميم/العرض الخاص بك.
الخيار 2: طريقة عرض الخلفية
هذه خدعة صغيرة استخدمتها في RelativeLayout. في الأساس ، لديك مربع أسود تحت المنظر الذي تريد إعطاء حدوده ، ثم إعطاء هذا المنظر بعض الحشو (وليس الهامش!) بحيث يظهر المربع الأسود عند الحواف.
من الواضح أن هذا يعمل بشكل صحيح فقط إذا لم يكن لدى العرض أي مناطق شفافة. إذا كان الأمر كذلك ، فإنني أوصيك بكتابة مخصص BorderView الذي يرسم الحدود فقط - يجب أن يكون فقط بضع عشرات من الخطوط من التعليمات البرمجية.
<View
android:id="@+id/border"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/image"
android:layout_alignLeft="@+id/image"
android:layout_alignRight="@+id/image"
android:layout_alignTop="@+id/main_image"
android:background="#000" />
<ImageView
android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_...
android:padding="1px"
android:src="@drawable/..." />
إذا كنت تتساءل ، فهذا يفعل يعمل مع adjustViewBounds=true. ومع ذلك ، لا يعمل إذا كنت تريد أن يكون لديك خلفية بالكامل RelativeLayout, ، لأن هناك خطأ يمنعك من ملء أ RelativeLayout مع View. في هذه الحالة ، أوصي Shape يمكن رسمها.
الخيار 3: 9-PATCH
الخيار النهائي هو استخدام 9 مواد قابلة للسحب مثل هذا:
يمكنك استخدامه في أي عرض يمكنك تعيينه android:background="@drawable/...". ونعم ، يجب أن تكون 6 × 6 - لقد حاولت 5x5 ولم تنجح.
عيب هذه الطريقة هو أنه لا يمكنك تغيير الألوان بسهولة شديدة ، ولكن إذا كنت تريد حدود خيالية (على سبيل المثال ، فإن الحدود فقط في الأعلى والأسفل ، كما في هذا السؤال) ، فقد لا تتمكن من القيام بها مع Shape قابلة للرسم ، وهو ليس قويًا جدًا.
الخيار 4: طرق عرض إضافية
لقد نسيت أن أذكر هذا الخيار البسيط حقًا إذا كنت تريد فقط الحدود أعلاه وتحت عرضك. يمكنك وضع وجهة نظرك في عمودي LinearLayout (إذا لم يكن بالفعل) ثم أضف فارغًا ViewS فوق وتحت ذلك مثل هذا:
<View android:background="#000" android:layout_width="match_parent" android:layout_height="1px"/>
لإضافة أ 1dp الحدود البيضاء في الأسفل فقط وللحصول على خلفية شفافة ، يمكنك استخدام ما يلي وهو أبسط من معظم الإجابات هنا.
ل TextView أو عرض آخر إضافة:
android:background="@drawable/borderbottom"
وفي drawable الدليل أضف XML التالي ، يسمى borderbottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-2dp" android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ffffffff" />
<solid android:color="#00000000" />
</shape>
</item>
</layer-list>
إذا كنت تريد حدود في الأعلى ، قم بتغيير android:top="-2dp" ل android:bottom="-2dp"
لا يحتاج اللون إلى أن يكون أبيض ولا تحتاج إلى أن تكون الخلفية شفافة أيضًا.
ال solid قد لا يكون العنصر مطلوبًا. سيعتمد هذا على تصميمك (شكرًا V. Kalyuzhnyu).
في الأساس ، ستنشئ XML هذا الحدود باستخدام شكل المستطيل ، ولكن بعد ذلك يدفع الجانبين العلوي واليمين واليسرى إلى ما وراء منطقة العرض للشكل. هذا يترك فقط الحدود السفلية مرئية.
لذلك أردت أن أفعل شيئًا مختلفًا قليلاً: حدود في الأسفل فقط ، لمحاكاة مقسم ListView. لقد قمت بتعديل إجابة بيت ديلمبورت وحصلت على هذا:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<solid android:color="@color/background_trans_light" />
</shape>
</item>
<!-- this mess is what we have to do to get a bottom border only. -->
<item android:top="-2dp"
android:left="-2dp"
android:right="-2dp"
android:bottom="1px">
<shape
android:shape="rectangle">
<stroke android:width="1dp" android:color="@color/background_trans_mid" />
<solid android:color="@null" />
</shape>
</item>
</layer-list>
ملاحظة باستخدام PX بدلاً من DP للحصول على مقسم 1 بكسل بالضبط (ستجعل بعض DPIs الهاتف تختفي خط 1DP).
الإجابة المقبولة حاليا لا تعمل. إنه يخلق حدود رأسية رقيقة على الجانبين الأيسر والأيمن من العرض نتيجة لمكافحة الإنقاذ.
هذا الإصدار يعمل تماما. كما يسمح لك بتعيين عرض الحدود بشكل مستقل ، ويمكنك أيضًا إضافة حدود على الجوانب اليمنى / اليمنى إذا كنت تريد. العيب الوحيد هو أنه لا يدعم الشفافية.
قم بإنشاء سمي /res/drawable/top_bottom_borders.xml مع الكود أدناه وتعيينه كخاصية خلفية TextView.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#DDDD00" /> <!-- border color -->
</shape>
</item>
<item
android:bottom="1dp"
android:top="1dp"> <!-- adjust borders width here -->
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" /> <!-- background color -->
</shape>
</item>
</layer-list>
تم اختباره على Android Kitkat من خلال Marshmallow
مثلما قال Nic Hubbard ، هناك طريقة سهلة للغاية لإضافة خط حدودي.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" >
</View>
يمكنك تغيير الارتفاع ولون الخلفية إلى ما تريد.
يمكنك أيضًا لف العرض في FrameLayout ، ثم قم بتعيين لون خلفية الإطار وحشو ما تريد ؛ ومع ذلك ، فإن TextView ، افتراضيًا لها خلفية "شفافة" ، لذلك تحتاج إلى تغيير لون خلفية TextView أيضًا.
تعتمد إجاباتي على إصدار Emile لكنني أستخدم لونًا شفافًا بدلاً من الصلبة.
سيؤدي هذا المثال إلى رسم الحدود السفلية 2PP.
<?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="2dp"
android:color="#50C0E9" />
<solid android:color="@android:color/transparent" />
</shape>
</item>
<item android:bottom="2dp" >
<shape android:shape="rectangle" >
<stroke android:width="2dp"
android:color="@color/bgcolor" />
<solid android:color="@android:color/transparent" />
</shape>
</item>
</layer-list>
@color/bgcolor هو لون الخلفية على ورسم وجهة نظرك مع الحدود.
إذا كنت ترغب في تغيير موضع الحدود ، فقم بتغيير الإزاحة مع واحد من:
android:bottom="2dp"
android:top="2dp"
android:right="2dp"
android:left="2dp"
أو الجمع بينهم للحصول على 2 أو أكثر من الحدود:
android:bottom="2dp" android:top="2dp"
لماذا لا تنشئ فقط عرضًا مرتفعًا من 1 ديسماستر مع لون الخلفية؟ ثم يمكن وضعه بسهولة حيث تريد.
فقط لإضافة حل إلى القائمة ..
كنت أرغب في حدود أسفل شفافة تشبه الشكل الأصلي (لذلك كانت الحدود شبه الشفافة الخارج المستطيل الوالد).
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#33000000" /> <!-- Border colour -->
</shape>
</item>
<item android:bottom="2dp" >
<shape android:shape="rectangle" >
<solid android:color="#164586" />
</shape>
</item>
</layer-list>
الذي يعطيني
قم أولاً بإنشاء ملف XML مع محتويات موضحة أدناه وتسمية Border.xml ووضعه داخل مجلد التخطيط داخل دليل الدقة
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#0000" />
<padding android:left="0dp" android:top="1dp" android:right="0dp"
android:bottom="1dp" />
</shape>
بعد ذلك داخل الكود استخدام
TextView tv = (TextView)findElementById(R.id.yourTextView);
tv.setBackgroundResource(R.layout.border);
هذا سيجعل خطًا أسود في الأعلى والسفلي من TextView.
لتغيير هذا:
<TextView
android:text="My text"
android:background="@drawable/top_bottom_border"/>
أفضل هذا النهج في "drawable/top_bottom_border.xml":
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#000"
android:centerColor="@android:color/transparent"
android:centerX="0.01" />
</shape>
</item>
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#000"
android:centerColor="@android:color/transparent"
android:centerX="0.01" />
</shape>
</item>
</layer-list>
هذا يجعل الحدود فقط ، وليس مستطيلًا سيظهر إذا كانت خلفيتك تحتوي على لون.
اكتب أسفل الرمز
<View
android:layout_width="wrap_content"
android:layout_height="2dip"
android:layout_below="@+id/topics_text"
android:layout_marginTop="7dp"
android:layout_margin="10dp"
android:background="#ffffff" />
أبسط طريقة لإضافة حدود لإدراج الحدود باستخدام InsetDrawable، يتبع سيظهر الحدود العلوية فقط:
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-2dp"
android:insetLeft="-2dp"
android:insetRight="-2dp">
<shape android:shape="rectangle">
<solid android:color="@color/light_gray" />
<stroke
android:width=".5dp"
android:color="@color/dark_gray" />
</shape>
</inset>
حاول لف الصورة باستخدام LineArlayout ، وقم بتعيين خلفيتها على اللون الحدودي الذي تريده حول النص. ثم اضبط الحشوة على TextView ليكون السماكة التي تريدها لحدودك.
يمكنك أيضًا استخدام 9 مسار للقيام بعملك. قم بإنشائه بحيث لا يتضاعف البكسل الملون في الطول ولكن فقط بكسل شفاف.
هذه طريقة لتحقيق ذلك.
<?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="@color/grey_coaching_text" />
</shape>
</item>
<item
android:bottom="1dp"
android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
</shape>
</item>
</layer-list>
العنصر الأول للسكتة الدماغية والثانية للخلفية الصلبة. يختبئ الحدود اليسرى واليمين.
ما عليك سوى إضافة طرق عرض في أعلى وأسفل View
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/your_color"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintStart_toStartOf="@+id/textView" />
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Testing"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/your_color"
app:layout_constraintEnd_toEndOf="@+id/textView"
app:layout_constraintStart_toStartOf="@+id/textView"
app:layout_constraintTop_toBottomOf="@+id/textView" />
</android.support.constraint.ConstraintLayout>
// Just simply add border around the image view or view
<ImageView
android:id="@+id/imageView2"
android:layout_width="90dp"
android:layout_height="70dp"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_toLeftOf="@+id/imageView1"
android:background="@android:color/white"
android:padding="5dip" />
// After that dynamically put color into your view or image view object
objView.setBackgroundColor(Color.GREEN);
//VinodJ/Abhishek
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/light_grey1" />
<stroke
android:width="1dip"
android:color="@color/light_grey1" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
<TextView
android:id="@+id/textView3"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#72cdf4"
android:text=" aa" />
فقط أضف هذا النص أسفل النص حيث تريد إضافة الحدود
فقط لفرض phreakhead هو و user1051892 هو الإجابات ، <item android:bottom|android:left|android:right|android:top> إذا كان سلبيا ، يجب أن تكون أكبر من <stroke android:width>. إذا لم يكن الأمر كذلك ، فسيتم خلط لوحة العنصر مع لوحة السكتة الدماغية وقد تعتقد أن هذه القيم لا تعمل.
