English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. النص الرئيسي

ملخص المعرفة المطلوبة لـ Android Drawable

ما هو Drawable

أولاًDrawable هو فئة تعريفية، تمثل الصور التي يمكن رسمها في Canvas، وتستخدم غالبًا كخلفية لـ view، مع أنواع متعددة لتنفيذ وظائف مختلفة. ثانيًايمكن تقسيم Drawable إلى هذه الفئات: الصور،والصور المكونة من الألوان. عادة ما يتم تعريفها باستخدام xml.

هيكل التوريث لDrawable

فئات Drawable وتسمياتها

Drawable

الحصول على الأبعاد الداخلية

　　　 getIntrinsicHeight،getIntrinsicWidth
　　　 - عند تكون Drawable من الصور يعود الطول والعرض للصورة من خلال هذه الطريقة
　　　 - عند تكون Drawable من الألوان لا مفهوم للعرض والارتفاع،يعود بالسالب واحد

كل أنواع Drawable وطرق استخدامها

BitmapDrawable

لعرض صورة، مثل المثال أدناه

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
 android:antialias="true"
 android:dither="true"
 android:filter="true"
 android:gravity="top"
 android:src="@mipmap/girl"
 android:tileMode="repeat" />

الخصائص الشائعة

android:antialias ما إذا كان التطبيق للتعامل مع الحواف
android:dither ما إذا كان التطبيق للمنعطف
android:filter ما إذا كان التطبيق للتصفية
android:gravity يستخدم لتعيين موقع الصورة
android:src معرف المصدر للصورة
android:tileMode نمط التكرار، هناك ثلاثة أنماط: repeat، mirror، clamp

ColorDrawable

إنها تمثل منطقة قابلة للرسم أحادية الألوان، تغطي لونًا ثابتًا، وتقوم برسم منطقة أحادية الألوان على لوحة الرسم

مثال:

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

ويمكن أيضًا إنشاؤها باستخدام الكود

ColorDrawable drawable = new ColorDrawable(int color); //تم إدخال قيمة integer الخاصة باللون

NinePatchDrawable

وهي صورة 9-patch، يمكن تمددها بسهولة في الارتفاع والاتساع دون أن تتغير

مثال:

<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
 android:dither="true"
 android:filter="true"
 android:src="@color/colorAccent">
</nine-patch>

إعداد منطقة التمدد باستخدام draw9patch

الاتجاهين 1 و 2 في الصورة يعكسان رسم الخطوط السوداء في draw9patch، ويكون الت交汇 بين طولهما هو النطاق القابل للتمدد
طول الت交汇 بين الخطوط السوداء في الاتجاهين 3 و 4 في الصورة يعكس المناطق القابلة للملء

ShapeDrawable

بتصميم الشكل عبر اللون، يمكن أن يكون الشكل نقيًا أو يحتوي على تأثير تدريجي. يمكن بناء الأشكال مثل rectangle، oval، ring، line

مثال على كرة مع تأثير التدرج:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <gradient
  android:angle="45"
  android:centerColor="@color/colorAccent"
  android:centerX="50%"
  android:centerY="50%"
  android:endColor="@color/colorPrimary"
  android:gradientRadius="150dp"
  android:startColor="@color/colorPrimaryDark"
  android:type="sweep" />
 <size
  android:width="260dp"
  android:height="260dp" />
</shape>

ملاحظة: 1、قيمة Android:angle يجب أن تكون ضعفاً لـ 45 2、oval يستخدم للرسم بالأشكال البيضاوية، عندما تكون عرض الـ size وارتفاعها متساويين يتم رسمها ككرة

مثال على الحلقة:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:innerRadius="100dp"
 android:shape="ring"
 android:thickness="10dp"
 android:useLevel="false" >
 <stroke
  android:width="10dp"
  android:color="@color/colorAccent" />
</shape>

