ئەرخەۋەر ئاندروئىد ئەپ دىتالى تەقلىدى كىرىش بېتى (MaterialDesign)

Views: 884 6 باھا /

ھەپتە ئاخىرىدا ئازراق بىكار ۋاقتىم چىقىپ قالدى. بۇ يات شەھەرنىڭ ئادەمنى جەلب قىلغۇدەك ھېچنەرسىسى يوق. زىرىكىشلىك ھەپتە ئاخىرىنى يەنىلا سۆيۈملۈك كومپىيۇتېر ئالدىدا ئۆتكۈزمەكتىن باشقا چارە بولمىدى.
ئاندروئىد ماتېرىيال لايىھە ئۇسلۇبى (Material Design) ھەققىدە خەنزۇچە - ئىنگىلىزچە مەنبەلەر ناھايىتى كۆپ بولسىمۇ، ھازىرغىچە ئۇيغۇر يېزىقىدىكى بىرەر ئەپنىڭ ھەقىقىي تۈردە بۇ خىل لايىھە ئۇسلۇبىنى قوللىنىپ باققىنىنى بايقىمىدىم. گەرچە UI كۆرۈنمىسىنى ماتېرىيال ئۇسلۇبىغا يىقىنلاشتۇرۇپ ياسىغان ئەپلەر بولسىمۇ، ئەمما ھەقىقىي تۈردە قوللانغانلىرى يوقنىڭ ئورنىدا. شۇنداق قىلىپ ئادەتتە كۆپرەك ئىشلىتىپ قويىدىغان ئاندروئىد ئۇيغۇرچە ئەپلىرىدىن - ئەرخەۋەر ئەپ دېتالىنىڭ كىرىش - تىزىملىتىش كۆزنىكىگە بولغان ناقايىللىقىمنى ئىپادىلەپ، شۇنى دوراپ ئاددىيلا ماتېرىيال ئۇسلۇبىدا مەشىق ئويناپ قويدۇم.

مەشىق ئەپ كۆرۈنمە يۈز رەسىملىرى

ErqalLogin_2 ErqalLogin_1

تېخنكىلىق ھالقىلىرى

1 - قەدەم

ماتېرىيال لايىھە ئۇسلۇبىنى قوللىنىش ئۈچۈن ئاۋۋال مۇناسىۋەتلىك قوللاش ئامبىرىنى ئىشلىتىشكە توغرا كېلىدۇ. يەنى تۆۋەندىكىدەك ئىككى لايىھە ئامبىرىنى build.gradle ھۆججىتى ئىچىدە سەپلەپ ئەكىرىمىز:

 compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'

ئەلۋەتتە UI كونتىروللىرىنى ئىشلىتىشكە ئاسان بولسۇن ئۈچۈن، مەنە يەنە ئۈچىنچى تەرەپ ئامبىرى butterknife نى ئىشلەتتىم:

compile 'com.jakewharton:butterknife:7.0.1'

2 - قەدەم

ماتېرىيال ئۇسلۇبى ئامبىرىنى سەپلەپ بولغاندىن كېيىن، بۇ خىل ئۇسلۇبنى ئەپ دېتالىمىزدا قوللىنىش ئۈچۈن، ئاساسلىقى AppTheme يەنى، ئەپ ئۇسلۇبىدا مۇناسىۋەتلىك ئۇسلۇب خاسلىقلىرىنى تەڭشەشكە توغرا كېلىدۇ. ئەپ ھۆججىتى res-->values مۇندەرىجىسى ئىچىدىكى styles ھۆججىتى ئىچىدە خۇددى توربەتلەرنىڭ CSS لىرىنى يازغاندەك، پۈتكۈل ئەپ ئۇسلۇبىنى تەڭشەشكە بولىدۇ( دېققەت: ماتېرىيال لايىھە ئۇسلۇبى Android5.0 دىن كېيىن رەسمىي ئومۇملىشىۋاتقان نەرسە بولغاچقا، تۆۋەن نەشىردىكى سېستىمىلارغا نىسبەتەن مۇناسىپ تەدبىر قوللىنىش مۇمكىن، شۇڭا Styles ھۆججىتى ئىچىدە ئىككى ياكى ئۇنىڭدىن كۆپ style بولىدۇ).

  
  1. <style name="AppTheme.Dark" parent="Theme.AppCompat.NoActionBar">  
  2.   
  3.         <item name="colorPrimary">@color/primaryitem>  
  4.         <item name="colorPrimaryDark">@color/primary_darkitem>  
  5.         <item name="colorAccent">@color/accentitem>  
  6.   
  7.         <item name="android:typeface">monospaceitem>  
  8.         <item name="android:direction">right_to_leftitem>  
  9.         <item name="android:layoutDirection">rtlitem>  
  10.         <item name="android:textDirection">rtlitem>  
  11.   
  12.         <item name="android:windowBackground">@color/primaryitem>  
  13.   
  14.         <item name="colorControlNormal">@color/ironitem>  
  15.         <item name="colorControlActivated">@color/primary_darkeritem>  
  16.         <item name="colorControlHighlight">@color/primary_darkeritem>  
  17.         <item name="android:textColorHint">@color/ironitem>  
  18.   
  19.         <item name="colorButtonNormal">@color/primary_darkeritem>  
  20.         <item name="android:colorButtonNormal">@color/primary_darkeritem>  
  21.   
  22.   
  23.     style>  
  24.     

مەن كىرىش ۋە تىزىملىتىش بەتلىرىدە ئەپ قورال سىتونى(ActionBar) بولمىغان AppCompat ئىچىدىكى ئۇسلۇبنى ئىشلەتتىم، ئاندىن ھەرخىل رەك ۋە باشقا خاسلىقلىرىنى يۇقىرىدەك بەلگىلىدىم( ئەستايىدىل ئوقۇرمەنلىرىم يۇقىرىقى كودتىن ئوڭدىن -سولغا يۆنىلىش بەلگىلەش ۋە خەت نۇسخىسىغا ئائىت خاسلىقلارنىمۇ بايقىۋالىدۇ. بۇ ھەقتە كېيىنكى قەدەمدە توختىلىمىز).

3 - قەدەم

شۇنىڭلىق بىلەن ئەپ كۆرۈنمە يۈزى ماتېرىيال ئۇسلۇبىدا بوپ كەتتى. يۇقىرىقى تەڭشەكلەردىن كېيىن، كونتروللار بىز سەپلىگەن ماتېرىيال لايىھە ئامبىرى تەمىنلىگەن ئۈنۈملەرگە ئىگە بولىدۇ. ئەمدىكى مەسىلە ئۇيغۇرچە ئەپنىڭ ئوڭدىن - سولغا يۆنىلىشى ۋە خەت نۇسخىسىنى ھەل قىلىش بولسۇن.
ئىلگىرى ئۇيغۇرچە ئەپ ئېچىش ئىشلىرى بىلەن شۇغۇللىنىپ باقمىغان بولغاچقا، بۇ ھەقتىكى بىلىمىم كەمچىل ئىدى. موشۇ باھانىدە بىرنەچچە داڭلىق ئۇيغۇرچە ئەپنى سۆكۈپ، ئۇلارنىڭ ئۇيغۇرچە يېزىقنى نورمال كۆرسېتىش ۋە ئوڭدىن - سولغا يۆنىلىش مەسىلىسىنى ھەل قىلىش ئۈچۈن قانداق تەدبىر قوللانغانلىقىنى كۆرۈپ باقتىم. خولاسە:
1. يېزىققا مۇناسىۋەتلىك بولغان كونتېروللارنى ئۇيغۇرچە فونت ۋە يۆنىلىش بەلگىلەپ قايتا يېزىپتۇ. مەسىلەن: UTextView, UButton دېگەندەك.
2. ئەپ يۆنىلىشىنى android:direction, android:layoutDirection, android:textDirection دېگەنلەرگە ئوڭدىن سولغا خاسلىق بېرىپ، ۋە كونتروللانىڭ android.gravity خاسلىقلىرى ئارقىلىق كونتروللارنى ئوڭغا توغۇرلاپ تىزىپتۇ.
مەن بۇ مەشىق ئەسىرىمدە پەقەت Android4.0 دىن يۇقىرى سېستىمىلارنىلا كۆزدە تۇتقىنىم ئۈچۈن، بۇ مەسىلىنى ھەل قىلىش ئاسانغا توختىدى. يەنى، يۇقىرىقى Style ھۆججىتى ئىچىدە ئەپ يۆنىلىشىنى ئوڭدىن سولغا قىلىپ ئومۇمىي دائىرلىك بەلگىلىۋەتتىم.

 
        
  1. <item name="android:direction">right_to_leftitem>  
  2.         <item name="android:layoutDirection">rtlitem>  
  3.         <item name="android:textDirection">rtlitem>  

خەت نۇسخىسىنى ھەل قىلىش ئۈچۈن، FontsOverride نامىدا بىر تىنىچ سىنىپ قۇرۇپ، ئەپ قوزغالغان ھامان مەن بەلگىلىگەن خەت نۇسخىسىنى سېسىتىما ئۆزىدە بار بولغان(ئەمما ئىشلىتىلىش مۇمكىنچىلىكى ئاز بولغان.مەسىلەن: MONOSPACE) بىر Typface نىڭ ئورنىغا ئالماشتۇرۇپ يېزىۋەتمەكچى بولدۇم.

public final class FontsOverride {
  public static void  setDefaultFont(Context context, String staticTypefaceFieldName, String fontAssetName){
      final Typeface regular = Typeface.createFromAsset(context.getAssets(),
              fontAssetName);
      replaceFont(staticTypefaceFieldName, regular);
    }
    protected  static void replaceFont(String staticTypefaceFieldName,
                                 final Typeface newTypeface){
        try {
            final Field staticField = Typeface.class
                    .getDeclaredField(staticTypefaceFieldName);
            staticField.setAccessible(true);
            staticField.set(null, newTypeface);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
}

ئاندىن Application دىن بىرنى قۇرۇپ، مەن assets ئىچىگە تاشلىغان ئۇيغۇرچە فونتنى ئەپ قوزغالغان ھامان يۇقىرىقى ئۇسۇل ئارقىلىق سېستىمىغا خەت نۇسخىسى ئورنىغا يېزىۋەتتىم.

 //Override the App font with Uighur font ttf
        FontsOverride.setDefaultFont(this, "MONOSPACE", "UKIJTuzTom.ttf");

ئاندىن يۇقىرىقى Style ھۆججىتى ئىچىدە كۆرگىنىمىزدەك:

 
       
  1. <item name="android:typeface">monospaceitem>  

ئۇيغۇرچە خەت نۇسخىسى بىلەن باستۇرىۋەتكەن ھىلىقى خەت نۇسخىسىنى ئەپ ئ‍ومۇمىي دائىرلىك خەت نۇسخىسى قىلىپ بەلگىلىۋەتتىم. شۇنىڭ بىلەن ئەپ پۈتۈنلەي بەلگىلىگەن ئۇيغۇرچە خەت نۇسخىسىغا توغۇرلاندى.

4 - قەدەم

لېكىن، ماتېرىيال لايىھە ئامبىرىدىن ئىشلەتكەن بىر نەچچە كونترولنىڭ بەزى بىر ئۈنۈملىرى( مەسىلەن: TextInputLayout نىڭ بەلگە خېتى) ئومۇمىي دائىرلىك خەت نۇسخىسىنى قوللىمايدىكەن. بۇنى ھەل قىلىش ئۈچۈن ئۆزى بەلگىلىگەن TextInputLayout تىن بىرنى يېزىپ، خەت نۇسخىسىنى ھەل قىلدىم:

  public class CustomTextInputLayout extends TextInputLayout {
    public CustomTextInputLayout(Context context) {
        super(context);
        initFont(context);
    }

    public CustomTextInputLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initFont(context);
    }

    private void initFont(Context context) {
        //set TypeFace for TextInputLayout's Edit Text with UKIJTuzTom.ttf
        final Typeface typeface = Typeface.createFromAsset(
                context.getAssets(), "UKIJTuzTom.ttf");

        EditText editText = getEditText();
        if (editText != null) {
            editText.setTypeface(typeface);
        }
        try {
            // Retrieve the CollapsingTextHelper Field
            final Field cthf = TextInputLayout.class.getDeclaredField("mCollapsingTextHelper");
            cthf.setAccessible(true);

            // Retrieve an instance of CollapsingTextHelper and its TextPaint
            final Object cth = cthf.get(this);
            final Field tpf = cth.getClass().getDeclaredField("mTextPaint");
            tpf.setAccessible(true);

            // Apply your Typeface to the CollapsingTextHelper TextPaint
            ((TextPaint) tpf.get(cth)).setTypeface(typeface);
        } catch (Exception ignored) {
            // Nothing to do
        }
    }
}

ئاندىن XML كۆرۈنمە يۈز ھۆججېتى ئىچىدە تۆۋەندىكىدەك ئىشلەتتىم:

    
  1. <com.almj.erqallogin.view.CustomTextInputLayout  
  2.            android:layout_width="match_parent"  
  3.            android:layout_height="wrap_content"  
  4.            android:layout_marginBottom="8dp">  
  5.            <EditText android:id="@+id/input_phone"  
  6.                      android:textDirection="ltr"  
  7.                android:layout_width="match_parent"  
  8.                android:layout_height="wrap_content"  
  9.                android:inputType="numberDecimal"  
  10.                android:hint="يانفۇن " />  
  11.        com.almj.erqallogin.view.CustomTextInputLayout>  

تامام! بۇ مەسىلىمۇ ھەل بولغان بولدى. Android4.0 دىن يۇقىرى سېستىمىلاردا سىناپ باقتىم، پۈتۈنلەي نورمال. بۇ ھەقتىكى نەرسىلەرگە قىززىققۇچىلار ئۈچۈن مەشىق ئەپ كودىنى Github بېتىمگە چىقىرىپ قويدۇم. تەكلىپ - پىكىرلەر بولسا ئورتاقلاشساق بولىدۇ.
ئەپ كودى: Github

6 باھا »

  1. غەلىبە
    غەلىبە May 23rd, 2016 at 12:27 am
    جاۋاب

    ھەقىقەتەن ئېسىل يازما بوپتۇ، ئۇزۇندىن بېرى مۇشۇ ماتېرىيال لايىھە ئۇسلۇبىغا قىزىقىپ كېلىۋاتقان، بۈگۈن بۇ لايىھەنى ئىشلىتىش ۋە باشقا پىرىنسىپلىرىنى ئۆگىنىۋالدىم، بولسا تەجىرىبىلىرىڭىزنى كۆپراق يوللاپ تۇرسىڭىز.

  2. خۇشچىراي
    خۇشچىراي May 23rd, 2016 at 12:37 am
    جاۋاب

    كۆپ تەشەككۈرلەر بولسۇن!!! كۆرۈنمە يۈزگە سەۋدالارچە ئاشىق بولغان مۇشۇ كۈنلەردە material design دىگەن ئۇقۇم بىلەن تۇنۇشۇپ ئۇيان ھەپىلىشىپ بۇيان ھەپىلشىپ ھىچ بىر چۈشەنچە ھاسىل قىلالماي كىلۋاتقان ئىدىم. بۇ يازمىڭىز شۇنداق بىر تىتىملىق تىتىدىكى ئامما لىكىن……
    بولسا مۇشۇ تۈردىكى يازمىللىرڭىز ئۈزۈلۈپ قالمىسا قايسى تەرەپتىن بولسا قوللاپ بىر نىەەت بىر مەقسەد بىلەن تەڭ ئىلگىرلىسەك دىگەن ئۈمۈدلەردە ئىدۇق.

  3. يۈرچى
    يۈرچى May 24th, 2016 at 06:11 pm
    جاۋاب

    ۋاھ ۋاھ ،،، بۇ يازمىنى ماڭا يازغاندەكلا يېزىپسىز سىزگە كۆپ رەھمەت ، بىزلەرمۇ ئەپنىڭ كۆرۈنمە يۈزىنى 5.0 گە ئوخشاش چىقارساق بولار ھەي

  4. پالۋان
    پالۋان May 25th, 2016 at 10:55 pm
    جاۋاب

    خۇددى مەن ئۈچۈنلا يېزىلغاندەك بۇ يازما! كۆپ رەھمەت...

  5. ئۇيغۇربەگ
    ئۇيغۇربەگ May 28th, 2016 at 07:30 pm
    جاۋاب

    مەنمۇ ئۇيغۇرچە ئەپلەرنى دوراپ بىر قانچە ئەپنى ياساپ باققان، تارقىتىپ باقسام بولىدىغان ئوخشايدۇ.

    يۇلتۇز ئۇرۇپ قويدۇم ئەمىسە...

    1. تەشنا
      تەشنا May 29th, 2016 at 08:07 am
      جاۋاب

      شۇنداق قىلسىلا، تارقىتىپ ماندا يېڭى ئۆگەنگۈچىلەرگە مەنبە قىلىپ بەرسىلە بولىدۇ. ئەمدى ئىككى يۇلتۇز بولدى، رەھمەت!