آموزش برنامه نویسی اندروید | آموزش ساخت View سفارشی در اندروید
سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش ساخت View سفارشی در اندروید خواهیم پرداخت در قبل آموزش ساخت View سفارشی یا همان Custom Component را قرار داده بودیم ولی در این آموزش یاد می گیرید چه طور با ساخت view سفارشی کد نویسی را در برنامه برای خودمان راحت تر کنیم با ما همراه باشید.
فکر کنید ما یک layout داریم که سه view در آن وجود دارد برای اینکه با هر کدام کار کنیم باید ابتدا آنها را پیدا کنیم (findviewby..) و برایشان کلیک و … را تعریف کنیم به نظر شما بهتر نیست که از یک view سفارشی استفاده کنیم ؟ که خودش یک view باشد ولی 3 مقدار ورودی را بپذیرد ؟ یعنی یک view داریم که می تواند سه کار محتلف را برای ما انجام دهد !
حالا چرا باید این کار را انجام دهیم ؟
اول این که باعث کاهش حجم dex در برنامه می شود.
دوم اینکه فقط ما با یک view کار خواهیم داشت.
سوم اینکه شاید بخش کد نویسی ساخت view سفارشی کمی سخت باشد ولی در بخش کد نویسی اکتیویتی ما خیلی راحت تر خواهیم بود چون فقط با یک view کار داریم !
ابتدای کار یک فایل در layout خود به نام custom_view.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical"> <TextView android:id="@+id/artist_Text" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="Artist" android:textAppearance="?android:textAppearanceLarge" android:textColor="#4689C8" android:textStyle="bold" /> <TextView android:id="@+id/track_Text" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="Track" android:textAppearance="?android:textAppearanceLarge" android:textColor="#4689C8" android:textStyle="bold" /> <Button android:id="@+id/buy_Button" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="Buy" /> </LinearLayout> |
view های بالا همان view نهایی سفارشی ما است. کل کدهای بالا در آخر یک view به ما می دهند.
در مسیر res/values یک فایل به نام attrs.xml ایجاد کرده و کدهای زیر را قرار دهید.
1 2 3 4 5 6 7 | <resources> <declare-styleable name="CustomView"> <attr name="artistText" format="string" /> <attr name="trackText" format="string" /> <attr name="buyButton" format="string" /> </declare-styleable> </resources> |
کدهای بالا ویژگی های view ما برای set کردن از طریق layout را فراهم می کند. (در ادامه به آن اشاره خواهم کرد )
یک فایل جاوا به نام CustomView.java ایجاد کرده و کدهای زیر را در آن قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | public class CustomView extends LinearLayout { @StyleableRes int index0 = 0; @StyleableRes int index1 = 1; @StyleableRes int index2 = 2; TextView artistText; TextView trackText; Button buyButton; public CustomView(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } private void init(Context context, AttributeSet attrs) { inflate(context, R.layout.custom_view, this); int[] sets = {R.attr.artistText, R.attr.trackText, R.attr.buyButton}; TypedArray typedArray = context.obtainStyledAttributes(attrs, sets); CharSequence artist = typedArray.getText(index0); CharSequence track = typedArray.getText(index1); CharSequence buyButton = typedArray.getText(index2); typedArray.recycle(); initComponents(); setArtistText(artist); setTrackText(track); setButton(buyButton); } private void initComponents() { artistText = (TextView) findViewById(R.id.artist_Text); trackText = (TextView) findViewById(R.id.track_Text); buyButton = (Button) findViewById(R.id.buy_Button); } public CharSequence getArtistText() { return artistText.getText(); } public void setArtistText(CharSequence value) { artistText.setText(value); } public CharSequence getTrackText() { return trackText.getText(); } public void setTrackText(CharSequence value) { trackText.setText(value); } public CharSequence getButton() { return buyButton.getText(); } public void setButton(CharSequence value) { buyButton.setText(value); } } |
کدهای بالا متودهای قابل استفاده در اکتیویتی خواهند بود مثلا setArtistText مقدار متن مربوط به Artist را ست می کند و الی آخر…
حالا برای استفاده از آن در layout باید مثل زیر عمل کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <ir.programchi.CustomView android:id="@+id/test" android:layout_width="wrap_content" android:layout_height="wrap_content" app:artistText="ColdPlay" app:trackText="Paradise" app:buyButton="Buy"/> </LinearLayout> |
در بالا به جای ir.programchi باید نام package خودتان را قرار دهید.
و app:artistText , app:trackText و app:buyButton یادتان باشد آن را در attrs تعریف کریدم
می توانید مقدار Text ها را با این مقادیر ست کنید.
و برای اینکه از طریق کد به آنها دسترسی داشته باشید مثل زیر عمل کنید.
1 2 3 4 | CustomView cv = (CustomView)findViewById(R.id.test); cv.setArtistText("Programchi.ir"); cv.setTrackText("Programchi.ir :D") cv.setButton("WOW"); |
شاید کد بالا شکل ظاهری خوبی برای شما ایجاد نکند ولی از نظر Function یا Functionally کامل است.
این آموزش هم به پایان رسید.
موفق و پیروز باشید.
ممنون خیلی خوب بود
دوست عزیز اگر بخواهیم view ساخته شده رو تبدیل به یک library کنیم تا در پروژه های دیگر استفاده کنیم باید چه کار کرد ؟
ممنون
سلام
خواهش می کنم.
آموزش ساخت کتاب خانه در سایت وجود دارد از لینک زیر استفاده کنید.
https://programchi.ir/2017/07/20/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b3%d8%a7%d8%ae%d8%aa-%da%a9%d8%aa%d8%a7%d8%a8-%d8%ae%d8%a7%d9%86%d9%87-%d8%af%d8%b1-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c-%d8%a7%d9%86/
موفق باشید.
ممنون
سلام ممنون. من اگه بخام با کد جاوا این ویو رو بسازم چه پارامترهایی رو باید به سازندش پاس بدم، مثلا CustomView cv=new CustomView(?,?)
ساخت view به این شکل نیست base آن با کد است شما باید overload براش درست کنید اگرم با کد می خواهید ایجاد کنید فقط کافی است instance اکتیویتی رو توش بریزید بعدش باید ویژگی های قرار گیری در صفحه را تنظیم کنید از کد زیر استفاده کنید فقط View را جایگزین کنید.
موفق باشید.