آموزش ساخت سفارشی View ویو در اندروید

آموزش ساخت ویو در اندروید :

 

1. بازدیدهای سفارشی

1.1. نماهای پیش فرض

چارچوب Android چندین نمایش پیش فرض را ارائه می دهد. یک نمایش پایه کلاس پایه است. نمایش ها وظیفه اندازه گیری ، چیدمان و ترسیم خود و عناصر فرزندشان را دارند (در صورت مشاهده گروه). بازدیدها همچنین مسئول صرفه جویی در وضعیت رابط کاربری خود و اداره رویدادهای لمسی هستند. توسعه دهندگان همچنین می توانند نمای سفارشی ایجاد کرده و از آنها در برنامه خود استفاده کنند.
ایجاد نماهای دلخواه توسط:

  • نمایش های کامپکت – ترکیب نمای با سیم کشی پیش فرض
  • نماهای سفارشی – ایجاد نماهای شخصی شما
  • با گسترش یک نمای موجود ، به عنوان مثال دکمه
  • با گسترش کلاس ویو
  • تصویر زیر سلسله مراتب نمای پیش فرض Android را نشان می دهد.

نمایش به طور معمول ایجاد می شود تا تجربه رابط کاربری با نمایش های پیش فرض امکان پذیر نباشد. استفاده از نمای سفارشی به توسعه دهنده اجازه می دهد تا بهینه سازی عملکرد خاصی را انجام دهد ، یعنی در صورت طرح بندی سفارشی ، توسعه می تواند مدیر طرح را برای مورد استفاده خود بهینه کند.

1.2 چگونه Android سلسله مراتب نمایش را ترسیم می کند

