۱۹
آبان

جلسه ۱۶ : اجزای سفارشی در اندروید

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

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

اجزای سفارشی در اندروید

در ادامه ی این مباحث به چگونگی ایجاد و تنظیم کنترل های سفارشی در اندروید خواهیم پرداخت.

اگر فقط می خواهید که تنظیمات مختصری را به یک کنترل و یا یک طرح اعمال کنید از طرح بندی زیر استفاده کنید.

متدها نیز به شما کنترل دقیق ظاهر و عملکرد یک عنصر صفحه را می دهد.

اجزای سفارشی در اندروید

مراحل ایجاد یک طراحی کنترل سفارشی ساده

مراحل	توضیحات
۱	مراحل ایجاد برنامه در اندروید استدیو را طبق بخش های قبلی دنبال کرده و نام پکیج را com.pvlearn.pvlearn.myapplication قرار بدهید.
۲	یک فایل XML res / values / attrs.xml برای تعریف ویژگی های جدید همراه با نوع آن ایجاد کنید.
۳	یک فایل src / mainactivity.java برای درج کدهای جاوا ایجاد کنید.
۴	به محتوای فایل res / layout / activity_main.xml کد ایجاد نمونه رنگ و ویژگی های جدید را اضافه کنید.
۵	برنامه را اجرا کنید تا شبیه ساز اندروید نتیجه را نمایش دهد.

فایل 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"?>

<declare-styleable name="TimeView">

</declare-styleable>

</resources>

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

مثال :

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

<?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.Pvlearn.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 ایجاد کنید تا برای نمایش ترکیب خود ایجاد کنید:

مثال :

<span class="kwd">package</span><span class="pln"> com</span><span class="pun">.</span><span class="pln">example</span><span class="pun">.</span><span class="pln">tutorialspoint7</span><span class="pun">.</span><span class="pln">myapplication</span><span class="pun">;</span>
<span class="com"></span>
<span class="kwd">import</span><span class="pln"> java</span><span class="pun">.</span><span class="pln">text</span><span class="pun">.</span><span class="typ">SimpleDateFormat</span><span class="pun">;</span>
<span class="kwd">import</span><span class="pln"> java</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="typ">Calendar</span><span class="pun">;</span>

<span class="kwd">import</span><span class="pln"> android</span><span class="pun">.</span><span class="pln">content</span><span class="pun">.</span><span class="typ">Context</span><span class="pun">;</span>
<span class="kwd">import</span><span class="pln"> android</span><span class="pun">.</span><span class="pln">content</span><span class="pun">.</span><span class="pln">res</span><span class="pun">.</span><span class="typ">TypedArray</span><span class="pun">;</span>

<span class="kwd">import</span><span class="pln"> android</span><span class="pun">.</span><span class="pln">graphics</span><span class="pun">.</span><span class="typ">Color</span><span class="pun">;</span>
<span class="kwd">import</span><span class="pln"> android</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="typ">AttributeSet</span><span class="pun">;</span>
<span class="kwd">import</span><span class="pln"> android</span><span class="pun">.</span><span class="pln">widget</span><span class="pun">.</span><span class="typ">TextView</span><span class="pun">;</span>

<span class="kwd">public</span> <span class="kwd">class</span> <span class="typ">TimeView</span> <span class="kwd">extends</span> <span class="typ">TextView</span> <span class="pun">{</span>
   <span class="kwd">private</span> <span class="typ">String</span><span class="pln"> titleText</span><span class="pun">;</span>
   <span class="kwd">private</span> <span class="kwd">boolean</span><span class="pln"> color</span><span class="pun">;</span>

   <span class="kwd">public</span> <span class="typ">TimeView</span><span class="pun">(</span><span class="typ">Context</span><span class="pln"> context</span><span class="pun">)</span> <span class="pun">{</span>
      <span class="kwd">super</span><span class="pun">(</span><span class="pln">context</span><span class="pun">);</span><span class="pln">
      setTimeView</span><span class="pun">();</span>
   <span class="pun">}</span>

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

   <span class="kwd">public</span> <span class="typ">TimeView</span><span class="pun">(</span><span class="typ">Context</span><span class="pln"> context</span><span class="pun">,</span> <span class="typ">AttributeSet</span><span class="pln"> attrs</span><span class="pun">,</span> <span class="kwd">int</span><span class="pln"> defStyle</span><span class="pun">)</span> <span class="pun">{</span>
      <span class="kwd">super</span><span class="pun">(</span><span class="pln">context</span><span class="pun">,</span><span class="pln"> attrs</span><span class="pun">,</span><span class="pln"> defStyle</span><span class="pun">);</span><span class="pln">
      setTimeView</span><span class="pun">();</span>
   <span class="pun">}</span>

   <span class="kwd">private</span> <span class="kwd">void</span><span class="pln"> setTimeView</span><span class="pun">()</span> <span class="pun">{</span>
      <span class="com">// has the format hour.minuits am/pm</span>
      <span class="typ">SimpleDateFormat</span><span class="pln"> dateFormat </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">SimpleDateFormat</span><span class="pun">(</span><span class="str">"hh.mm aa"</span><span class="pun">);</span>
      <span class="typ">String</span><span class="pln"> time </span><span class="pun">=</span><span class="pln"> dateFormat</span><span class="pun">.</span><span class="pln">format</span><span class="pun">(</span><span class="typ">Calendar</span><span class="pun">.</span><span class="pln">getInstance</span><span class="pun">().</span><span class="pln">getTime</span><span class="pun">());</span>
      
      <span class="kwd">if</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">titleText </span><span class="pun">!=</span> <span class="kwd">null</span> <span class="pun">)</span><span class="pln">
      setText</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">titleText</span><span class="pun">+</span><span class="str">" "</span><span class="pun">+</span><span class="pln">time</span><span class="pun">);</span>
      <span class="kwd">else</span><span class="pln">
         setText</span><span class="pun">(</span><span class="pln">time</span><span class="pun">);</span>
   <span class="pun">}</span>

   <span class="kwd">private</span> <span class="kwd">void</span><span class="pln"> decorateText</span><span class="pun">()</span> <span class="pun">{</span>
      <span class="com">// when we set setColor attribute to true in the XML layout</span>
      <span class="kwd">if</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">color </span><span class="pun">==</span> <span class="kwd">true</span><span class="pun">){</span>
         <span class="com">// set the characteristics and the color of the shadow</span><span class="pln">
         setShadowLayer</span><span class="pun">(</span><span class="lit">4</span><span class="pun">,</span> <span class="lit">2</span><span class="pun">,</span> <span class="lit">2</span><span class="pun">,</span> <span class="typ">Color</span><span class="pun">.</span><span class="pln">rgb</span><span class="pun">(</span><span class="lit">250</span><span class="pun">,</span> <span class="lit">00</span><span class="pun">,</span> <span class="lit">250</span><span class="pun">));</span><span class="pln">
         setBackgroundColor</span><span class="pun">(</span><span class="typ">Color</span><span class="pun">.</span><span class="pln">CYAN</span><span class="pun">);</span>
      <span class="pun">}</span> <span class="kwd">else</span> <span class="pun">{</span><span class="pln">
         setBackgroundColor</span><span class="pun">(</span><span class="typ">Color</span><span class="pun">.</span><span class="pln">RED</span><span class="pun">);</span>
      <span class="pun">}</span>
   <span class="pun">}</span>
<span class="pun">}</span>

package com.example.tutorialspoint7.myapplication;

import java.text.SimpleDateFormat;

import java.util.Calendar;

import android.content.Context;

import android.graphics.Color;

import android.util.AttributeSet;

import android.widget.TextView;

public class TimeView extends TextView {

private String titleText;

private boolean color;

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

}

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

}

فایل Main activity را بصورت زیر ویرایش کنید:

مثال :

package com.example.Pvlearn.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");
   }
}

package com.example.Pvlearn.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");

}

پس از اجرای برنامه چیزی مشابه خروجی زیر را مشاهده خواهید کرد:

کنترل های سفارشی در اندروید

کلام آخر

اندروید به طور پیش فرض لیست کاملی از کنترل های تعاملی کاربر را از جمله Button، TextView، EditText، ListView و… ارائه می دهد. اما با این حال شما می توانید عملکرد این کنترل ها را با قابلیت کنترل های سفارشی در اندروید به دلخواه خود تغییر دهید.

امیدواریم که از مباحث اجزای سفارشی در اندروید لذت برده باشید در بخش بعدی به مباحث drag/drop در اندروید می پردازیم.

به اشتراک بگذارید

کنترل های سفارشی در اندروید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۶ : اجزای سفارشی در اندروید

مقدمه

اجزای سفارشی در اندروید

مراحل ایجاد یک طراحی کنترل سفارشی ساده

کلام آخر

لیست مطالب دوره

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

رابط کاربری در اندروید

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

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