iPhone Like Toolbar for Android
Recently my company has been getting a few projects where people ask us to build Android versions of their iPhone applications. As a result of these projects I needed to create a simple iPhone like Toolbar component for Android. I extended the original component so that it could also double as a more flexible Tab component. Here are the results.
Layout for default activity - main.xml
Note the last component. This points to the class below. I also use a custom attribute to indicate which tab is currently selected.
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.paxmodept.demo" android:orientation="vertical" android:background="@android:color/white" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/hello" android:gravity="center"/> <com.paxmodept.demo.Toolbar android:layout_width="fill_parent" android:layout_height="70dip" app:textViewId="option1"/> </LinearLayout>
Class - Toolbar.java
This is the class that controls the component. These custom components are a nice way to re-use code efficiently. Note how I inflate the navigation layout file.
public class Toolbar extends LinearLayout { public Toolbar(final Context context) { super(context); } public Toolbar(final Context con, AttributeSet attrs) { super(con,attrs); setOrientation(HORIZONTAL); setBackgroundColor(getResources(). getColor(android.R.color.transparent)); LayoutInflater inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE); inflater.inflate(R.layout.navigation, this); TypedArray a = con.obtainStyledAttributes(attrs, R.styleable.Toolbar); String option = a.getString(R.styleable.Toolbar_textViewId); String resourceId = "com.paxmodept.demo:id/"+option; int optionId = getResources().getIdentifier(resourceId,null,null); TextView currentOption = (TextView) findViewById(optionId); currentOption.setBackgroundColor(getResources(). getColor(android.R.color.white)); currentOption.setTextColor(getResources(). getColor(android.R.color.black)); currentOption.requestFocus(optionId); currentOption.setFocusable(false); currentOption.setClickable(false); TextView option1 = (TextView) findViewById(R.id.option1); option1.setOnClickListener(new OnClickListener() { public void onClick(View v) { CharSequence txt = "Hello!"; int len = Toast.LENGTH_SHORT; Toast toast = Toast.makeText(con, txt, len); toast.show(); } }); }}
Include File - navigation.xml
This creates the navgation bar. It uses compound drawables in aTextViewcomponent to minimise the number of components needed. Note that the background and textColor attributes of each TextView component areColourStateLists. This gives you a great deal of flexibility in terms of creating a custom look and feel.
<merge xmlns:android="http://schemas.android.com/apk/res/android"> <TextView android:id="@+id/option1" android:layout_height="70dip" android:layout_width="80dip" android:text="Title 1" android:textSize="10dip" android:textStyle="bold" android:textColor="@drawable/text_states" android:clickable="true" android:focusable="true" android:background="@drawable/backgound_states" android:drawableTop="@android:drawable/ic_menu_edit" android:gravity="center" android:layout_weight="1"/> <TextView android:id="@+id/option2" android:layout_height="70dip" android:layout_width="80dip" android:text="Title 2" android:textSize="10dip" android:textStyle="bold" android:textColor="@drawable/text_states" android:clickable="true" android:focusable="true" android:background="@drawable/backgound_states" android:drawableTop="@android:drawable/ic_menu_zoom" android:gravity="center" android:layout_weight="1"/> <TextView android:id="@+id/option3" android:layout_height="70dip" android:layout_width="80dip" android:text="Title 3" android:textSize="10dip" android:textStyle="bold" android:textColor="@drawable/text_states" android:clickable="true" android:focusable="true" android:background="@drawable/backgound_states" android:drawableTop="@android:drawable/ic_menu_add" android:gravity="center" android:layout_weight="1"/> <TextView android:id="@+id/option4" android:layout_height="70dip" android:layout_width="80dip" android:text="Title 4" android:textSize="10dip" android:textStyle="bold" android:textColor="@drawable/text_states" android:clickable="true" android:focusable="true" android:background="@drawable/backgound_states" android:drawableTop="@android:drawable/ic_menu_help" android:gravity="center" android:layout_weight="1"/> </merge>
I am sure there are alternate ways of creating the navigation bar but this strategy worked for me.
Source code updated 11/08/2010Please note that the source code is now more comprehensive but is slightly different from the tutorial displayed above.
Download the source code for the entire project.
更多相关文章
- 代码中设置drawableleft
- android 3.0 隐藏 系统标题栏
- Android开发中activity切换动画的实现
- Android(安卓)学习 笔记_05. 文件下载
- Android中直播视频技术探究之—摄像头Camera视频源数据采集解析
- 技术博客汇总
- android 2.3 wifi (一)
- AndRoid Notification的清空和修改
- Android中的Chronometer