注意:
本文主要介绍安卓自定义顶部导航栏(iOS中成为NavigationBar)；写的不尽如人意的地方，请见谅~
概述如下：
环境 ：Android Studio 1.4 for Mac
语言 ：如果我没猜错的话，应该是Java
特点 ：简单、直接、暴力，绝对让你有快感！！！
展示
1.效果展示
自定义导航栏.gif
2.工程目录结构
目录结构.png
简要说明
主要用到的文件已为大家用黄色的方框标出来了；
- Java类
MainActivity：还用解释？
ShowNavigationActivity：展示自定义Navigation的类(iOS中可以理解为在ViewController中调用)
WJNavigationBarActivity：自定义Navigation
- 布局
activity_main：不解释
activity_shownavigation.xml：ShowNavigationActivity.java绑定的页面
activity_wjnavigationbar.xml：自定义Navigation布局页面
- 资源(我觉得这么叫就是对的！！！)
navigationbar_left_item_selector.xml：NavigationItemLetfButton
navigationbar_right_item_selector.xml：NavigationItemRightButton
各种以.png结尾的就是图片而已
1.开始写布局
1.1 -- 主页面
activity_main.xml
xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
android:id="@+id/navigation_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="展示NavigationBar"
android:background="#aa0d3f"/>
简要说明
就是一个按钮而已
1.2 -- 展示页面
activity_shownavigation.xml
xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/navi_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World"/>
简要说明
把自定义Navigation添加到你要使用的页面中
1.3 -- Navigation布局页面
activity_wjnavigationbar.xml
xmlns:android="/apk/res/android"
android:id="@+id/rl_chat_title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#91c2ae"
android:layout_alignParentTop="true">
android:id="@+id/iv_navi_back"
android:layout_width="25dp"
android:layout_height="25dp"
android:background="@drawable/navigationbar_left_item_selector"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
android:id="@+id/tv_navi_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="自定义NavigationBar"
android:textSize="15dp"/>
android:id="@+id/iv_navi_right"
android:layout_width="25dp"
android:layout_height="25dp"
android:background="@drawable/navigationbar_right_item_selector"
android:clickable="true"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"/>
简要说明
这个页面采用的是相对布局，我本人是很中意这种布局的，因为和Masonry很像
1.3 -- 资源
navigationbar_left_item_selector.xml
navigationbar_rigt_item_selector.xml
简要说明
这个资源的xml主要作用是让按钮的icon有两种效果，一个是默认效果，一个是选中效果；
在1.2页面布局中有所引用，如下：
android:background="@drawable/navigationbar_left_item_selector"
android:background="@drawable/navigationbar_right_item_selector"
2.开始写代码
2.1 MainActivity.java
public class MainActivity extends AppCompatActivity
{
private Button navigation_btn; /// 展示自定义NavigationBar
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setTitle("做着玩的");
initView(); /// 初始化控件
selectorMethod(); /// 点击事件
}
/*** * 初始化控件 */
public void initView()
{
navigation_btn = (Button) findViewById(R.id.navigation_btn);
}
/*** * 按钮点击事件 */
public void selectorMethod()
{
// 展示自定义NavigationBar
navigation_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
System.out.println("展示自定义NavigationBar");
// 跳转页面
Intent intent = new Intent(MainActivity.this, ShowNavigationActivity.class);
startActivity(intent);
}
});
}
}
2.2 ShowNavigationActivity.java
public class ShowNavigationActivity extends Activity
{
private WJNavigationBarActivity wjNavigationBarActivity; // 调用自定义Navigation的Java类
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_shownavigation);
initView(); /// 初始化控件
}
/*** * 初始化 */
public void inieView()
{
wjNavigationBarActivity = (WJNavigationBarActivity) super.findViewById(R.id.navi_main);
wjNavigationBarActivity.setTitle("自定义导航栏");
// Java中叫回调，iOS中叫Block
wjNavigationBarActivity.setClickCallback(new WJNavigationBarActivity.ClickCallback() {
/*** * 返回按钮 */
@Override
public void onBackClick() {
System.out.println("返回按钮");
System.out.println("写你的逻辑呗~");
}
/*** * 右侧按钮 */
@Override
public void onRightClick() {
System.out.println("右侧按钮");
System.out.println("写你的逻辑呗~");
}
}
}
}
2.3 WJNavigationBarActivity.java
public class WJNavigationBarActivity extends RelativeLayout implements View.OnClickListener
{
private ImageView iv_navi_back; // 返回按钮
private TextView tv_navi_title; // 中间的标题
private ImageView iv_navi_right; // 右边的按钮
public WJNavigationBarActivity(Context context)
{
this(context,null);
}
public WJNavigationBarActivity(Context context,AttributeSet attrs)
{
super(context,attrs);
View view = LayoutInflater.from(context).inflate(R.layout.activity_wjnavigationbar,this,true);
iv_navi_back = (ImageView) findViewById(R.id.iv_navi_back);
iv_navi_back.setOnClickListener(this);
tv_navi_title = (TextView) findViewById(R.id.tv_navi_title);
iv_navi_right = (ImageView) findViewById(R.id.iv_navi_right);
iv_navi_right.setOnClickListener(this);
}
/***
* 获取返回按钮
* @return iv_navi_back
*/
public ImageView getIv_navi_back()
{
return iv_navi_back;
}
/***
* 获取标题
* @return tv_navi_title
*/
public TextView getTv_navi_title()
{
return tv_navi_title;
}
/***
* 设置标题
* @param title
*/
public void setTitle(String title)
{
tv_navi_title.setText(title);
}
/***
* 获取右边的按钮
* @return iv_navi_right
*/
public ImageView getIv_navi_right()
{
return iv_navi_right;
}
private ClickCallback callback; // 声明回调函数
/***
* 设置按钮点击回调的接口
* @param callback
*/
public void setClickCallback(ClickCallback callback)
{
this.callback = callback;
}
/***
* 导航栏点击回调接口 -- Block中的回调方法
* 如若需要标题可点击,可再添加
*/
public static interface ClickCallback
{
void onBackClick();
void onRightClick();
}
/***
* 点击事件
*/
@Override
public void onClick(View v)
{
int id = v.getId();
if (id == R.id.iv_navi_back)
{
callback.onBackClick();
return;
}
if (id == R.id.iv_navi_right)
{
callback.onRightClick();
return;
}
}
}
简要说明
这个类你可以理解为一个接口类，哪用哪调用呗，毕竟在安卓中我还是个小Baby(真TM无耻)；
我在想，安卓肯定有一个和iOS一样的全局设置Navigation的方法，只是我不知道，所以我是小baby~~
总结
希望大家喜欢我写的东西，转发收藏什么的，多多益善~
后面有时间的话，我会在这篇文章中加上相对完整和人性化的东西.
如果我找到设置全局Navigation的方法，我就会添加
wjNavigationBarActivity.show( )
wjNavigationBarActivity.dismiss( )
最后，如果你有更好的，请回复我，并粘贴你的资料地址。
有事私信
WangJun 1228
