شما اینجا هستید: خانه » برنامه نویسی اندروید » رابط کاربری اندروید » کامپوننت های اختصاصی در اندروید

کامپوننت های اختصاصی در اندروید

سیستم عامل اندروید به همراه ویجت های آماده ی پیش ساخته ای برای توسعه دهندگان اندرویدی ، منتشر شده است ویجت هایی مانند Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner, AutoCompleteTextView و …

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

اگر شما میخواهید تنظیمات اندکی را روی ویجت ها یا layout های موجود اندروید انجام دهید شما به سادگی میتوانید یک subclass به همراه override متدهای آن ، از ویجت یا layout مورد نظر خود بسازید که در این صورت کنترل دقیق تری روی ظاهر و عملکرد المان های نمایشی خواهید داشت . 

در این آموزش شما یاد میگیرید که چگونه یک Views اختصاصی بسازید و آنرا به سادگی در برنامه ی اندرویدی خود به کار بگیرید

کامپوننت های اختصاصی در اندرویدتصویر بالا نمونه ای از کامپوننت های اختصاصی در View های اختصاصی را نمایش میدهد . 

ساخت یک کامپوننت اختصاصی در اندروید : 

مراحل توضیحات
۱ پیشنهاد میکنیم از محیط اندروید استودیو استفاده کنید و یک پروژه با نام compoundview بسازید
۲ یک فایل XML در آدرس res/values/attrs.xml بسازید این فایل برای تعریف ویژگی های جدید به همراه نوع داده آن هست . 
۳

فایل جاوا src/ColorOptionsView.java بسازید و کد تعریف کامپوننت اختصاصی خود را اضافه کنید 

این کلاس از کلاس LinearLayout  ارث بری میکند و عملکرد های جدید را تعریف کنید 

۴ فایل  res/layout/activity_main.xml را ویرایش کنید . و کدی برای ساخت ترکیب رنگ را اضافه کنید 
۵ برنامه را اجرا کنید تا نتیجه را روی ماشین مجازی ببینید

ویژگی های زیر را در فایل attrs.xml  بسازید که در آدرس  res/values ساختیم 

<?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>

فایل layout که توسط اکتیویتی مورد استفاده قرار گرفته است را به شکل زیر تغییر دهید : 

<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/com.vogella.android.view.compoundview"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:showDividers="middle"
   android:divider="?android:attr/listDivider"
   tools:context=".MainActivity" >
   
   <com.vogella.android.view.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.view.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>

فایل جاوا با نام ColorOptionsView 

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);
      
      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);
   }
} 

 

اکتیویتی اصلی برنامه هم باید به شکل زیر تغییر یابد : 

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();
   }
} 

وقتی برنامه را اجرا میکنید نتیجه باید به شکل زیر باشد : 

کامپوننت اختصاصی در اندروید

کامپوننت اختصاصی در اندروید

 

معرفی کردن با استفاده از کدها درون کلاس اکتیویتی

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

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);

   DateView dateView = new DateView(this);
   setContentView(dateView);
}

تعریف کردن با استفاده از کدهای XML درون فایل Layout 

شما میتوانید بصورت سنتی ، درون فایل های layout نیز ویجت اختصاصی خودتان را معرفی کنید . 

در این روش دقیقا مثل روش های دیگر ویجت مورد نظر شما پیاده سازی خواهد شد . برای معرفی کردن ویجت خود درون فایل xml طبق زیر عمل کنید 

پکیجی با نام com.example.compoundview که تمام کدهای مربوطه ی  کلاس DateView  درآنجا قرار میگیرد . DateView  یک کلاسی هست که قرار هست تمام کدهای مربوط به ویجت اختصاصی را درون آن قراردهید 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity" >
   
   <com.example.compoundview.DateView
      android:layout_width="match_parent"
      android:layout_height="wrap_content" 
      android:textColor="#fff"
      android:textSize="40sp"
      android:background="#000"/>
</RelativeLayout>

این آموزش کامل نیست برای دریافت ادامه ی این آموزش در صورت نیاز ایمیل یا کامنت بفرستید 

ما سایت سامنتا را با هدف انتقال دانش و تجربیات خود از بهترین متدهای آموزشی دنیا راه اندازی کردیم . محتویات این سایت از ابتدا براساس سلیقه ، نظرات و پیشنهادهای کاربران ساخته شده است . به امید روزی که سیستم آموزشی ایران متحول و از شیوه های نوین آموزشی استفاده کنند

http://Samenta.ir

1 دیدگاه

  1. سلام آقای نیکزاد 

    آموزش رو ادامه دهید من نیاز دارم ممنون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *