יום רביעי, 30 בינואר 2013

אתר מעולה לתכנון ממשק של אפליקציה

אני רוצה להמליץ לכם על אתר מעולה שמאפשר לתכנן את הממשק של האפליקציה שלכם - https://www.fluidui.com/
התכנון מתבצע בתוך הדפדפן עצמו, בגרסה החינמית ניתן לפתוח פרוייקט אחד ולהוסיף עד 10 מסכים.
יש מבחר גדול של אייקונים ווידג'טים שמאפשרים לתכנן ולבנות ממשקים מאוד יפים.



יום רביעי, 16 בינואר 2013

יצירת ActionBar מקוסטם תוך שימוש ב-ActionBarSherlock

היום אני אדגים איך יוצרים ActionBar בהתאמה אישית, תוך שימוש בספריה ActionBarSherlock.
דבר ראשון אני ממליץ להשתמש בספריה ActionBarSherlock ליצירת ActionBar, כי היא מאפשרת תמיכה לאחור במכשירים ישנים יותר.

נתחיל ביצירת Layout חדש, נקרא לו actionbar_custom.xml:

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:          android:orientation="horizontal" android:layout_height="match_parent"   
4:          android:layout_width="match_parent" android:baselineAligned="false">  
5:        <LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">  
6:               <RelativeLayout  
7:                 android:id="@+id/rltvCancel"  
8:                 android:layout_width="match_parent"  
9:                 android:layout_height="match_parent"  
10:                 android:background="@drawable/layout_selector_actionbar"  
11:                 android:clickable="true"  
12:                 android:gravity="center" >  
13:                 <ImageView  
14:                   android:id="@+id/imageViewCancel"  
15:                   android:layout_width="wrap_content"  
16:                   android:layout_height="wrap_content"  
17:                   android:layout_alignBottom="@+id/textViewCancel"  
18:                   android:src="@drawable/ic_action_cancel" />  
19:                 <TextView  
20:                   android:id="@+id/textViewCancel"  
21:                   android:layout_width="wrap_content"  
22:                   android:layout_height="wrap_content"  
23:                   android:layout_marginLeft="10dp"  
24:                   android:layout_toRightOf="@+id/imageViewCancel"  
25:                   android:text="Cancel"  
26:                   android:textColor="#636d6d"  
27:                   android:textSize="20sp" />  
28:            </RelativeLayout>  
29:        </LinearLayout>  
30:        <View  
31:          android:id="@+id/firstDivider"  
32:          android:layout_width="1dp"  
33:          android:layout_height="fill_parent"  
34:          android:layout_marginBottom="5dp"  
35:          android:layout_marginTop="2dp"  
36:          android:background="#999999" />  
37:        <LinearLayout android:layout_weight="1" android:layout_height="match_parent" android:layout_width="match_parent">  
38:          <RelativeLayout  
39:            android:id="@+id/rltvSubmit"  
40:            android:layout_width="match_parent"  
41:            android:layout_height="match_parent"  
42:            android:background="@drawable/layout_selector_actionbar"  
43:            android:clickable="true"  
44:            android:gravity="center" >  
45:               <ImageView  
46:                 android:id="@+id/imageViewSubmit"  
47:                 android:layout_width="wrap_content"  
48:                 android:layout_height="wrap_content"  
49:                 android:layout_alignBottom="@+id/textViewSubmit"  
50:                 android:src="@drawable/ic_action_send" />  
51:                   <TextView  
52:                     android:id="@+id/textViewSubmit"  
53:                     android:layout_width="wrap_content"  
54:                     android:layout_height="wrap_content"  
55:                     android:layout_marginLeft="10dp"  
56:                     android:layout_toRightOf="@+id/imageViewSubmit"  
57:                     android:text="Submit"  
58:                     android:textColor="#636d6d"  
59:                     android:textSize="20sp" />  
60:          </RelativeLayout>  
61:        </LinearLayout>  
62:  </LinearLayout>  

עכשיו אנחנו צריכים להוסיף את ה-Layout שיצרנו ל-ActionBar שלנו:
1:  import android.content.Context;  
2:  import android.os.Bundle;  
3:  import android.util.Log;  
4:  import android.view.Gravity;  
5:  import android.view.LayoutInflater;  
6:  import android.view.View;  
7:  import android.view.View.OnClickListener;  
8:  import android.widget.RelativeLayout;  
9:  import com.actionbarsherlock.app.ActionBar;  
10:  import com.actionbarsherlock.app.SherlockActivity;  
11:  public class TestActivity extends SherlockActivity implements OnClickListener {  
12:       private String TAG="TestActivity";  
13:       ActionBar mActionBar;  
14:       @Override  
15:       protected void onCreate(Bundle savedInstanceState) {  
16:            super.onCreate(savedInstanceState);  
17:            setContentView(R.layout.actionbar_custom);  
18:            mActionBar=getSupportActionBar();  
19:            mActionBar.setDisplayShowCustomEnabled(true);  
20:            mActionBar.setDisplayShowTitleEnabled(false);  
21:            mActionBar.setDisplayShowHomeEnabled(false);  
22:            ActionBar.LayoutParams params = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,ActionBar.LayoutParams.MATCH_PARENT, Gravity.CENTER);   
23:            LayoutInflater inflator = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
24:            View v = inflator.inflate(R.layout.actionbar_add, null);  
25:            mActionBar.setCustomView(v,params);  
26:            RelativeLayout rltvCancel=(RelativeLayout)findViewById(R.id.rltvCancel);  
27:            rltvCancel.setOnClickListener(this);  
28:            RelativeLayout rltvSubmit=(RelativeLayout)findViewById(R.id.rltvSubmit);  
29:            rltvSubmit.setOnClickListener(this);  
30:       }  
31:      @Override  
32:       public void onClick(View v) {  
33:            switch (v.getId()) {  
34:            case R.id.rltvCancel:  
35:                 Log.v(TAG,"Cancel clicked");  
36:                 break;  
37:            case R.id.rltvSubmit:  
38:                 Log.v(TAG,"Submit clicked");  
39:                 break;  
40:            default:  
41:                 break;  
42:            }  
43:       }  
44:  }  

וזאת התוצאה: