راسخون

طراحی فایل های xml متناظر با Activity ها و ... (لایه گرافیکی Activity ها و ...)، در برنامه نویسی اند

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

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

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

همان طور که می دانید، هنگام نوشتن کدهای java ، برای ارجاع به یک عنصر موجود در فایل xml ، به id مربوط به آن اشاره می کنیم. برای تعیین id برای یک عنصر موجود در فایل xml ، باید مشخصه id را در تگ آن عنصر بنویسیم. یعنی مشابه کد زیر :


android:id="@+id/textView1"

که در آن، id عنصر را برابر textView1 تعیین کرده ایم.

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


<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView" />

نکته :

یک مثال برای ارجاع به عنصر، با استفاده از id آن را در زیر نشان داده ایم (نوع عنصر را TextView در نظر گرفته ایم) :


TextView tv = (TextView) findViewById(R.id.textView1);

نکته :

بد نیست یادآوری کنیم که وقتی برای یک عنصر، یک id تعیین می کنیم، id مورد نظر در فایل R.java (کلاس R) ذخیره می شود. این ذخیره سازی به صورت خودکار انجام می شود و هیچگاه نباید فایل R.java را به صورت دستی ویرایش کنیم. فقط قصدمان نشان دادن معنی عبارت زیر است که برای ارجاع به آن id به کار می رود :


R.id.textView1

 

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

همان طور که می دانید، برای هر Activity ، یک فایل xml در نظر می گیریم که عناصر لایه گرافیکی متناظر با Activity ، باید درون آن تعریف شوند. این عناصر را درون کدهای فایل xml تعریف می کنیم. اما گاهی نیاز داریم که توسط کدهای java و در نیمه های اجرای برنامه، یک عنصر جدید به لایه گرافیکی اضافه نماییم. بنابراین، در این مبحث قصد داریم که شیوه افزودن عناصر جدید به لایه گرافیکی متناظر با Activity توسط کدهای java را شرح بدهیم.

کدهای فایل xml متناظر با Activity را به صورت زیر می نویسیم :


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ScrollView
        android:id="@+id/ScrollView01"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher">
            <LinearLayout
                android:id="@+id/linear"
                android:orientation="vertical"
                android:layout_below="@+id/add_record"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent">
            </LinearLayout>
    </ScrollView>
</LinearLayout>

سپس درون فایل مربوط به Activity (فایل java) و در میان کدهای java ، کدهای زیر را می نویسیم :


LinearLayout Linear  = (LinearLayout) findViewById(R.id.linear);
TextView tv = new TextView(this);
tv.setText("My Text");
Linear.addView(tv);

با اجرای این کدهای java ، یک TextView به لایه گرافیکی متناظر با Activity ، افزوده می شود.

شیوه کدنویسی برای عناصر دیگری مثل دکمه (Button) و ... نیز به همین صورت می باشد و تنها باید کدها را متناسب با عنصر، کمی تغییر بدهید.

به عنوان مثال، اگر بخواهیم یک دکمه (Button) اضافه کنیم، که با هر بار اشاره کاربر بر روی آن، یک پیام کوتاه به کاربر نمایش داده شود (با Toast)، کدهای زیر را می نویسیم :


LinearLayout Linear  = (LinearLayout) findViewById(R.id.linear);
Button b = new Button(this);
b.setText("My Button");
Linear.addView(b);

b.setOnClickListener(new OnClickListener() {
                       
    @Override
    public void onClick(View arg0) {
        // code for run after click
        Toast.makeText(getApplicationContext(), "click", Toast.LENGTH_LONG).show();
    }
});

 

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

همان طور که می دانید، معمولا برای هر Activity ، یک لایه گرافیکی را در یک فایل xml تعریف می کنیم که می تواند دارای تعدادی عنصر، مثل Button یا ImageView ، باشد. قبلا در مبحثی دیگر، چگونگی افزودن این عناصر به لایه گرافیکی، با کدنویسی، را شرح داده بودیم، اکنون در این مبحث می خواهیم آموزش بدهیم که چگونه می توان عنصری را که قبلا در لایه گرافیکی تعریف کرده ایم را حذف کنیم (حذف از View).

