صفحه اصلی » پایگاه دانش » برنامه نویسی اندروید » رابط کاربری » کامپوننت های سفارشی (custom components)

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

کامپوننت های سفارشی (custom components)

۱۳۹۸/۰۸/۱۹ ۴۷

معرفی Custom Components

اندروید یک لیست عالی از ویدجت های پیش ساخته مانند Button، TextView، EditText، ListView، CheckBox، RadioButton، Gallery، Spinner، AutoCompleteTextView و غیره ارائه می دهد. که شما می توانید به طور مستقیم در توسعه نرم افزار آندروید خود استفاده کنید، اما ممکن است وضعیتی وجود داشته باشد که شما با عملکرد موجود هر یک از ویجت های موجود راضی نباشید. آندروید به شما امکان می دهد از طریق ایجاد اجزای سفارشی خود که شما می توانید با توجه به نیازهای خود سفارشی کنید.

اگر فقط نیاز به تنظیمات کوچک به یک ویجت و یا طرح موجود دارید، می توانید به سادگی ویجت یا طرح بندی زیر را طبقه بندی کنید و روش های آن را لغو کنید که به شما کنترل دقیق ظاهر و عملکرد یک عنصر صفحه را می دهد.

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

کامپوننت های سفارشی ,,custom components,ایجاد یک کامپوننت ساده سفارشی

ایجاد یک کامپوننت ساده سفارشی

گام توضیحات
۱  با استفاده از اندروید استودیو یک پروژه ی جدید با نام CustomComponent تحت بسته ی com.example.customcomponent ایجاد کنید. نحوه ی ایجاد پروژه ی جدید   در بخش آموزشی Hello World Example  توضیح داده شده است.
۲  مانند آنچه در ادامه آمده است ثابت های رشته ای مورد نیاز را در فایل res/values/strings.xml تعریف کنید.
۳  محتوای فایل res/layout/activity_main.xml را مانند آنچه در ادامه آمده است به منظور ایجاد یک کامپوننت نمایش دهنده ی تاریخ تغییر دهید.
۴ فایل java/com.example.customcomponent/DateView.java را به منظور ایجاد یک شی نمایش دهنده ی تاریخ که گسترش دهنده ی کلاس TextView است   ایجاد کنید و محتوایی که در ادامه آمده است را به آن منتقل کنید.
۵  برنامه را با استفاده از شبیه ساز اندروید اجرا کنید و نتیجه را مورد بررسی قرار دهید.

فایل attribute های زیر به نام attrs.xml را در پوشه res / values خود ایجاد کنید.

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="TimeView">
      <declare-styleable name="TimeView">
         <attr name="title" format="string" />
         <attr name="setColor" format="boolean"/>
      </declare-styleable>
   </declare-styleable>
</resources>

 

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

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
   tools:context=".MainActivity" >

   <com.example.tutorialspoint7.myapplication.TimeView
      android:id="@+id/timeView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textColor="#fff"
      android:textSize="40sp"
      custom:title="my time view"
      custom:setColor="true" />

   <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/simple"
      android:layout_below="@id/timeView"
      android:layout_marginTop="10dp" />
</RelativeLayout>

 

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

 

package com.example.tutorialspoint7.myapplication;
/**
 * Created by TutorialsPoint7 on 9/14/2016.
 */
import java.text.SimpleDateFormat;
import java.util.Calendar;

import android.content.Context;
import android.content.res.TypedArray;

import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.TextView;

public class TimeView extends TextView {
   private String titleText;
   private boolean color;

   public TimeView(Context context) {
      super(context);
      setTimeView();
   }

   public TimeView(Context context, AttributeSet attrs) {
      super(context, attrs);
      // retrieved values correspond to the positions of the attributes
         TypedArray typedArray = context.obtainStyledAttributes(attrs, 
            R.styleable.TimeView);
      int count = typedArray.getIndexCount();
      try{
         
         for (int i = 0; i < count; ++i) {
            
            int attr = typedArray.getIndex(i);
            // the attr corresponds to the title attribute
            if(attr == R.styleable.TimeView_title) {
               
               // set the text from the layout
               titleText = typedArray.getString(attr);
               setTimeView();
            } else if(attr == R.styleable.TimeView_setColor) {
               // set the color of the attr "setColor"
               color = typedArray.getBoolean(attr, false);
               decorateText();
            }
         }
      }
        
      // the recycle() will be executed obligatorily
      finally {
         // for reuse
         typedArray.recycle();
      }
   }

   public TimeView(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      setTimeView();
   }

   private void setTimeView() {
      // has the format hour.minuits am/pm
      SimpleDateFormat dateFormat = new SimpleDateFormat("hh.mm aa");
      String time = dateFormat.format(Calendar.getInstance().getTime());
      
      if(this.titleText != null )
      setText(this.titleText+" "+time);
      else
         setText(time);
   }

   private void decorateText() {
      // when we set setColor attribute to true in the XML layout
      if(this.color == true){
         // set the characteristics and the color of the shadow
         setShadowLayer(4, 2, 2, Color.rgb(250, 00, 250));
         setBackgroundColor(Color.CYAN);
      } else {
         setBackgroundColor(Color.RED);
      }
   }
}

 

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

 

package com.example.tutorialspoint7.myapplication;

import android.os.Bundle;
import android.widget.TextView;
import android.app.Activity;

public class MainActivity extends Activity {

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

      TextView simpleText = (TextView) findViewById(R.id.simple);
      simpleText.setText("That is a simple TextView");
   }
}

 

برنامه در حال اجرا باید مانند عکس روی صفحه زیر باشد.

کامپوننت های سفارشی ,,custom components,ایجاد یک کامپوننت ساده سفارشی

دانشجویار نماد اعتماد به دانشجویار مجوز نشر دیجیتال لوگو شرکت به پرداخت ملت logo-samandehi مجوز سازمان فنی حرفه ای کشور
blackFriday

پیش از شروع جشنواره بلک فرایدی
خودت رو برای یک خرید برق آسا آماده کن!


بلک فرایدی!

برای شرکت در جشنواره بلک فرایدی لطفا ثبت نام کنید.

  از الان برای بلک فرایدی آماده شو - رزرو تخفیف 90% ، برای همه آموزش ها  صفحه جشنواره