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.
分享到:
相关推荐
android一种简单的toolbar布局实例
navigation-toolbar-android,幻灯片建模的UI导航控制器,博客附件,效果请查看博客相对应项目。
iPhone 开发 toolbar 拖拽 代码实例,toolbar使用范例,图标拖拽
fab-toolbar,android5.0-MaterialDesigner设计效果,滑动显示和隐藏的toolbar
Android toolbar 使用详解,一个不错的学习toolbar的例子,里面包括各种toolbar用法
Android 5.0 Lollipop (API lvl 21) or greater Your favorite IDE Installation Just download the package from here and add it to your project classpath, or just use the maven repo: Gradle:
The Cult will provide a new layout for your Toolbar. This allow you to use with a custom SearchView with animation and more. This library should work on API 14. Usage You can use this library like a ...
Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 Actionbar 。与 Actionbar 相比, Toolbar 明显要灵活...
Android Toolbar简单示例
android Toolbar + DrawerLayout 一起使用
android toolbar demo
120个iphone的toolbar icon,可以用于开发的导航条的一下背景等等
在Android studio中亲测 toolbar中一些常见的用法,好包括如何设置标题居中
Toolbar与ActionBar最大的区别就是Toolbar更加自由、可控。这也是Google在逐渐使用Toolbar替换ActionBar的原因,要使用Toolbar必须引入appcompat-v7支持,并设置主题为NoActionBar。
Slideshow Toolbar Slideshow Toolbar using slideshowimageview Usage For a working implementation of this project see the app/ folder. Include the following dependency in your app build.gradle file. ...
Android Toolbar的示例程序,在Activity的右上添加了几个按钮(查找、分享和设置)。
学习Android Toolbar写的例程
android下导航栏ToolBar的使用示例,包含添加菜单、菜单事件、Title、图标等功能
collapsing toolbar android material design garis besar turorial tambahkan support design library pada gradle project dependencies{ ... compile 'com.android.support:design:25.3.1' } buat layout ...
Android开发中DrawerLayout控件和Toolbar结合使用实现侧滑菜单