فرض کنید که در فایل xml مربوط به لایه گرافیکی متناظر با Activity ، یک دکمه (Button) با id برابر button1 تعریف کرده ایم و اکنون می خواهیم که با کدنویسی، آن را از لایه گرافیکی حذف کنیم تا دیگر کاربر آن را نبیند. برای این منظور، کدهای زیر را می نویسیم :


View name = findViewById(R.id.button1);
LinearLayout L = (LinearLayout) name.getParent();
L.removeView(name);

دقت کنید که در کدهای فوق، نوع لایه گرافیکی را LinearLayout در نظر گرفته ایم.

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

فرض کنید یک عنصر دلخواه (از هر نوعی) را در لایه گرافیکی (فایل xml) تعریف کرده ایم و می خواهیم View آن را افزوده و یا اینکه حذف کنیم (نمایش یا پنهان کردن عنصر). برای افزودن View مربوط به عنصر (نمایش عنصر)، کد زیر را می نویسیم (id عنصر را برابر button1 در نظر گرفته ایم) :


findViewById(R.id.button1).setVisibility(View.VISIBLE);

برای حذف View مربوط به عنصر (پنهان کردن عنصر)، کد زیر را می نویسیم (id عنصر را برابر button1 در نظر گرفته ایم) :


findViewById(R.id.button1).setVisibility(View.GONE);

نکته :

می توانیم کدها را به شکل زیر نیز بنویسیم (ذخیره View مربوط به عنصر، در یک متغیر برای استفاده در کدهای بعدی) :


View myView = findViewById(R.id.button1);
myView.setVisibility(View.VISIBLE);

 

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

حتما تاکنون صفحاتی را دیده اید که اندازه آنها، بزرگتر از صفحه نمایشگر گوشی است و کاربر می تواند در آنها، با کشیدن انگشت خود به سمت بالا یا پایین، بخش هایی از صفحه را که در نمایشگر گوشی نمایش داده نشده است را ببیند. برای ساخت اینگونه صفحات، باید در فایل xml متناظر با activity این صفحات، کدهای زیر را بنویسیم :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_simple_3" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

   
    </LinearLayout>
   
</ScrollView>

همان طور که مشاهده می کنید، از تگ ScrollView استفاده کرده ایم که قابلیت اسکرول به بالا و پایین را به وجود می آورد. سپس در میان تگ های ScrollView ، تگ های LinearLayout را نوشته ایم. اکنون اگر بخواهیم مثلا یک دکمه (Button) به صفحه اضافه کنیم، باید کد مربوط به آن را در میان تگ های LinearLayout بنویسیم. مثل کد زیر :


<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background_simple_3" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginBottom="@dimen/vertical_space"
        android:layout_marginLeft="@dimen/horizontal_space"
        android:layout_marginRight="@dimen/horizontal_space"
        android:layout_marginTop="@dimen/vertical_space"
        android:background="@drawable/background_button_2"
        android:padding="@dimen/padding_text"
        android:text="@string/subject_45"
        android:textSize="@dimen/button_text_size" />

    </LinearLayout>
   
</ScrollView>

 

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

شاید تاکنون برایتان پیش آمده است که بخواهید در یک فایل xml ، مقداری توضیح (commnet) بنویسید که به صورت کد اجرا نشود و تنها برای خواندن آن توسط خود شما می باشد، یا اینکه خیلی از مواقع، چندین عنصر در فایل xml تعریف کرده ایم و ممکن است که به طور موقت بخواهیم یک یا چندین عنصر را حذف کرده و اثر نبود آنها را ببینیم، در این حالت بهتر است که به جای حذف، آنها را به صورت توضیح (comment) در بیاوریم تا در آینده اگر دوباره خواستیم آنها در فایل xml به صورت کد اجرا شوند، دیگر مجبور به کدنویسی آنها از ابتدا نشویم.