ملاحظة：
1、إعداد android:useLevel إلى false، وإلا فإنه لا يمكن عرض التأثير المثالي
2、innerRadius هو نصف قطر الحلقة الداخلية، innerRadiusRation هو نسبة نصف قطر الداخلية إلى عرض الحلقة، يعتمد innerRadius بشكل رئيسي
3、thickness هو عرض الحلقة، thicknessRatio هو نسبة هذا العرض إلى عرض الحلقة، يعتمد thickness بشكل رئيسي

الخصائص الشائعة

- android:shape الشكل الذي سيتم رسمه، rectangle、oval、ring、line
- <stroke> الحافة الشكلية، لها الخصائص التالية
　　　　　　　 - android:width الحافة العريضة
　　　　　　　 - android:color لون الحواف
　　　　　　　 - android:dashGap عرض خط الشكل المتشابك
　　　　　　　 - android:dashWidth فجوة بين خطوط الشكل المتشابك (الشكل الخيالي)
-<solid> تعبئة الألوان البحتة، android:color يحدد لون الشكل
- <gradient> تأثير التدرج، لا يمكن استخدامه مع solid، ولديه الخصائص التالية
　　　　　　　 - android:angle زاوية التدرج، يجب أن تكون ضعفًا لـ 45
　　　　　　　 - android:startColor لون بداية التدرج
　　　　　　　 - android:centerColor لون منتصف التدرج
　　　　　　　 - android:endColor لون نهاية التدرج
　　　　　　　 - android:centerX مكان التدرج على المحور الأفقي
　　　　　　　 - android:centerY مكان التدرج على المحور العمودي
　　　　　　　 - android:gradientRadius نصف قطر التدرج
　　　　　　　 - android:type نوع التدرج،linear (خطي)،sweep (مسح)،radial (مركزي)
- <corners> تعبر عن زوايا الأركان الأربعة للشكل المربّع (rectangle)، لا تنطبق على shapes الأخرى، ولديها الخصائص التالية
　　　　　　　 - android:topLeftRadius،android:topRightRadius،android:bottomLeftRadius،android:bottomRightRadius هي لتعيين زوايا الزوايا الأربعة على التوالي
　　　　　　　 - android:radius يُضبط زوايا الأركان الأربعة بنفس الزاوية، له أولوية منخفضة وسيتم تغطيته من قبل الأربعة خصائص الأخرى
- <size> أبعاد الشكل، تناسب android:width وandroid:height
　　　　　　　 - الشكل بشكل افتراضي لا يملك أبعادًا، يعود getIntrinsicHeight وgetIntrinsicWidth إلى -1
　　　　　　　 - يمكن تعيين الارتفاع والعرض باستخدام size، ولكن كخلفية للview سيتم تمددها أو تقليلها إلى حجم view
- <padding> يُضبط المسافة الفارغة التي تحتوي على view الشكل

StateListDrawable

يمكن اعتبارها مختارًا للوضع، حيث يتم اختيار العنصر المناسب من item باستخدام حالة view المختلفة

مثال:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@color/colorPrimaryDark" android:state_pressed="false"></item>
 <item android:drawable="@color/colorAccent" android:state_pressed="true"></item>
</selector>

الوضع الشائع

android:state_pressed عند ضغط الرؤية، حالة الضغط
android:state_checked عند اختيار الرؤية، ينطبق على CheckBox
android:state_selected عند اختيار الرؤية
android:state_enabled عند التواجد في حالة التوفر
android:state_focused عند الحصول على焦ء الرؤية

LayerDeawable

يُمثل مجموعة Drawable متدرجة، تشبه مفهوم الطبقات في ps، حيث يتم وضع عدة drawables في طبقات مختلفة لإنشاء تأثير تجميع

مثال:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/night" />
 <item
  android:drawable="@mipmap/photo6"
  android:gravity="center" />
</layer-list>

ملاحظات:

