طريقة إعداد فجوة TabLayout (شرح مرفق)

استخدام TabLayout مع ViewPager يوفر العديد من المزايا، ولكن هناك العديد من النقاط الساخنة حول TabLayout.

في هذا المقال فقط سأشرح كيفية ضبط الفجوة بين التabs، لقد بحثت في الإنترنت عن العديد من الطرق، مثل padding و margin، لكنها لم تنجح، لا خيار آخر، إذا كنت تريد استخدام TabLayout، يجب أن تجد طريقة.

الطريقة التنفيذية، لأن هذا الشئ لا يمكن ضبطه بسهولة، لذا سنقوم بعمل شيء على الخلفية، كود التخطيط كالتالي:

<android.support.design.widget.TabLayout
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/tl_download_tabs"
  android:layout_width="wrap_content"
  android:layout_height="30dp"
  android:layout_marginTop="10dp"
  android:layout_gravity="center_horizontal"
  android:overScrollMode="never"
  app:tabMode="fixed"
  app:tabPaddingStart="30dp"
  app:tabPaddingEnd="30dp"
  app:tabIndicatorHeight="0dp"
  app:tabBackground="@drawable/download_tab_bg_selector"
  app:tabSelectedTextColor="#000000"
  app:tabTextColor="#ffffff"/>

ثانيًا، النقطة الرئيسية تكمن في selector الخلفية، والكود كما يلي:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_selected="true">
  <!--<shape>
   <solid android:color="#ffffff"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->>
  <!--لإضافة فجوة بين Tabs داخل TabLayout، لم يتم العثور على طريقة أخرى للإعداد، لذا يتم إعداد الفجوة في الشكل الخلفي-->
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#ffffff"/>
    </shape>
   </item>
  </layer-list>
 </item>
 <item android:state_selected="false">
  <!--<shape>
   <solid android:color="#bcbcbc"/>
   <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
  </shape>-->>
  <layer-list>
   <item>
    <shape>
     <solid android:color="@android:color/transparent"/>
    </shape>
   </item>
   <item android:left="5dp" android:right="5dp">
    <shape>
     <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" />
     <solid android:color="#bcbcbc"/>
    </shape>
   </item>
  </layer-list>
 </item>
</selector>

المحذوف هو selector الاصلي بدون فرق، هنا تم إعداد padding لأعلى ولأسفل للخلفية مباشرة، وكانت النتيجة ممتازة.

العيب: إذا كان الفرق كبيرًا جدًا، فإن هذا الأسلوب يحتوي على عيب بسيط، وهو أنه يمكنك اختيار tab من مكان فارغ.

لكن بالنسبة للفرق غير الكبير، لا يُلاحظ ذلك بشكل كبير.

ثالثًا، استخدام Activity بسيط جدًا:

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tl_download_tabs);
  mTabLayout.addTab(mTabLayout.newTab().setText("تم التحميل"));
  mTabLayout.addTab(mTabLayout.newTab().setText("تحميل"));
  mTabLayout.setupWithViewPager(mViewPager);

أربعة: كان النظام الأساسي هو ترتيب خطي، وضع TabLayout و ViewPager، جربت في RelativeLayout مضافًا حول TabLayout، ووجدت أن النصوص في Tab لم تعد تظهر، بالإضافة إلى أن التبديل الذي يتم التحدث عنه عبر الإنترنت هو أيضًا خدعة، يمكن رؤيته، ولكن ظهرت حالة أكثر استغرابًا، هناك فراغان أمامهم، وثلاثة أخرى عادية وراءهم، بالتأكيد شيء غريب.

في النهاية، يجب التعامل معه في Adapter، وإعادة كتابة الطريقة التالية فقط، في الواقع قد يكون هذا أكثر منطقية، على الأقل يمكن ضمان أن يكون عدد التabs متطابقًا مع عدد صفحات ViewPager.

@Override
  public CharSequence getPageTitle(int position) {
   if(position == 0){
    return "تم التحميل";
   }else if(position == 1){
    return "تحميل...";
   }
   return "";
  }

هذا المقال الذي يعتمد على إعداد مسافة TabLayout (شرح متمثل بالأمثلة) هو كل المحتوى الذي أشاركه معكم، آمل أن يكون هذا مرجعاً جيداً وأن تدعموا تعليمات النطق بقدر الإمكان.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ويتمتع صاحب الحقوق بالملكية، ويتم جمع المحتوى من إسهامات المستخدمين عبر الإنترنت الذين يقومون بتحميله، ويتمتع هذا الموقع بلا ملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فنرجو منك إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال # ب @ عند إرسال البريد الإلكتروني) لإبلاغنا، وقدم الدليل على الدليل، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المشبوه فوراً.