برای نوشتن یک یا چند خط توضیح (comment) در یک فایل xml ، باید توضیحات مورد نظرمان را به شکل کلی زیر بنویسیم :


<!--
your comment
-->

یا به شکل زیر (تنها در یک خط) :


<!-- your comment -->

که در آن، به جای عبارت your comment ، می توانید توضیحات مورد نظر خودتان را بنویسید.

بنابراین چنانچه قصد دارید که یک عنصر تعریف شده در فایل xml را به صورت توضیح (comment) در بیاورید، تنها کافی است که در خط قبل از کدهای آن، عبارت <!-- و در خط بعد از کدهای آن، عبارت --> را بنویسید. به عنوان مثال، کد زیر را ببینید :


<!--
<Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="myText" />
-->

بنابراین کدهای مربوط به تعریف این دکمه (Button) در فایل xml اجرا نخواهد شد و کاربر آن دکمه (Button) را در لایه گرافیکی خروجی نمی بیند.

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

رض کنید که قصد داریم یک عنصر را در فایل xml (لایه گرافیکی متناظر با Activity) قرار بدهیم، به گونه ای که کل صفحه مربوط به Activity را بپوشاند و هیچ گونه حاشیه ای هم بین آن و مرزهای صفحه Activity وجود نداشته باشد. برای این منظور، اگر مثلا آن عنصر را به صورت دکمه (Button) در نظر بگیریم، باید کدهای فایل xml به صورت زیر باشند :

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Button" />

</LinearLayout>

همان طور که مشاهده می کنید، نوع لایه را برابر LinearLayout انتخاب کرده ایم و در میان کدهای آن، همه مشخصه های مربوط به فاصله گرفتن (layout_margin و layout_marginLeft و ...) را حذف کرده ایم. همچنین مشخصه های layout_width و layout_height را برای عنصر مورد نظرمان (یعنی همان Button) را به صورت زیر نوشته ایم :


android:layout_width="match_parent"
android:layout_height="match_parent"

تعیین مقدار match_parent برای این دو مشخصه، باعث می شود که ارتفاع و عرض دکمه (Button) برابر والد آن (parent)(عنصر مرتبه بالاتر که شامل آن است) که همان LinearLayout است، بشود و LinearLayout هم که بدون حاشیه است و این دو شخصه برای آن نیز برابر match_parent تعیین شده است و کل صفحه را می پوشاند، بنابراین دکمه (Button) کل صفحه را می پوشاند.

ظاهر گرافیکی فایل xml در برنامه eclipse به صورت زیر خواهد بود :

ظاهر گرافیکی Activity در یک گوشی اندروید واقعی، به صورت زیر می باشد :

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

نمی دانم تاکنون در زبان HTML ، با جدول ها (tables) کار کرده اید یا نه، ولی همان طور که در زبان HTML ، با استفاده از تگ table ، یک جدول می سازیم و سپس با تگ های tr و td برای آن، ردیف ها و خانه های جدید ایجاد می کنیم، در برنامه نویسی اندروید نیز با استفاده از عنصر TableLayout می توانیم یک لایه (layout) به شکل جدول (table) داشته باشیم و سپس با استفاده از عنصر TableRow می توانیم برای جدول، ردیف های جدید ایجاد کنیم و همچنین با مشخصه layout_column برای هر عنصر، می توانیم شماره ستون (column) آن را مشخص کنیم.

برای درک بهتر این موضوع، مثالی را از سایتی دیگر برایتان ذکر می کنم که با خواندن کدهای آن، شیوه ساختن یک جدول با استفاده از TableLayout و همچنین چگونگی چیدن عنصرهای مختلف در خانه های جدول را متوجه بشوید. کدهای فایل xml به صورت زیر می باشند :