پس از اینکه فعالیتی تمرکز را دریافت کرد ، باید گره ریشه سلسله مراتب طرح خود را به سیستم Android ارائه دهد. پس از آن سیستم آندروید روش طراحی را شروع می کند.
رسم با گره ریشه طرح شروع می شود. سلسله مراتب چیدمان به ترتیب اظهارنامه طی می شود ، یعنی پدر و مادر قبل از اینكه فرزندانشان ترسیم شود و فرزندان نیز به ترتیب اظهارنامه كشیده شوند.
رسم طرح یک فرایند دو مرحله است:
اندازه گیری پاس – پیاده سازی شده در روش اندازه گیری (int، int) ` این اتفاق به عنوان یک گذر از بالا به پایین سلسله مراتب دیدگاه رخ می دهد. هر نمای اندازه گیری خود را ذخیره می کند.
طرح گذر – با استفاده از روش طرح (int، int، int، int). این همچنین یک گذر از بالا به پایین سلسله مراتب نمای است. در این مرحله ، هر مدیر طرح بندی مسئولیت موقعیت یابی همه فرزندان خود را به عهده دارد. از اندازه های محاسبه شده در گذرگاه اندازه گیری استفاده می کند.

مرحله اندازه گیری و چیدمان همیشه با هم اتفاق می افتد.

مدیران چیدمان می توانند معیار عبور را چندین بار اجرا کنند. به عنوان مثال ، LinearLayout از ویژگی وزنی پشتیبانی می کند که فضای خالی باقی مانده را بین بازدیدها توزیع می کند و RelativeLayout چندین بار کودک را برای حل محدودیت های داده شده در پرونده طرح بندی می کند.
یک بازدید یا فعالیت می تواند با فراخوانی به متقاضی () طرح درخواست () طرح و اندازه گیری و طرح را تحریک کند.
بعد از اندازه گیری و محاسبه چیدمان ، نماها خود را ترسیم می کنند. این عملیات را می توان با استفاده از روش () نامعتبر () از کلاس ویو شروع کرد.

1.3 استفاده از نماهای جدید در پرونده های طرح بندی

نماهای سفارشی و مرکب را می توان در پرونده های طرح بندی استفاده کرد. برای این کار شما باید از نام کامل واجد شرایط در پرونده طرح استفاده کنید ، به عنوان مثال با استفاده از بسته و نام کلاس

<?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:orientation=”vertical” >    <Button        android:id=”@+id/button1″        android:layout_width=”wrap_content”        android:layout_height=”wrap_content”        android:text=”Button” />    <de.vogella.android.ownview.MyDrawView        android:id=”@+id/myDrawView1″        android:layout_width=”wrap_content”        android:layout_height=”wrap_content” /></LinearLayout>

 

همچنین می توانید فضای نام را در پرونده طرح ، مشابه فضای نام Android ، اعلام کنید.

1.4. عکسهای صفحه نمایش ایجاد کنید

هر کلاس نمایش از ایجاد تصویری از صفحه نمایش فعلی خود پشتیبانی می کند. کدگذاری زیر نمونه ای از آن را نشان می دهد.

# Build the Drawing Cacheview.buildDrawingCache();# Create BitmapBitmap cache = view.getDrawingCache();# Save BitmapsaveBitmap(cache);view.destroyDrawingCache();

2. نمایش های مرکب

نماهای مرکب (همچنین به عنوان کامپوننت کامپوننت نیز شناخته می شوند) ViewGroup ها از پیش تنظیم شده بر اساس نمایش های موجود با برخی از تعامل نمای از پیش تعریف شده تنظیم شده اند.
نمایش های ترکیبی همچنین به شما امکان می دهد API سفارشی را برای به روزرسانی و پرس و جو وضعیت نمای ترکیبی اضافه کنید.
برای چنین کنترلی یک فایل طرح بندی را تعیین می کنید و آن را به نمای مرکب خود اختصاص می دهید. در اجرای نمای مرکب شما تعامل نمای را از پیش تعریف می کنید. شما یک فایل طرح بندی تعریف می کنید و کلاس ViewGroup مربوطه را گسترش می دهید. در این کلاس فایل طرح بندی را باد می کنید و منطق اتصال اتصال را پیاده سازی می کنید

3. ایجاد نماهای سفارشی

3.1 ایجاد نماهای سفارشی

با گسترش کلاس ویو یا یکی از زیر کلاس های آن می توانید نمای سفارشی خود را ایجاد کنید.
برای نمایش تصویر از روش onDraw () استفاده کنید. در این روش شما یک جسم بوم دریافت می کنید که به شما امکان می دهد عملیات نقاشی روی آن را انجام دهید ، به عنوان مثال خطوط ، دایره ، متن یا بیت مپ ها را بکشید. اگر نمای مجدداً ترسیم شود ، شما به روش () (()) بی اعتبار () که باعث تماس با روش onDraw () این نمای است ، می گویید.

برای ترسیم نمایش های خود ، معمولاً از API Canvas 2D استفاده می کنید.

3.2 اندازه گیری

مدیر طرح با استفاده از متد onMeasure () نمای را مشاهده می کند. نمای پارامتر طرح بندی را از مدیر طرح دریافت می کند. یک مدیر چیدمان وظیفه دارد اندازه فرزندان خود را تعیین کند.
این نمای باید متد setMeasuredDimenstion (int، int) را با نتیجه فراخوانی کند.

3.3 تعریف مدیران طرح های سفارشی

با گسترش کلاس ViewGroup می توانید مدیر طرح بندی دلخواه خود را پیاده سازی کنید. این به شما امکان می دهد تا مدیران چیدمان کارآمدتری را پیاده سازی کنید یا جلوه هایی را که در حال حاضر در سیستم عامل اندرویدی گم شده اند اجرا کنید.
یک مدیر چیدمان سفارشی می تواند روش onMeasure () و onLayout () را نادیده گرفته و محاسبه فرزندان خود را تخصصی کند. به عنوان مثال می تواند پشتیبانی وقت گیر از layout_weight از کلاس LinearLayout را از دست ندهد.

این خوب است که می توانید پارامترهای طرح اضافی را در یک کلاس داخلی اجرای ViewGroup خود ذخیره کنید. به عنوان مثال ViewGroup.LayoutParams `پارامترهای چیدمان فرمان را پیاده سازی می کند ، و` LinearLayout.

4- چرخه زندگی از منظره اندرویدی

4.1 رویدادهای چرخه زندگی مربوط به پنجره

اگر به یک سلسله مراتب طرح که به یک پنجره وصل شده است ، نمایش داده می شود. یک نمای چندین قلاب چرخه عمر دارد.
پس از در دسترس بودن پنجره ، onAttachedToWindow () فراخوانی می شود.
هنگامی که نمایش از والدین خود خارج می شود (و اگر والد به پنجره وصل شده باشد) از onDetachedFromWindow () استفاده می شود. برای مثال اگر فعالیت بازیافت شود (مثلاً از طریق فراخوان متد () به پایان رسید) یا نمایش بازیافت شود ، این اتفاق می افتد.
از روش onDetachedFromWindow () برای متوقف کردن انیمیشن ها و پاکسازی منابع مورد استفاده توسط نمای استفاده می شود.
4.2. وقایع چرخه زندگی متراکم
رویدادهای چرخه زندگی Traversals شامل Animate ، Measure ، Layout و Draw می باشد.

همه دیدگاه ها باید بدانند که چگونه خود را اندازه گیری و چیدمان کنند. فراخوانی متد requestLayout () به این منظره می گوید که خود اندازه گیری و طرح بندی می کند. از آنجا که این عملیات ممکن است بر طرح سایر دیدگاه ها که تحت عنوان “(” درخواست “) از والدینش نیز تأثیر می گذارد ، تأثیر بگذارد.

متد onMeasure () اندازه را برای نمای و فرزندان آن تعیین می کند. قبل از بازگشت ، باید این متد را با استفاده از متد setMeasuredDimension () در این روش تنظیم کنید.
onLayout () نمایش ها را بر اساس نتیجه فراخوانی متد onMeasure () قرار می دهد. این تماس معمولاً یک بار اتفاق می افتد ، در حالی که onMeasure () می تواند بیش از یک بار اتفاق بیفتد.

4.3 چرخه عمر فعالیت

بازدیدها به رویدادهای چرخه زندگی فعالیتها دسترسی ندارند. اگر دیدگاه ها می خواهند از این رویدادها مطلع شوند ، باید یک رابط در نمای مورد نظر خود که از روش های چرخه فعالیت فعالیت می نامید ، ایجاد کنید.
5. ویژگی های اضافی را برای بازدیدهای سفارشی خود تعریف کنید
شما می توانید ویژگی های دیگری را برای نمایش های مرکب یا سفارشی خود تعریف کنید. برای تعریف ویژگی های اضافی ، یک پرونده attrs.xml را در پوشه res / ارزش های خود ایجاد کنید. در زیر نمونه ای از ویژگی های تعریف شده برای نمای جدید به نام ColorOptionsView را نشان می دهد.

<?xml version=”1.0″ encoding=”utf-8″?><resources>    <declare-styleable name=”ColorOptionsView”>        <attr name=”titleText” format=”string” localization=”suggested” />        <attr name=”valueColor” format=”color” />    </declare-styleable></resources>

برای استفاده از این ویژگی ها در پرونده طرح خود باید آنها را در عنوان XML بیان کنید. در لیست زیر این کار از طریق xmlns انجام می شود: قسمت سفارشی کد. این خصوصیات همچنین به نمای اختصاص داده می شود.

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”    xmlns:tools=”http://schemas.android.com/tools”<!– define new name space for your attributes –>    xmlns:custom=”http://schemas.android.com/apk/res/com.vogella.android.view.compoundview”    android:layout_width=”match_parent”    android:layout_height=”match_parent”    android:orientation=”vertical”> <!– Assume that this is your new component. It uses your new attributes –>        <com.vogella.android.view.compoundview.ColorOptionsView            android:layout_width=”match_parent”            android:layout_height=”?android:attr/listPreferredItemHeight”            custom:titleText=”Background color”            custom:valueColor=”@android:color/holo_green_light”             /></LinearLayout>

مثال زیر چگونگی دسترسی مؤلفه ها به این ویژگی ها را نشان می دهد.

package com.vogella.android.view.compoundview;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;public class ColorOptionsView extends View {    private View mValue;    private ImageView mImage;    public ColorOptionsView(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.obtainStyledAttributes(attrs,                R.styleable.Options, 0, 0);        String titleText = a.getString(R.styleable.Options_titleText);        int valueColor = a.getColor(R.styleable.Options_valueColor,                android.R.color.holo_blue_light);        a.recycle();        // more stuff    }}

 

6. ورزش: نمای کاملی ایجاد کنید

6.1. ایجاد پروژه

یک پروژه جدید Android با داده های زیر ایجاد کنید.

Property Value
Testing Table width
Application Name Compound view example
Project Name com.vogella.android.customview.compoundview
Package name com.vogella.android.customview.compoundview
API (Minimum, Target, Compile with) Latest
Template Empty Activity
Activity MainActivity
Layout activity_main

 

6.2 ویژگی های اضافی را تعریف و استفاده کنید

پرونده خصوصیات زیر با نام attrs.xml را در پوشه res / ارزش های خود ایجاد کنید.

<?xml version=”1.0″ encoding=”utf-8″?><resources>    <declare-styleable name=”Options”>        <attr name=”titleText” format=”string” localization=”suggested” />        <attr name=”valueColor” format=”color” />    </declare-styleable></resources>

پرونده طرح مورد استفاده توسط فعالیت را به صورت زیر تغییر دهید.

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”    xmlns:tools=”http://schemas.android.com/tools”    xmlns:custom=”http://schemas.android.com/apk/res-auto”    android:layout_width=”match_parent”    android:layout_height=”match_parent”    android:divider=”?android:attr/listDivider”    android:orientation=”vertical”    android:showDividers=”middle”    tools:context=”com.vogella.android.customview.compoundview.MainActivity” >    <com.vogella.android.customview.compoundview.ColorOptionsView        android:id=”@+id/view1″        android:layout_width=”match_parent”        android:layout_height=”?android:attr/listPreferredItemHeight”        android:background=”?android:selectableItemBackground”        android:onClick=”onClicked”        custom:titleText=”Background color”        custom:valueColor=”@android:color/holo_green_light” />    <com.vogella.android.customview.compoundview.ColorOptionsView        android:id=”@+id/view2″        android:layout_width=”match_parent”        android:layout_height=”?android:attr/listPreferredItemHeight”        android:background=”?android:selectableItemBackground”        android:onClick=”onClicked”        custom:titleText=”Foreground color”        custom:valueColor=”@android:color/holo_orange_dark” /></LinearLayout>

6.3 نمای مرکب ایجاد کنید

فایل طرح زیر را با عنوان view_color_options.xml برای نمای مرکب خود ایجاد کنید.

<?xml version=”1.0″ encoding=”utf-8″?><merge xmlns:android=”http://schemas.android.com/apk/res/android” >    <TextView        android:layout_width=”0dp”        android:layout_height=”wrap_content”        android:layout_weight=”1″        android:layout_centerVertical=”true”        android:layout_marginLeft=”16dp”        android:textSize=”18sp”        />    <View        android:layout_width=”26dp”        android:layout_height=”26dp”        android:layout_centerVertical=”true”        android:layout_marginLeft=”16dp”        android:layout_marginRight=”16dp”        />    <ImageView        android:layout_width=”wrap_content”        android:layout_height=”wrap_content”        android:layout_marginRight=”16dp”        android:layout_centerVertical=”true”        android:visibility=”gone”        /></merge>

نمای مرکب زیر را ایجاد کنید.

package com.vogella.android.customview.compoundview;import com.vogella.android.view.compoundview.R;import android.content.Context;import android.content.res.TypedArray;import android.util.AttributeSet;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;public class ColorOptionsView extends LinearLayout {    private View mValue;    private ImageView mImage;    public ColorOptionsView(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.obtainStyledAttributes(attrs,                R.styleable.ColorOptionsView, 0, 0);        String titleText = a.getString(R.styleable.ColorOptionsView_titleText);        @SuppressWarnings(“ResourceAsColor”)        int valueColor = a.getColor(R.styleable.ColorOptionsView_valueColor,                android.R.color.holo_blue_light);        a.recycle();        setOrientation(LinearLayout.HORIZONTAL);        setGravity(Gravity.CENTER_VERTICAL);        LayoutInflater inflater = (LayoutInflater) context                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);        inflater.inflate(R.layout.view_color_options, this, true);        TextView title = (TextView) getChildAt(0);        title.setText(titleText);        mValue = getChildAt(1);        mValue.setBackgroundColor(valueColor);        mImage = (ImageView) getChildAt(2);    }    public ColorOptionsView(Context context) {        this(context, null);    }    public void setValueColor(int color) {        mValue.setBackgroundColor(color);    }    public void setImageVisible(boolean visible) {        mImage.setVisibility(visible ? View.VISIBLE : View.GONE);    }}

6.4 فعالیت را تنظیم کنید

فعالیت خود را به کد زیر تغییر دهید و برنامه خود را اجرا کنید.

package com.vogella.android.customview.compoundview;import com.vogella.android.view.compoundview.R;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.View;import android.widget.Toast;public class MainActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.activity_main, menu);        return true;    }    public void onClicked(View view) {        String text = view.getId() == R.id.view1 ? “Background” : “Foreground”;        Toast.makeText(this, text, Toast.LENGTH_SHORT).show();    }}

 

مطلب مفیدی برای شما بود ؟ پس به اشتراک بگذارید برای دوستانتان

codesrcReza

109 مطلب منتشر شده

درباره این مطلب نظر دهید !