1- يمكن أن تحتوي layer-list على عدة عناصر، حيث يمثل كل عنصر Drawable، ويغطي العنصر المضاف مؤخرًا العنصر المضاف مسبقًا
2- بشكل افتراضي، يتم تضخيم جميع drawables في layer-list حتى حجم الرؤية، من خلال تعيين android:gravity يمكن ضبط تأثير التضخيم
3- يمكن تعيين تحريكات الأسطح والأعلى والأسفل واليمين واليسار، android:top، android:bottom، android:left، android:right

LevelListDrawable

تمثل مجموعة drawables، حيث يحتوي كل Drawable في المجموعة على مستوى (level)، من خلال ضبط المستوى المختلف، يمكن تغيير LevelListDrawable إلى Drawable مختلف. نطاق المستوى بين 0 و 10000، android:maxLevel لتعيين المستوى الأعلى، android:minLevel لتعيين المستوى الأدنى
مثال:

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:drawable="@mipmap/photo0"
  android:maxLevel="20"
  android:minLevel="10" />
 <item
  android:drawable="@mipmap/photo1"
  android:maxLevel="40"
  android:minLevel="30" />
</level-list>

من خلال ضبط المستوى يمكن تغييرDrawable المختلفة، في الكود

 // تحويل خلفية ImageView إلى photo1، 35 بين 30 و 40
 iv.setImageLevel(35); 
 // تحويل خلفية ImageView إلى photo0، 15 بين 10 و 20
 iv.setImageLevel(15);

TransitionDrawable

فئة فرعية لـ LayerDeawable، تستخدم لتحقيق تأثيرات التحول اللامتتناهية لـ Drawableين
مثال:

تعريف ملف xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/night" />
 <item android:drawable="@mipmap/photo6" />
</transition>

ضبط src لـ ImageView، في الكود الخاص بـ java

 iv= (ImageView) findViewById(R.id.iv_transition);
 drawable = (TransitionDrawable) iv.getDrawable();
 drawable.startTransition(1000); // تحقيق تأثيرات التحول اللامتتناهية
 drawable.reverseTransition(1000);

مفردة InsertDrawable

تضمين Drawable آخر، ويمكن الاحتفاظ بمسافة معينة حول الأطراف
مثال:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@mipmap/photo6"
 android:inset="20dp">
</inset>

ScaleDrawable

يتم تقليل Drawable بناءً على المستوى إلى نسبة معينة، عندما يكون level 0 لا يظهر، وعندما يكون level 10000 لا يوجد تأثير تقليل
مثال:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
 android:drawable="@mipmap/night"
 android:scaleGravity="center"
 android:scaleHeight="50%"
 android:scaleWidth="50%" />

لإظهار التأثير، يجب إعداد level أكبر من 0

 iv = (ImageView) findViewById(R.id.iv_scale);
 ScaleDrawable drawable= (ScaleDrawable) iv.getDrawable();
 drawable.setLevel(1);

- android:scaleHeight="percentage"،android:scaleWidth="percentage"،يتم تعيين التوسع في العرض والارتفاع إلى نسبة (100%-percentage)
- كلما زاد level، زاد عرض الصورة

ClipDrawable

بناءً على مستوى المستخدم (level) لقطع Drawable آخر، اتجاه القطع يتم تحديده من قبل android:clipOrientation وandroid:gravity معًا. يتم إعداد level لقطع، ويتراوح حجم level من 0 إلى 10000، عند مستوى 0 لا يظهر على الإطلاق، وعند مستوى 10000 يظهر بالكامل
xml定义

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
 android:clipOrientation="horizontal"
 android:drawable="@mipmap/night"
 android:gravity="right"></clip>

 <ImageView
  android:id="@+id/iv_clip"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:src="@drawable/drawable_clip" />

القطع من خلال تعيين مستوى

 ImageView iv = (ImageView) findViewById(R.id.iv_clip);
 ClipDrawable drawable= (ClipDrawable) iv.getDrawable();
 drawable.setLevel(5000); // كلما زاد مستوى،قلت منطقة القطع

الخصائص

android:clipOrientation،الطولي لقطع في الاتجاه الطولي،العمودي لقطع في الاتجاه العمودي
android:gravity،مع اتجاه القطع

تعريف drawable

تعريف drawable دائري

بكجيت كوم.يو.دراوايبل.learing;
استيراد اندرويد.جرافيكز.بيتماب;
استيراد اندرويد.جرافيكز.بيتمابشاردر;
استيراد اندرويد.جرافيكز.كانفاس;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
العمومية فئة CircleDrawable extends Drawable{
 الخاصة int radius;
 الخاصة int mWidth;
 الخاصة int mHeight;
 private Paint mPaint;
 @Override
 public void draw(Canvas canvas) {
  كانفاس.رسمدائري(mWidth/2,mHeight/2,radius,الرسم);
 }
 العمومية CircleDrawable(بيتماب بيتماب) {
  radius = Math.min(بيتماب.العرض(), بيتماب.الارتفاع())/2;
  mWidth = بيتماب.العرض();
  mHeight = بيتماب.الارتفاع();
  BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint = new Paint();
  mPaint.setShader(bitmapShader);
  mPaint.setAntiAlias(true);
 }
 @Override
 public void setAlpha(int alpha) {
  mPaint.setAlpha(alpha);
  invalidateSelf();
 }
 @Override
 public void setColorFilter(ColorFilter colorFilter) {
  mPaint.setColorFilter(colorFilter);
  invalidateSelf();
 }
 @Override
 public int getOpacity() {
  return PixelFormat.TRANSLUCENT;
 }
 @Override
 public int getIntrinsicHeight() {
  العودة إلي mHeight;
 }
 @Override
 public int getIntrinsicWidth() {
  العودة إلي mWidth;
 }
}

تعريف drawable دائري يحتوي على زوايا متموجة

بكجيت كوم.يو.دراوايبل.learing;
استيراد اندرويد.جرافيكز.بيتماب;
استيراد اندرويد.جرافيكز.بيتمابشاردر;
استيراد اندرويد.جرافيكز.كانفاس;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
/**
 * Created by pecu on 2016/08/24.
 */
public class RoundRectangleDrawable extends Drawable {
 private RectF rectF;
 private Paint mPaint;
 Bitmap mBitmap;
 @Override
 public void draw(Canvas canvas) {
  canvas.drawRoundRect(rectF, mBitmap.getWidth()/6,mBitmap.getHeight()/6, mPaint);
 }
 public RoundRectangleDrawable(Bitmap bitmap) {
  mBitmap = bitmap;
  mPaint = new Paint();
  BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  mPaint.setAntiAlias(true);
  mPaint.setShader(bitmapShader);
 }
 @Override
 public void setAlpha(int alpha) {
  mPaint.setAlpha(alpha);
  invalidateSelf();
 }
 @Override
 public void setColorFilter(ColorFilter colorFilter) {
  mPaint.setColorFilter(colorFilter);
  invalidateSelf();
 }
 @Override
 public void setBounds(int left, int top, int right, int bottom) {
  super.setBounds(left, top, right, bottom);
  rectF = new RectF(left, top, right, bottom);
 }
 @Override
 public int getOpacity() {
  return PixelFormat.TRANSLUCENT;
 }
 @Override
 public int getIntrinsicWidth() {
  return mBitmap.getWidth();
 }
 @Override
 public int getIntrinsicHeight() {
  return mBitmap.getHeight();
 }
}

خطوات عامة لإنشاء Drawable المخصصة

　1. تنحدر Drawable المخصصة من Drawable
　2. يتم تنفيذ طرق مثل getOpacity،setColorFilter،setAlpha
　3. في طريقة onDraw يتم الرسم
　4. إذا كان Drawable المخصص له حجم ثابت، فيجب تنفيذ طرق getIntrinsicWidth وgetIntrinsicHeight

هذا هو نهاية محتوى هذا المقال، آمل أن يكون قد ساعدكم في تعلم جديد، وأتمنى أن تشجعوا دائمًا تعليمات الصياح.

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

تعليمية الأساس
أنت قد تعجبك