<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <!-- 2 columns -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <TextView
            android:id="@+id/textView1"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <Button
            android:id="@+id/button1"
            android:text="Column 2" />
    </TableRow>
 
    <!-- edittext span 2 column -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <EditText
            android:id="@+id/editText1"
            android:layout_span="2"
            android:text="Column 1 &amp; 2" />
    </TableRow>
 
    <!-- just draw a red line -->
    <View
        android:layout_height="2dip"
        android:background="#FF0000" />
 
    <!-- 3 columns -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <TextView
            android:id="@+id/textView2"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <Button
            android:id="@+id/button2"
            android:text="Column 2" />
 
        <Button
            android:id="@+id/button3"
            android:text="Column 3" />
    </TableRow>
 
    <!-- display this button in 3rd column via layout_column(zero based) -->
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <Button
            android:id="@+id/button4"
            android:layout_column="2"
            android:text="Column 3" />
    </TableRow>
 
    <!-- display this button in 2nd column via layout_column(zero based) -->
    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <Button
            android:id="@+id/button5"
            android:layout_column="1"
            android:text="Column 2" />
    </TableRow>
 
</TableLayout>

ظاهر گرافیکی فایل xml به صورت زیر می باشد (در برنامه eclipse) :

در برنامه eclipse ، در بخش Outline ، می توانید چگونگی چیدمان عناصر قرار گرفته در فایل xml را بهتر درک کنید :

با نصب برنامه اندروید بر روی یک گوشی واقعی، ظاهر گرافیکی Activity به صورت زیر می باشد :


1 منبع و لینک مفید
1
http://www.mkyong.com/android/android-tablelayout-example/

 

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

با استفاده از عنصر View ، می توانیم یک خط افقی را در لایه گرافیکی (فایل xml) رسم کنیم. برای این منظور، کدهای زیر را در فایل xml می نویسیم :


<View
    android:layout_width = "fill_parent"
    android:layout_height="2dp"
    android:background="#FF0000" />

به عنوان مثال، فرض کنید بخواهیم بین دو دکمه (Button)، یک خط (line) افقی قرمز رنگ رسم کنیم، برای این منظور، کدهای فایل xml را به صورت زیر می نویسیم :


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="Button" />
   
    <View
        android:layout_width = "fill_parent"
            android:layout_height="2dp"
            android:background="#FF0000" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="Button" />

</LinearLayout>

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

hosseinb68 کاربر طلایی1
|
تعداد پست ها : 1269
|
تاریخ عضویت : بهمن 1389 

فرض کنید که قصد داریم در یک لایه گرافیکی (در فایل xml)، یک عنصر را بر روی عنصری دیگر و دقیقا در وسط آن قرار بدهیم. برای این منظور، باید موارد زیر را انجام بدهیم :

1- نوع لایه گرافیکی را برابر RelativeLayout انتخاب کنیم.

2- عنصری که می خواهیم بر روی عنصر دیگری قرار بگیرد (عنصر بالاتر)، باید کدهای آن، بعد از کد عنصر پایین تر، نوشته شود (در غیر این صورت، در زیر آن قرار می گیرد).

3- باید در کدهای عنصری که بالاتر قرار می گیرد، مشخصه زیر را بنویسیم :


android:layout_centerInParent="true"

به عنوان مثال، فرض کنید که می خواهیم یک عنصر دکمه (Button) را بر روی یک عنصر ImageView و دقیقا در وسط آن قرار بدهیم، برای این منظور، کدهای لایه گرافیکی (فایل xml) را به صورت زیر می نویسیم :


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
   
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />
   
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button" />

</RelativeLayout>

ظاهر لایه گرافیکی (فایل xml) در برنامه eclipse ، به صورت زیر می باشد :

ظاهر لایه گرافیکی، هنگام نمایش در یک گوشی اندروید واقعی، به صورت زیر می باشد :