+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم برمجة الهواتف (http://vb4arb.com/vb/forumdisplay.php?fid=208)
+--- قسم : قسم مقالات Xamarin.Android (http://vb4arb.com/vb/forumdisplay.php?fid=209)
+--- الموضوع : LogIn App: Styling Button #6 (/showthread.php?tid=22980)
LogIn App: Styling Button #6 - Sajad - 18-12-17
بسم الله الرحمن الرحيم
(رب اشرح لي صدري ويسر لي امري واحلل عقدة من لساني يفقهوا قولي)
السلام عليكم ورحمة الله وبركاته
سنتعلم في هذا الدرس باذن الله كيفية تغيير الشكل الافتراضي للأداة Button وايضا سنطبق بعض التغييرات على واجهة تسجيل الدخول لتبدو بهذا الشكل:
![[صورة مرفقة: screenshot_20171218-1827421.png?ssl=1&w=450]](https://i2.wp.com/dawnofprog.files.wordpress.com/2017/12/screenshot_20171218-1827421.png?ssl=1&w=450)
في البداية الصورة المستخدمة كخلفية تجدها في الرابط أدناه
https://i.stack.imgur.com/7vMmx.jpg
بعد تنزيل الصورة قم بوضعها في المجلد drawable وقم بتغيير اسمها الى myBackground.
طيب الان لتبع الخطوات التالية للتعديل على المثال الذي نعمل عليه من الدوس الأول:
اولا: قم باستبدال كود Main.axml بهذا الكود من خلال الدخول الى Source:
PHP كود :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@drawable/myBackground"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="LogIn App"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="20dp"
android:textSize="28sp" />
<Space
android:layout_height="150dp"
android:layout_width="match_parent" />
<EditText
android:id="@+id/userName"
android:textSize="20sp"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:gravity="left"
android:hint="User Name"
android:textColorHint="#CCCCCC"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" />
<EditText
android:id="@+id/password"
android:textSize="20sp"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:gravity="left"
android:hint="Password"
android:textColorHint="#CCCCCC"
android:inputType="textPassword"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_margin="10dp"
android:weightSum="100"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/okButton"
android:text="Ok"
android:background="@drawable/buttonStyle"
android:layout_marginEnd="5dp"
android:textSize="20sp"
android:textAllCaps="false"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="50" />
<Button
android:id="@+id/cancelButton"
android:text="Cancel"
android:background="@drawable/buttonStyle"
android:textSize="20sp"
android:textAllCaps="false"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="50" />
</LinearLayout>
</LinearLayout>
التغييرات التي تمت على ملف Main.axml هي كالتالي:
أ- حذف اداتي TextView واستبدالها بالخاصية hint لأداتي EditText لعرض العنوان.
ب- استخدام خاصية textColorHint لتغيير لون الـhint.
جـ- تغيير الـbackground للـLayout الاساسية بهذا الشكل:
PHP كود :
android:background="@drawable/myBackground"
د- استخدام خاصية weightSum في الـLayout الثانية الافقية وذلك لتوزيع المساحة الافقية بالتساوي مع أداتي Button وذلك بالشكل التالي:
-جعل خاصية Layout_width لأداتي Button =0dp واستبدالها بـ خاصية layout_weight واسنادها الرقم 50 للدلالة على حجز 50% من المساحية الافقية للحاضنة ونفس الرقم للـButton الثانية.
فائدة الخاصية weightSum: توزيع الادوات في الحاضنة سواء كان التوزيع بشكل افقي أو عمودي حسب النسب المئوية، بالتالي مجموع الـweights للادوات داخل الحاضنة يجب أن تساوي weightSum للحاضنة.
ثانيا: قم باستبدال كود الـTheme بهذا الكود من خلال الدخول الى ملف Styles.xml داخل المجلد values:
PHP كود :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<!-- Inherit from the light Material Theme -->
<style name="MyCustomTheme" parent="android:Theme.Material.Light.DarkActionBar">
<!-- Customizations go here -->
<item name="android:textColorPrimary">#FAFAFA</item>
<!-- Override the status bar color -->
<item name="android:colorPrimaryDark">#FF006885</item>
<!-- Override the app bar color -->
<item name="android:colorPrimary">#FF176F87</item>
<!-- Override the color of UI controls -->
<item name="android:colorAccent">#FF176F87</item>
<!-- text color of UI controls -->
<item name="android:textColor">#FAFAFA</item>
</style>
</resources>
التغييرات على الـTheme:
1- تغيير الالوان.
2- اضافة خاصية textColorPrimary: يتحكم بلون النص الظاهر على Toolbar.
3- اضافة خاصية textColor: يتحكم بلون النص الظاهر على الاداوت.
ثالثا: تصميم الشكل الجديد وتطبيقها على أداتي Button:
-قم بانشاء ملف xml جديد باسم buttonStyle داخل المجلد drawable وضع بداخلها الكود التالي:
PHP كود :
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#FF036886" />
<stroke
android:width="1dp"
android:color="#FAFAFA" />
<corners
android:radius="10dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<solid
android:color="#FF555263"
/>
<stroke
android:width="1dp"
android:color="#FAFAFA" />
<corners
android:radius="10dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
لنشرح الكود أعلاه:
selector: عبارة عن وسم يطبق على الاداوت التي لديها عدة حالات مثل (الضغط، المرور ...) وهذا الوسم يكتب بداخلها حالتين باعتبار Button لديها حالة الClick والحالة الافتراضية وهذه الحالة تكتب داخل الوسم item مثل حالة :
PHP كود :
android:state_pressed="true
1- shape: مسؤول عن شكل الاداة (دائري، مستطيل....).
داخل shape:
1- solid: لون الاداة.
2- stroke: اطار الاداة ويتضمن سمك ولون الاطار.
3- corners: زوايا الاطار.
4- padding: تكلمنا عنها سابقا حيث تستطيع الاستغناء عنها هنا.
داخل shape:
1- solid: لون الاداة.
2- stroke: اطار الاداة ويتضمن سمك ولون الاطار.
3- corners: زوايا الاطار.
4- padding: تكلمنا عنها سابقا حيث تستطيع الاستغناء عنها هنا.
نفس ما سبق أعلاه ينطبق على الحالة الافتراضية (عدم الضغط) مع تغيير في الالوان لتمييز حالة الضغط من عدمه. (يمكنك تجربة ذلك عند تنفيذ المثال لترى الفرق بين حالة الضغط والحالة الافتراضية).
الان لتطبيق هذا الـstyle نستخدم خاصية الـbackground للأداة بهذا الشكل:
PHP كود :
android:background="@drawable/buttonStyle"
نلقاكم في درس آخر ان شاءالله.
والحمد لله رب العالمين
RE: LogIn App: Styling Button #6 - حريف برمجة - 18-12-17
الله يجزاك خير أخي سجاد ،،